/* ============================================================
   Clarence — Design Tokens, v0.1
   Drafting-ink brand. Color carries meaning, not chrome.
   Light + dark are the same system retuned for surface.
   ============================================================ */

:root {
  /* ---------- PAPER (surface, light mode) ---------- */
  --paper-50:  #FBFAF6;   /* canvas — workshop paper, slightly warm */
  --paper-100: #F4F2EB;   /* card / panel */
  --paper-200: #E9E6DC;   /* divider, inset */
  --paper-300: #D7D3C5;   /* border, hairline accent */
  --paper-400: #B8B4A6;   /* disabled surface */

  /* ---------- INK (text + chrome, light mode) ---------- */
  --ink-900: #0E1318;     /* primary text */
  --ink-800: #1A2028;     /* heading, strong */
  --ink-700: #2A323D;     /* body emphatic */
  --ink-600: #3F4855;     /* body */
  --ink-500: #5A6473;     /* secondary */
  --ink-400: #7C8694;     /* tertiary, captions */
  --ink-300: #A6AEBB;     /* placeholder */
  --ink-200: #CDD2DB;     /* disabled text */
  --ink-100: #E4E7EC;     /* hairline */

  /* ---------- BRAND: drafting ink ---------- */
  /* The single Clarence color. Used for marks, primary affordances,
     active states. Manufacturer skins replace this layer. */
  --brand-900: #14283F;
  --brand-800: #1A3350;
  --brand-700: #1E3A5C;   /* canonical brand */
  --brand-600: #2A4D7A;
  --brand-500: #3B6299;
  --brand-400: #5A82B8;
  --brand-300: #8AA8CD;
  --brand-200: #B8CCE0;
  --brand-100: #DDE7F0;
  --brand-50:  #EEF3F9;

  /* ---------- SEMANTIC ----------
     These are NOT decorative. Reserve them for state. */

  /* WARNING — must-not-miss. Wrong rivet. Reversed part. */
  --warn-900: #5A1410;
  --warn-700: #8B2218;
  --warn-600: #B8362D;
  --warn-500: #D14438;
  --warn-200: #F2B8B1;
  --warn-100: #F7E0DD;
  --warn-50:  #FCEEEC;

  /* CAUTION — read carefully. Torque-critical. Unrecoverable. */
  --caution-900: #5A3A08;
  --caution-700: #8A5A0F;
  --caution-600: #B8771C;
  --caution-500: #D68F26;
  --caution-200: #F0D595;
  --caution-100: #F8EBC9;
  --caution-50:  #FCF5E2;

  /* OK — completed, verified, in tolerance */
  --ok-900: #1A3D20;
  --ok-700: #2A5C32;
  --ok-600: #3A7D44;
  --ok-500: #4F9659;
  --ok-200: #B5D4B9;
  --ok-100: #DCEBDD;
  --ok-50:  #ECF4ED;

  /* INFO — community note, plans annotation, AI suggestion */
  --info-900: #103D52;
  --info-700: #1F5C7A;
  --info-600: #297A9E;
  --info-500: #3A95BD;
  --info-200: #B0D4E2;
  --info-100: #D4E8F0;
  --info-50:  #E8F2F7;

  /* ---------- ROLE TOKENS (light) ---------- */
  --bg:               var(--paper-50);
  --bg-raised:        var(--paper-100);
  --bg-sunken:        var(--paper-200);
  --bg-disabled:      var(--paper-200);
  --border:           var(--paper-300);
  --border-strong:    var(--ink-300);
  --border-hairline:  var(--paper-300);
  --text:             var(--ink-900);
  --text-strong:      var(--ink-800);
  --text-secondary:   var(--ink-500);
  --text-tertiary:    var(--ink-400);
  --text-on-brand:    var(--paper-50);
  --text-on-warn:     #fff;
  --accent:           var(--brand-700);
  --accent-hover:     var(--brand-600);
  --accent-soft:      var(--brand-100);

  /* ---------- TYPE ---------- */
  --font-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "IBM Plex Serif", "Iowan Old Style", Georgia, serif;
  --font-mono:  "IBM Plex Mono", "SF Mono", "Roboto Mono", ui-monospace, monospace;

  /* Type scale — workshop legibility. Body bottoms out at 16px;
     primary read sizes start at 18. Step is 1.2 (minor third)
     to keep things calm at distance, not dramatic. */
  --t-12: 0.75rem;   /* 12 — only for caps eyebrows / mono labels */
  --t-14: 0.875rem;  /* 14 — captions, mono part numbers in dense rows */
  --t-16: 1rem;      /* 16 — UI body floor */
  --t-18: 1.125rem;  /* 18 — body, plans content */
  --t-20: 1.25rem;   /* 20 — bench-screen body */
  --t-24: 1.5rem;    /* 24 — section title */
  --t-30: 1.875rem;  /* 30 — page subtitle */
  --t-38: 2.375rem;  /* 38 — page title */
  --t-48: 3rem;      /* 48 — display */
  --t-64: 4rem;      /* 64 — wordmark, hero */

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.5;
  --leading-loose: 1.65;

  /* ---------- SPACING (4-base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --s-32: 128px;

  /* ---------- RADII ---------- */
  /* Restrained. Drafting feel, not consumer-app pillows. */
  --r-0: 0;
  --r-1: 2px;   /* hairline rounding on inputs */
  --r-2: 4px;   /* default panel */
  --r-3: 6px;   /* button */
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  /* Almost flat. Workshop docs don't float. */
  --shadow-1: 0 1px 0 rgba(14,19,24,0.06), 0 1px 2px rgba(14,19,24,0.04);
  --shadow-2: 0 1px 0 rgba(14,19,24,0.05), 0 4px 12px rgba(14,19,24,0.06);
  --shadow-3: 0 2px 0 rgba(14,19,24,0.05), 0 12px 28px rgba(14,19,24,0.10);

  /* Hairline focus ring — visible across both modes */
  --focus-ring: 0 0 0 2px var(--paper-50), 0 0 0 4px var(--brand-500);
}

