/* Codebled Design System — tokens. Mirrors the design system's styles.css.
   Paper ground, moss inks, phosphor (leaf) accent. Light by default; .cb-dark for Work bands.
   Do not add colours here: every value below is a ramp step or an alpha of one. */

/* ——— Webfonts (self-hosted, SIL OFL — see src/assets/fonts/README.md) ——— */
@font-face{font-family:"Manrope";font-style:normal;font-weight:500 800;font-display:swap;src:url("/assets/fonts/manrope-var-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500 800;font-display:swap;src:url("/assets/fonts/manrope-var-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-var-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-var-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2")}

:root{
  /* ——— Paper ramp (light grounds) ——— */
  --paper-000:#FFFFFF;
  --paper-100:#F8F6F0;
  --paper-200:#F4F1EA;
  --paper-300:#ECE8DE;
  --paper-400:#DDD8CB;
  --paper-500:#B9B4A6;

  /* ——— Moss ramp (ink greens, dark grounds) ——— */
  --moss-100:#C8E6C0;
  --moss-200:#9DB8A3;
  --moss-300:#7FA98A;
  --moss-400:#5A7F66;
  --moss-500:#3E6B4F;
  --moss-600:#2B4A37;
  --moss-700:#1F3D2C;
  --moss-800:#14261B;
  --moss-900:#0C0F0D;

  /* ——— Leaf: the single accent (phosphor) ——— */
  --leaf-100:#DDF5E3;
  --leaf-300:#8EEBAA;
  --leaf-500:#5CF08A;
  --leaf-600:#2FBF64;
  --leaf-700:#1E9A50;
  --leaf-900:#0F4A27;

  /* ——— Support hues (status only) ——— */
  --cyan-300:#8CE4E2;--cyan-500:#2FB8B5;--cyan-700:#177574;
  --amber-300:#FFD89B;--amber-500:#E9A23B;--amber-700:#8F5A0E;
  --coral-300:#FFB3AC;--coral-500:#E5533F;--coral-700:#9A2B20;

  /* ——— Legacy aliases (components address these) ——— */
  --ink-000:var(--moss-900);--ink-050:var(--moss-900);--ink-100:var(--moss-800);--ink-200:var(--moss-700);--ink-300:var(--moss-600);--ink-400:var(--moss-500);--ink-500:var(--moss-400);--ink-600:var(--moss-300);--ink-700:var(--moss-200);--ink-800:var(--moss-100);--ink-900:var(--paper-400);--ink-950:var(--paper-200);--ink-999:var(--paper-000);
  --volt-100:var(--leaf-100);--volt-300:var(--leaf-300);--volt-500:var(--leaf-500);--volt-600:var(--leaf-600);--volt-700:var(--leaf-700);--volt-900:var(--leaf-900);

  /* ——— Alpha utilities (light) ——— */
  --alpha-line:rgba(20,38,27,.12);
  --alpha-line-strong:rgba(20,38,27,.24);
  --alpha-fill:rgba(20,38,27,.04);
  --alpha-fill-hover:rgba(20,38,27,.08);
  --alpha-volt-fill:rgba(30,154,80,.10);
  --alpha-volt-line:rgba(30,154,80,.40);

  /* ——— Semantic: surface (light default) ——— */
  --surface-page:var(--paper-200);
  --surface-raised:var(--paper-000);
  --surface-card:var(--paper-000);
  --surface-inset:var(--paper-300);
  --surface-overlay:rgba(244,241,234,.86);
  --surface-accent:var(--leaf-500);
  --surface-invert:var(--moss-900);

  /* ——— Semantic: text ——— */
  --text-primary:var(--moss-800);
  --text-body:var(--moss-700);
  --text-muted:var(--moss-500);
  --text-faint:var(--moss-400);   /* decorative only: below 4.5:1 on paper */
  --text-accent:var(--leaf-700);  /* 3.2:1 on paper: large text, marks and rules only */
  --text-on-accent:var(--moss-900);
  --text-on-invert:var(--moss-100);
  --text-link:var(--leaf-700);
  --text-link-hover:var(--moss-800);

  /* ——— Semantic: line ——— */
  --line-hairline:var(--alpha-line);
  --line-strong:var(--alpha-line-strong);
  --line-accent:var(--alpha-volt-line);
  --line-focus:var(--leaf-600);

  /* ——— Semantic: status ——— */
  --status-ok:var(--leaf-600);
  --status-info:var(--cyan-500);
  --status-warn:var(--amber-500);
  --status-danger:var(--coral-500);

  /* ——— Grid motif ——— */
  --grid-line:rgba(20,38,27,.06);
  --grid-cell:32px;
  --grid-pattern:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
}

/* Dark scope — phosphor on near-black. Reserved for Work / product showcases. */
.cb-dark{
  --surface-page:var(--moss-900);
  --surface-raised:#111614;
  --surface-card:#131815;
  --surface-inset:#080A09;
  --surface-overlay:rgba(12,15,13,.84);
  --surface-invert:var(--paper-200);
  --text-primary:var(--moss-100);
  --text-body:var(--moss-200);
  --text-muted:var(--moss-300);
  --text-faint:var(--moss-400);
  --text-accent:var(--leaf-500);
  --text-on-invert:var(--moss-800);
  --text-link:var(--leaf-500);
  --text-link-hover:var(--leaf-300);
  --line-hairline:rgba(200,230,192,.12);
  --line-strong:rgba(200,230,192,.22);
  --alpha-line:rgba(200,230,192,.12);
  --alpha-line-strong:rgba(200,230,192,.22);
  --alpha-fill:rgba(200,230,192,.05);
  --alpha-fill-hover:rgba(200,230,192,.09);
  --alpha-volt-fill:rgba(92,240,138,.12);
  --alpha-volt-line:rgba(92,240,138,.38);
  --grid-line:rgba(200,230,192,.06);
}

:root{
  /* Families */
  --font-display:"Manrope",system-ui,sans-serif;
  --font-sans:"IBM Plex Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

  /* Weights */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-black:800;

  /* Size ramp — 1.25 major-third-ish, floored at 12px */
  --size-micro:11px;
  --size-label:12px;
  --size-caption:13px;
  --size-body-s:15px;
  --size-body:16px;
  --size-body-l:18px;
  --size-h5:20px;
  --size-h4:24px;
  --size-h3:32px;
  --size-h2:44px;
  --size-h1:60px;
  --size-display:84px;
  --size-mega:120px;

  /* Line heights */
  --leading-flat:1;
  --leading-tight:1.08;
  --leading-snug:1.25;
  --leading-normal:1.5;
  --leading-relaxed:1.7;

  /* Tracking — display tightens, mono labels open up */
  --tracking-display:-0.045em;
  --tracking-heading:-0.02em;
  --tracking-normal:0;
  --tracking-wide:0.04em;
  --tracking-label:0.14em;

  /* Semantic roles */
  --type-display:var(--weight-black) var(--size-display)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-black) var(--size-h1)/var(--leading-tight) var(--font-display);
  --type-h2:var(--weight-bold) var(--size-h2)/var(--leading-tight) var(--font-display);
  --type-h3:var(--weight-semibold) var(--size-h3)/var(--leading-snug) var(--font-display);
  --type-h4:var(--weight-semibold) var(--size-h4)/var(--leading-snug) var(--font-display);
  --type-h5:var(--weight-semibold) var(--size-h5)/var(--leading-snug) var(--font-display);
  --type-body:var(--weight-regular) var(--size-body)/var(--leading-relaxed) var(--font-sans);
  --type-body-l:var(--weight-regular) var(--size-body-l)/var(--leading-relaxed) var(--font-sans);
  --type-body-s:var(--weight-regular) var(--size-body-s)/var(--leading-normal) var(--font-sans);
  --type-ui:var(--weight-medium) var(--size-body-s)/var(--leading-normal) var(--font-sans);
  --type-caption:var(--weight-regular) var(--size-caption)/var(--leading-normal) var(--font-sans);
  --type-mono:var(--weight-regular) var(--size-caption)/var(--leading-normal) var(--font-mono);
  --type-label:var(--weight-medium) var(--size-label)/var(--leading-flat) var(--font-mono);
  --max-measure:66ch;
}

:root{
  /* 4px base grid. Structural rhythm above 48px is 8px-stepped. */
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
  --space-11:80px;
  --space-12:96px;
  --space-13:128px;
  --space-14:160px;

  /* Semantic */
  --gap-inline:var(--space-2);
  --gap-stack:var(--space-4);
  --gap-card:var(--space-6);
  --gap-grid:var(--space-6);
  --pad-control:var(--space-3);
  --pad-card:var(--space-6);
  --pad-section-y:var(--space-13);
  --pad-page-x:var(--space-7);
  --width-container:1200px;
  --width-narrow:720px;
  --height-control:40px;
  --height-control-s:32px;
  --height-control-l:48px;
}

:root{
  /* Near-square. Engineering drawing, not consumer app. */
  --radius-none:0px;
  --radius-xs:2px;
  --radius-sm:3px;
  --radius-md:4px;
  --radius-lg:6px;
  --radius-pill:999px;

  --radius-control:var(--radius-xs);
  --radius-card:var(--radius-md);
  --radius-panel:var(--radius-lg);
  --radius-tag:var(--radius-xs);

  --border-width:1px;
  --border-width-strong:2px;
  --border-hairline:var(--border-width) solid var(--line-hairline);
  --border-strong:var(--border-width) solid var(--line-strong);
  --border-accent:var(--border-width) solid var(--line-accent);
}

:root{
  /* Depth comes from lines and light, not soft drop shadows. */
  --shadow-none:none;
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-panel:0 1px 0 rgba(0,0,0,.6),0 12px 32px -16px rgba(0,0,0,.8);
  --shadow-overlay:0 32px 64px -24px rgba(0,0,0,.9);
  /* Glows re-pointed from the retired volt lime to leaf-500 (92,240,138). */
  --glow-volt:0 0 0 1px var(--alpha-volt-line),0 0 24px -6px rgba(92,240,138,.35);
  --glow-volt-strong:0 0 0 1px var(--leaf-500),0 0 32px -4px rgba(92,240,138,.5);
  /* Ring uses --text-accent so it clears 3:1 on both paper (leaf-700) and moss (leaf-500). */
  --glow-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--text-accent);
  --scrim-top:linear-gradient(180deg,rgba(12,15,13,.92),transparent); /* @kind other */
  --scrim-bottom:linear-gradient(0deg,rgba(12,15,13,.92),transparent); /* @kind other */
}

