/* cody-tokens.css — Cody Universal Design System v1 */

@font-face{font-family:"Familjen Grotesk";
  src:url("../../fonts/familjen-grotesk/FamiljenGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight:400 700;font-style:normal;font-display:swap;}
@font-face{font-family:"Familjen Grotesk";
  src:url("../../fonts/familjen-grotesk/FamiljenGrotesk-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight:400 700;font-style:italic;font-display:swap;}

:root{
  /* Layer 1 — primitives */
  --cody-blue: #6bdcf6; --cody-slate:#3C464D; --cody-mint:#34E79C; --cody-rose:#DF748C;
  --cody-blue-strong:#0C6F92; --cody-mint-strong:#0C7C52; --cody-rose-strong:#B23A55;
  --grey-0:#FFFFFF; --grey-50:#F5F7F8; --grey-100:#E8ECEE; --grey-200:#D2D9DD;
  --grey-300:#B4BEC4; --grey-400:#8A969E; --grey-500:#647079; --grey-700:#3C464D; --grey-900:#1E2428;
  --cody-gradient:linear-gradient(135deg,#42C4EB,#34E79C);

  /* Layer 2 — semantic (light surface defaults) */
  --surface:var(--grey-0); --surface-2:var(--grey-50);
  --on-surface:var(--grey-900); --on-surface-muted:var(--grey-500);
  --border:var(--grey-200);
  --primary:var(--cody-blue); --primary-on:#08323F; --primary-text:var(--cody-blue-strong);
  --link:var(--cody-blue-strong);
  --success:var(--cody-mint); --success-text:var(--cody-mint-strong);
  --danger:var(--cody-rose); --danger-text:var(--cody-rose-strong); --danger-solid:var(--cody-rose-strong);
  --info:var(--cody-blue-strong); --focus-ring:var(--cody-blue);

  /* Typography */
  --font-sans:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"Cascadia Code",Consolas,monospace;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.25rem;
  --text-xl:1.5rem; --text-2xl:2rem; --text-3xl:2.5rem;
  --leading-tight:1.2; --leading-normal:1.5;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* Spacing / radius / elevation */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-12:48px;
  --radius-sm:4px; --radius:8px; --radius-lg:12px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(30,36,40,.08);
  --shadow-2:0 2px 8px rgba(30,36,40,.10);
  --shadow-3:0 8px 24px rgba(30,36,40,.12);

  /* Density knobs (comfortable default) */
  --control-h:44px; --control-px:14px; --row-py:12px;
}

/* Density: compact (TITAAN) */
[data-density="compact"]{ --control-h:36px; --control-px:10px; --row-py:6px; --text-base:.875rem; }

/* Dark surface scope — remap semantic tokens only */
.cody-dark{
  --surface:var(--cody-slate); --surface-2:#4A555D;
  --on-surface:#FFFFFF; --on-surface-muted:var(--grey-300);
  --border:rgba(255,255,255,.14);
  --primary:var(--cody-blue); --primary-on:#08323F; --primary-text:var(--cody-blue);
  --link:var(--cody-blue);
  --success:var(--cody-mint); --success-text:var(--cody-mint);
  --danger:var(--cody-rose); --danger-text:#F2A9B8;
  --info:var(--cody-blue);
  /* Inherit white text across the whole dark scope, not just elements that read --on-surface. */
  color:var(--on-surface);
}

/* Base */
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);
  color:var(--on-surface);background:var(--surface);}
h1,h2,h3,h4{line-height:var(--leading-tight);font-weight:var(--weight-semibold);margin:0 0 var(--space-3);}
h1{font-size:var(--text-3xl);} h2{font-size:var(--text-2xl);} h3{font-size:var(--text-xl);} h4{font-size:var(--text-lg);}
a{color:var(--link);text-decoration:none;} a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;}