/* =========================================================
   MINDBURN LABS — DESIGN TOKENS
   The single source of truth. Everything else references these.
   ========================================================= */

:root {
  /* ---------- TYPE ---------- */
  --font-display: "Fraunces", "Tiempos Headline", Georgia, serif;
  --font-sans: "Inter Tight", "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Type scale — modular, built around 16px body */
  --fs-xxs: 10px;
  --fs-xs:  11px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 44px;
  --fs-5xl: 60px;
  --fs-6xl: 84px;
  --fs-7xl: 120px;

  --lh-tight: 1.02;
  --lh-snug:  1.12;
  --lh-body:  1.5;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-label: 0.14em;
  --tracking-wide:   0.24em;

  /* ---------- SPACE (4px base) ---------- */
  --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:  56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ---------- RADIUS ---------- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 10px;
  --radius-5: 14px;
  --radius-full: 999px;

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-emph:     cubic-bezier(.2, .9, .1, 1);
  --dur-fast: 120ms;
  --dur-mid:  220ms;
  --dur-slow: 420ms;

  /* ---------- SEMANTIC COLORS (theme-scoped below) ---------- */
  /* Brand-constant hues (same in light + dark, tweaked for contrast) */
  --ember-50:  #fdecea;
  --ember-100: #fbd6d0;
  --ember-200: #f5a89d;
  --ember-300: #ec7866;
  --ember-400: #dd4f38;
  --ember-500: #c63a22;   /* signal: BLOCK */
  --ember-600: #9d2a14;
  --ember-700: #6f1c0a;

  --sage-50:  #eef3ed;
  --sage-100: #d9e4d5;
  --sage-300: #8fae86;
  --sage-500: #4f7548;   /* signal: ALLOW */
  --sage-600: #3a5935;
  --sage-700: #263a23;

  --ink-blue-50:  #e9edf3;
  --ink-blue-300: #6e87ad;
  --ink-blue-500: #2e4a74;   /* signal: INFO */
  --ink-blue-600: #1f3558;

  --amber-50:  #f6ecd6;
  --amber-300: #d4a24c;
  --amber-500: #a5761c;   /* signal: REVIEW */
  --amber-600: #7a5612;
}

/* =========================================================
   LIGHT THEME — "Parchment"
   Warm off-white, graphite ink, quiet structure
   ========================================================= */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surface stack */
  --bg:          #f4efe6;   /* page — warm parchment */
  --bg-2:        #ebe5d8;   /* elevated sections */
  --surface:     #faf6ed;   /* cards */
  --surface-2:   #ffffff;   /* inputs, tooltips */
  --surface-sunk:#e4ddcc;   /* wells, code blocks */

  /* Ink */
  --ink:         #1a1814;   /* primary text */
  --ink-2:       #3d3a33;   /* secondary */
  --ink-3:       #6b665b;   /* tertiary, captions */
  --ink-4:       #968f80;   /* disabled, placeholder */
  --ink-inverse: #faf6ed;

  /* Lines */
  --line:        #d9d2c0;   /* default border */
  --line-2:      #c4bca6;   /* emphasized */
  --line-rule:   #1a1814;   /* editorial rule */
  --grid:        rgba(26, 24, 20, 0.06);
  --grid-strong: rgba(26, 24, 20, 0.12);

  /* Accents (mapped) */
  --accent:      var(--ember-500);
  --accent-fg:   #ffffff;
  --accent-soft: var(--ember-50);
  --accent-line: var(--ember-200);

  --ok:          var(--sage-500);
  --ok-soft:     var(--sage-50);
  --warn:        var(--amber-500);
  --warn-soft:   var(--amber-50);
  --info:        var(--ink-blue-500);
  --info-soft:   var(--ink-blue-50);
  --danger:      var(--ember-500);
  --danger-soft: var(--ember-50);

  /* Focus */
  --focus:       #1a1814;
  --focus-ring:  0 0 0 2px var(--bg), 0 0 0 4px #1a1814;

  /* Shadows (subtle, warm) */
  --shadow-1: 0 1px 0 rgba(26,24,20,0.04), 0 1px 2px rgba(26,24,20,0.06);
  --shadow-2: 0 1px 0 rgba(26,24,20,0.04), 0 4px 12px rgba(26,24,20,0.07);
  --shadow-3: 0 2px 0 rgba(26,24,20,0.04), 0 20px 40px -12px rgba(26,24,20,0.18);
}

/* =========================================================
   DARK THEME — "Graphite"
   Deep warm-graphite, bone ink, same signal hues
   ========================================================= */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #13120f;
  --bg-2:        #1a1814;
  --surface:     #201e19;
  --surface-2:   #272520;
  --surface-sunk:#0d0c0a;

  --ink:         #f0ead9;
  --ink-2:       #c9c2b0;
  --ink-3:       #8f897a;
  --ink-4:       #5c574c;
  --ink-inverse: #13120f;

  --line:        #332f27;
  --line-2:      #4a4539;
  --line-rule:   #f0ead9;
  --grid:        rgba(240, 234, 217, 0.05);
  --grid-strong: rgba(240, 234, 217, 0.10);

  --accent:      #e86a51;
  --accent-fg:   #13120f;
  --accent-soft: #2a1a16;
  --accent-line: #5a2d22;

  --ok:          #8fae86;
  --ok-soft:     #1c261a;
  --warn:        #d4a24c;
  --warn-soft:   #2a1f10;
  --info:        #8aa4c8;
  --info-soft:   #162036;
  --danger:      #e86a51;
  --danger-soft: #2a1a16;

  --focus:       #f0ead9;
  --focus-ring:  0 0 0 2px var(--bg), 0 0 0 4px #f0ead9;

  --shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 1px 0 rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.5);
  --shadow-3: 0 2px 0 rgba(0,0,0,0.4), 0 20px 40px -12px rgba(0,0,0,0.7);
}

/* Tweakable overrides */
[data-radius="sharp"] {
  --radius-2: 0px;
  --radius-3: 0px;
  --radius-4: 2px;
  --radius-5: 2px;
}
[data-radius="soft"] {
  --radius-2: 6px;
  --radius-3: 10px;
  --radius-4: 14px;
  --radius-5: 18px;
}
[data-density="compact"] {
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 28px;
}