:root{
  /* Fast, mechanical, no bounce. Movement is 1-2px; opacity does the rest. */
  --dur-instant:80ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:400ms; /* @kind other */
  --ease-out:cubic-bezier(.2,.8,.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-linear:linear; /* @kind other */
  --transition-control:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
  --transition-surface:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out);
  --lift-hover:translateY(-1px); /* @kind other */
  --press-scale:.985; /* @kind other */
}

/* Minimal resets and element defaults consumers get for free. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{margin:0;color:var(--text-primary);letter-spacing:var(--tracking-heading);text-wrap:balance}
h1{font:var(--type-h1);letter-spacing:var(--tracking-display)}
h2{font:var(--type-h2)}
h3{font:var(--type-h3)}
h4{font:var(--type-h4)}
h5{font:var(--type-h5)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--alpha-volt-line);transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover);border-bottom-color:currentColor}
code,kbd,samp{font-family:var(--font-mono);font-size:.925em}
hr{border:0;border-top:var(--border-hairline);margin:var(--space-7) 0}
::selection{background:var(--leaf-300);color:var(--moss-900)}
:focus-visible{outline:none;box-shadow:var(--glow-focus)}
.cb-label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.cb-grid-bg{background-image:var(--grid-pattern);background-size:var(--grid-cell) var(--grid-cell)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}