/* ============================================================
   DARK — same hues, retuned luminance.
   Not "inverted". The brand color shifts up, semantics brighten.
   ============================================================ */

:root[data-theme="dark"] {
  --paper-50:  #0B0E12;
  --paper-100: #12161C;
  --paper-200: #1A1F26;
  --paper-300: #232932;
  --paper-400: #323A45;

  --ink-900: #EDEAE2;
  --ink-800: #DAD6CC;
  --ink-700: #BEB9AE;
  --ink-600: #A19C92;
  --ink-500: #847F76;
  --ink-400: #6A655D;
  --ink-300: #514D47;
  --ink-200: #3A3733;
  --ink-100: #26241F;

  --brand-700: #6B95C7;   /* canonical brand on dark */
  --brand-600: #82A6D2;
  --brand-500: #9BB8DD;
  --brand-100: #1F2D40;
  --brand-50:  #182230;

  --warn-600: #E6604F;
  --warn-100: #3A1612;
  --warn-50:  #2A100D;

  --caution-600: #E5A040;
  --caution-100: #3A2710;
  --caution-50:  #2A1C0A;

  --ok-600: #6FB678;
  --ok-100: #142A18;
  --ok-50:  #0E1F11;

  --info-600: #5DB4D6;
  --info-100: #102A36;
  --info-50:  #0B1F28;

  --bg:               var(--paper-50);
  --bg-raised:        var(--paper-100);
  --bg-sunken:        #07090C;
  --border:           var(--paper-300);
  --border-strong:    var(--paper-400);
  --border-hairline:  var(--paper-200);
  --text:             var(--ink-900);
  --text-strong:      #F5F2EA;
  --text-secondary:   var(--ink-700);
  --text-tertiary:    var(--ink-500);
  --text-on-brand:    var(--paper-50);
  --accent:           var(--brand-700);
  --accent-hover:     var(--brand-600);
  --accent-soft:      var(--brand-100);

  --shadow-1: 0 1px 0 rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-3: 0 2px 0 rgba(0,0,0,0.4), 0 12px 28px rgba(0,0,0,0.5);

  --focus-ring: 0 0 0 2px var(--paper-50), 0 0 0 4px var(--brand-500);
}