@layer reset, tokens, base, identity, utilities;

@layer reset {
    * { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    body, h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
    img, svg { display: block; max-width: 100%; }
    button, input, textarea, select { font: inherit; }
}

@layer tokens {
    :root {
        --nl-blue: #0098ee;
        --nl-white: #ffffff;
        --nl-light-magenta: #c865b5;
        --nl-light-pink: #d75f94;
        --nl-light-red: #df5f6f;
        --nl-light-red-orange: #de673b;
        --nl-light-orange: #d76f04;
        --nl-light-gold: #b58800;
        --nl-light-chartreuse: #9ba80a;
        --nl-light-lime: #799f0d;
        --nl-light-green: #2ea957;
        --nl-light-turquoise: #00a7a4;
        --nl-light-sky: #00a5cb;
        --nl-light-violet: #877deb;
        --nl-light-purple: #b36dd1;
        --nl-dark-magenta: #7b3c62;
        --nl-dark-wine: #6b314e;
        --nl-dark-maroon: #732d3b;
        --nl-dark-brick: #7e3638;
        --nl-dark-rust: #783d27;
        --nl-dark-brown: #6d4528;
        --nl-dark-olive: #6b5200;
        --nl-dark-moss: #495e16;
        --nl-dark-forest: #236436;
        --nl-dark-pine: #006752;
        --nl-dark-teal: #00656b;
        --nl-dark-petrol: #00607f;
        --nl-dark-deep-blue: #23588a;
        --nl-dark-indigo: #464f8c;
        --nl-dark-purple: #5e4784;
        --nl-dark-plum: #714074;
        --nl-porcelain: #f7f9fb;
        --nl-night: #111820;
        --nl-horizon: #6f7a84;
        --nl-ink: #182129;
        --nl-slate: #5d6974;
        --nl-pearl: #e7edf2;
        --nl-mist: #87929c;
        --nl-font-identity: var(--font-identity, 'NL Identity', sans-serif);
        --nl-font-information: var(--font-readability, 'NL Readability', system-ui, sans-serif);
        --nl-font-specimen: var(--font-special, 'NL Special', sans-serif);
        --nl-font-fancy: var(--font-fancy, 'NL Fancy', serif);
        --nl-radius-compact: 4px;
        --nl-radius-surface: 10px;
        --nl-border: 1px solid rgb(111 122 132 / .32);
        --nl-shadow-light: 0 6px 18px rgb(17 24 32 / .08);
        --nl-shadow-dark: 0 6px 18px rgb(0 0 0 / .28);
        --nl-letter-size: .48em;
        --nl-letter-x: 0%;
        --nl-letter-y: 0%;
    }
    :root, [data-theme='light'] {
        --nl-surface: var(--nl-porcelain);
        --nl-text-primary: var(--nl-ink);
        --nl-text-secondary: var(--nl-slate);
        --nl-shadow: var(--nl-shadow-light);
        color-scheme: light;
    }
    [data-theme='dark'] {
        --nl-surface: var(--nl-night);
        --nl-text-primary: var(--nl-pearl);
        --nl-text-secondary: var(--nl-mist);
        --nl-shadow: var(--nl-shadow-dark);
        color-scheme: dark;
    }
}

@layer base {
    body { font-family: var(--nl-font-information); font-weight: 400; background: var(--nl-surface); color: var(--nl-text-primary); }
    h1, h2, h3, h4 { font-family: var(--nl-font-information); font-weight: 700; line-height: 1.12; }
    p, li { line-height: 1.6; }
    a { color: inherit; }
}

@layer identity {
    .nl-type-identity { font-family: var(--nl-font-identity); font-weight: 400; }
    .nl-type-information { font-family: var(--nl-font-information); font-weight: 400; }
    .nl-type-information-emphasis { font-family: var(--nl-font-information); font-weight: 600; }
    .nl-type-information-heading { font-family: var(--nl-font-information); font-weight: 700; }
    .nl-type-specimen-large { font-family: var(--nl-font-specimen); font-weight: var(--nl-special-large-weight, 300); }
    .nl-type-specimen-context { font-family: var(--nl-font-specimen); font-weight: var(--nl-special-context-weight, 400); }
    .nl-type-fancy { font-family: var(--nl-font-fancy); font-weight: 400; }
    .nl-type-fancy-quote { font-family: var(--nl-font-fancy); font-weight: 400; font-style: var(--nl-fancy-style, italic); }

    .nl-mark { width: 1em; height: 1em; display: grid; place-items: center; background: var(--nl-blue); color: var(--nl-white); font-family: var(--nl-font-identity); font-weight: 400; border-radius: 0; overflow: hidden; direction: ltr; }
    .nl-mark__letters { font-size: var(--nl-letter-size); line-height: 1; white-space: nowrap; transform: translate(var(--nl-letter-x), var(--nl-letter-y)); }
    .nl-mark--squircle { border-radius: 18%; }
    .nl-mark--mono-positive { background: var(--nl-ink); color: var(--nl-porcelain); }
    .nl-mark--mono-reverse { background: var(--nl-pearl); color: var(--nl-night); }

    .nl-lockup { --nl-field: 48px; display: inline-block; font-size: var(--nl-field); color: inherit; direction: ltr; }
    .nl-lockup__protected { display: block; padding: var(--nl-lockup-clearspace); }
    .nl-lockup__row { display: flex; align-items: center; gap: var(--nl-lockup-gap); direction: ltr; }
    .nl-lockup__name { font-family: var(--nl-lockup-font); font-size: var(--nl-lockup-name-size); font-weight: var(--nl-lockup-weight); line-height: 1; white-space: nowrap; }
    .nl-lockup--compact { --nl-lockup-gap: .18em; --nl-lockup-clearspace: .18em; --nl-lockup-font: var(--nl-font-information); --nl-lockup-weight: 600; --nl-lockup-name-size: .64em; }
    .nl-lockup--large { --nl-lockup-gap: .36em; --nl-lockup-clearspace: .36em; --nl-lockup-font: var(--nl-font-identity); --nl-lockup-weight: 400; --nl-lockup-name-size: .72em; }

    .nl-surface { border: var(--nl-border); border-radius: var(--nl-radius-surface); }
    .nl-elevated { box-shadow: var(--nl-shadow); }
    .nl-quote { font-family: var(--nl-font-fancy); }
    .nl-quote__body { font-style: var(--nl-fancy-style, italic); }
    .nl-quote__attribution { font-style: normal; }
}

@layer utilities {
    .u-radius-none { border-radius: 0; }
    .u-radius-compact { border-radius: var(--nl-radius-compact); }
    .u-radius-surface { border-radius: var(--nl-radius-surface); }
    .u-radius-pill { border-radius: 9999px; }
    .u-text-secondary { color: var(--nl-text-secondary); }
    .u-nl-blue { color: var(--nl-blue); }
    .u-bg-nl-blue { background: var(--nl-blue); }
}