/* ============================================================
   EMBERS — Design Tokens
   Reference (palette) → System (semantic) → Component
   Structured for export to JSON.
   ============================================================ */

/* ---------- Global / shared ---------- */
:root {
  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Motion timing */
  --motion-fast: 160ms;
  --motion-med: 320ms;
  --motion-slow: 640ms;
  --motion-breath: 4200ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-emph: cubic-bezier(.16, 1, .3, 1);
  --ease-linear: linear;

  /* Container */
  --content-max: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
}

/* ============================================================
   FOUNDRY — editorial product brand × scientific notebook
   ============================================================ */
[data-direction="foundry"] {
  /* Reference: palette */
  --ref-paper-50: #FBF8F2;
  --ref-paper-100: #F4EFE5;
  --ref-paper-200: #E8E0D0;
  --ref-ink-950: #15140F;
  --ref-ink-900: #1F1D17;
  --ref-ink-800: #2C2A22;
  --ref-ink-700: #403D32;
  --ref-ink-500: #6B6755;
  --ref-ink-300: #A8A492;
  --ref-ink-100: #D6D2C2;

  --ref-primary-700: #6B2E15;     /* iron-oxide red, restrained */
  --ref-primary-500: #A24521;
  --ref-primary-300: #D17A4D;
  --ref-primary-100: #F1D8C5;

  --ref-secondary-700: #2A4138;   /* botanical, almost black-green */
  --ref-secondary-500: #4A6A5C;
  --ref-secondary-300: #8FA89A;

  --ref-tertiary-500: #B8932E;    /* aged brass */
  --ref-tertiary-300: #DCBE6C;

  /* Functional */
  --fn-success: #4A6A5C;
  --fn-warning: #B8932E;
  --fn-error: #8B2A1B;
  --fn-info: #3D5263;

  /* System */
  --bg: var(--ref-paper-50);
  --bg-raised: #FFFDF7;
  --bg-sunken: var(--ref-paper-100);
  --rule: var(--ref-ink-100);
  --rule-strong: var(--ref-ink-300);
  --text: var(--ref-ink-900);
  --text-muted: var(--ref-ink-500);
  --text-faint: var(--ref-ink-300);
  --accent: var(--ref-primary-700);
  --accent-soft: var(--ref-primary-100);

  /* Type */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-text: "Inter Tight", "Source Sans 3", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Component */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --shadow-1: 0 1px 0 rgba(31, 29, 23, .04);
  --shadow-2: 0 1px 2px rgba(31, 29, 23, .06), 0 8px 24px -16px rgba(31, 29, 23, .12);
}

[data-direction="foundry"][data-mode="dark"] {
  --bg: #14130E;
  --bg-raised: #1B1A14;
  --bg-sunken: #0E0D09;
  --rule: #2A2820;
  --rule-strong: #423F33;
  --text: #F1ECDD;
  --text-muted: #A8A492;
  --text-faint: #6B6755;
  --accent: #E08A5A;
  --accent-soft: #4A2818;
}

/* ============================================================
   KINDLING — warm tactile, ember presence (TEAL/BURNT-ORANGE ANCHOR)
   ============================================================ */
