@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {

    --ys-green-950: #00180d;
    --ys-green-900: #002615;
    --ys-green-800: #003520;
    --ys-green-700: #004225;
    --ys-green-600: #0b5a37;
    --ys-green-500: #1a7049;
    --ys-green-100: #e4efe8;
    --ys-green-50:  #f2f7f3;

--ys-ink:      #0e1311;
    --ys-ink-2:    #2a3330;
    --ys-ink-3:    #5a6561;
    --ys-ink-4:    #8a938f;
    --ys-line:     #d7dcd9;
    --ys-line-2:   #e8ebea;
    --ys-surface:  #ffffff;
    --ys-bg:       #fafbfa;
    --ys-bg-2:     #f3f5f4;

--ys-copper:   #b5651d;
    --ys-copper-2: #8f4f17;
    --ys-amber:    #c38a00;
    --ys-red:      #8a1f1f;
    --ys-blue:     #1f4a7a;

--fg-1: var(--ys-ink);
    --fg-2: var(--ys-ink-2);
    --fg-3: var(--ys-ink-3);
    --fg-muted: var(--ys-ink-4);
    --fg-on-dark: #ffffff;
    --fg-brand:   var(--ys-green-700);

--bg-1: var(--ys-bg);
    --bg-2: var(--ys-bg-2);
    --bg-surface: var(--ys-surface);
    --bg-brand:   var(--ys-green-700);
    --bg-brand-dark: var(--ys-green-900);
    --bg-tint:    var(--ys-green-50);

--border-1: var(--ys-line);
    --border-2: var(--ys-line-2);
    --border-strong: var(--ys-ink-2);

--font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-display: "Inter Tight", var(--font-sans);

--fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 15px;
    --fs-md:   16px;
    --fs-lg:   18px;
    --fs-xl:   22px;
    --fs-2xl:  28px;
    --fs-3xl:  36px;
    --fs-4xl:  48px;
    --fs-5xl:  64px;
    --fs-6xl:  80px;

--lh-tight: 1.08;
    --lh-snug:  1.2;
    --lh-body:  1.5;
    --lh-loose: 1.65;

--tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-mega: 0.12em;

--space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

--radius-0: 0px;
    --radius-1: 2px;
    --radius-2: 4px;
    --radius-3: 6px;
    --radius-pill: 999px;

--shadow-0: 0 0 0 1px rgba(14,19,17,0.06);
    --shadow-1: 0 1px 2px rgba(14,19,17,0.06), 0 0 0 1px rgba(14,19,17,0.04);
    --shadow-2: 0 2px 6px rgba(14,19,17,0.08), 0 0 0 1px rgba(14,19,17,0.05);
    --shadow-3: 0 8px 24px rgba(14,19,17,0.10), 0 0 0 1px rgba(14,19,17,0.06);
    --shadow-focus: 0 0 0 3px rgba(11,90,55,0.28);
}

.eyebrow {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-mega);
    color: var(--fg-brand);
}

.mono, .spec {
    font-family: var(--font-mono);
    letter-spacing: 0;
}

.spec {
    color: var(--fg-2);
    font-weight: 500;
}

.tnum { font-variant-numeric: tabular-nums; }