[data-direction="kindling"] {
  /* Reference: palette — the floor/ceiling rendered as color */
  --ref-teal-950: #0A1F22;
  --ref-teal-900: #0F2D32;
  --ref-teal-800: #143E45;
  --ref-teal-700: #1A535C;     /* floor — AI as substrate */
  --ref-teal-500: #2E8A95;
  --ref-teal-400: #4FB3BD;
  --ref-teal-300: #8FD1D6;
  --ref-teal-100: #CDE9EB;
  --ref-teal-50:  #EAF5F5;

  --ref-ember-900: #4A1A05;
  --ref-ember-800: #6B260A;
  --ref-ember-700: #92350F;     /* the breakthrough */
  --ref-ember-500: #D6541A;     /* ceiling-break */
  --ref-ember-400: #ED7A3D;
  --ref-ember-300: #F4A06A;
  --ref-ember-100: #FAD9C0;
  --ref-ember-50:  #FCEBDB;

  /* Neutral ramp 0–950 (warm-leaning) */
  --ref-n-0:   #FFFFFF;
  --ref-n-50:  #FAF6F1;
  --ref-n-100: #F2EBE0;
  --ref-n-200: #E5DCCC;
  --ref-n-300: #C9BDA8;
  --ref-n-400: #A99B85;
  --ref-n-500: #837663;
  --ref-n-600: #5E5446;
  --ref-n-700: #423B30;
  --ref-n-800: #2A2620;
  --ref-n-900: #181612;
  --ref-n-950: #0E0C09;

  /* Functional */
  --fn-success: #4F8A5C;
  --fn-warning: #D6951A;
  --fn-error:   #B8341A;
  --fn-info:    #2E8A95;

  /* System */
  --bg: var(--ref-n-50);
  --bg-raised: #FFFCF6;
  --bg-sunken: var(--ref-n-100);
  --rule: var(--ref-n-200);
  --rule-strong: var(--ref-n-300);
  --text: var(--ref-n-900);
  --text-muted: var(--ref-n-600);
  --text-faint: var(--ref-n-400);
  --accent: var(--ref-ember-500);
  --accent-warm: var(--ref-ember-700);
  --accent-cool: var(--ref-teal-700);
  --accent-soft: var(--ref-ember-100);
  --cool-soft: var(--ref-teal-100);

  /* Type */
  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-text: "Instrument Sans", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Component */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-1: 0 1px 0 rgba(74, 26, 5, .05);
  --shadow-2: 0 8px 24px -12px rgba(74, 26, 5, .18), 0 2px 6px -2px rgba(74, 26, 5, .08);
  --glow-ember: 0 0 0 1px rgba(214, 84, 26, .15), 0 8px 32px -8px rgba(214, 84, 26, .35);
}

[data-direction="kindling"][data-mode="dark"] {
  --bg: #0A1F22;
  --bg-raised: #0F2D32;
  --bg-sunken: #061518;
  --rule: #143E45;
  --rule-strong: #1A535C;
  --text: #FAF6F1;
  --text-muted: #8FD1D6;
  --text-faint: #4FB3BD;
  --accent: #ED7A3D;
  --accent-warm: #F4A06A;
  --accent-cool: #4FB3BD;
  --accent-soft: #4A1A05;
  --cool-soft: #143E45;
}

/* ============================================================
   ATLAS — calm advanced product system, mono-forward
   ============================================================ */
[data-direction="atlas"] {
  /* Reference: near-monochrome with single signal hue */
  --ref-n-0:   #FFFFFF;
  --ref-n-50:  #F7F8F9;
  --ref-n-100: #EEF0F2;
  --ref-n-200: #DDE1E6;
  --ref-n-300: #BFC5CC;
  --ref-n-400: #8E96A1;
  --ref-n-500: #5C6573;
  --ref-n-600: #404754;
  --ref-n-700: #2A303B;
  --ref-n-800: #1B1F27;
  --ref-n-900: #0E1117;
  --ref-n-950: #06080C;

  /* Single signal hue — restrained electric blue, almost graphite */
  --ref-primary-700: #1F3A8A;
  --ref-primary-500: #3656C9;
  --ref-primary-400: #5E7BE8;
  --ref-primary-300: #95A8F0;
  --ref-primary-100: #DDE3FB;

  /* Tertiary used only for state — not decoration */
  --ref-tertiary-500: #C4612E;   /* used sparingly for "human" markers */

  /* Functional */
  --fn-success: #2E7D5B;
  --fn-warning: #C4612E;
  --fn-error:   #A8341E;
  --fn-info:    #3656C9;

  /* System */
  --bg: var(--ref-n-50);
  --bg-raised: var(--ref-n-0);
  --bg-sunken: var(--ref-n-100);
  --rule: var(--ref-n-200);
  --rule-strong: var(--ref-n-300);
  --text: var(--ref-n-900);
  --text-muted: var(--ref-n-500);
  --text-faint: var(--ref-n-400);
  --accent: var(--ref-primary-500);
  --accent-soft: var(--ref-primary-100);
  --human: var(--ref-tertiary-500);

  /* Type */
  --font-display: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-text: "Inter", "Söhne", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Component */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --shadow-1: 0 0 0 1px var(--ref-n-200);
  --shadow-2: 0 0 0 1px var(--ref-n-200), 0 1px 2px rgba(14, 17, 23, .04);
}

[data-direction="atlas"][data-mode="dark"] {
  --bg: #0E1117;
  --bg-raised: #1B1F27;
  --bg-sunken: #06080C;
  --rule: #2A303B;
  --rule-strong: #404754;
  --text: #F7F8F9;
  --text-muted: #8E96A1;
  --text-faint: #5C6573;
  --accent: #5E7BE8;
  --accent-soft: #1F3A8A;
  --human: #E08A5A;
}