/* ============================================================
   HEARTH — Foundations
   Typography + color tokens for the Hearth suite.
   Import this at the top of every UI kit, slide, or HTML doc.
   ============================================================ */

/* ----------  Fonts  ---------- */

@font-face {
  font-family: "Glacial Indifference";
  src: url("./fonts/GlacialIndifference-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Glacial Indifference";
  src: url("./fonts/GlacialIndifference-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Glacial Indifference";
  src: url("./fonts/GlacialIndifference-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Glacial Indifference is the sole typeface used throughout Hearth — display, body, numerals, and code-style monospaced moments. Numerals lean on font-variant-numeric: tabular-nums lining-nums for ledger-grade alignment. No serif or mono companion families. */

/* ============================================================
   Color tokens
   Warm-neutral paper · ink scale · ember primary · supporting hues
   ============================================================ */

:root {
  /* — Paper / surface (cool dusk-mauve neutrals, NOT warm yellow) — */
  --paper:        #E5E0DE;   /* canvas — pale dusk, plum-grey undertone */
  --paper-deep:   #CDC6C5;   /* sunken zones, code blocks */
  --snow:         #F0ECEB;   /* cards, raised surfaces (cool chalk, never pure white) */
  --mist:         #D8D2D2;   /* hovered rows, tag bg */
  --veil:         #B6AEAE;   /* hairline borders */
  --veil-strong:  #8A8082;   /* stronger borders, dividers */

  /* — Ink scale (deep aubergine, NOT warm sepia) — */
  --ink-900: #1A141A;        /* primary text, headings — deep aubergine */
  --ink-800: #2A2230;        /* heavy text on tint */
  --ink-700: #3B333E;        /* body text */
  --ink-500: #6A626B;        /* secondary text */
  --ink-400: #8C8489;        /* tertiary, captions */
  --ink-300: #ABA3A6;        /* placeholder, disabled */
  --ink-200: #C7BFC2;        /* faint */
  --ink-100: #E5DFE0;        /* alias of veil for ink-on-paper masks */

  /* — Accents — jewel-toned siblings, all tuned to the chroma/depth of the
     ember anchor (#A62A1B brick red). The full chromatic palette sits at the
     same L ≈ 28–38 and high saturation — enamel on velvet, not pastel.
     Lighter 100/200/300 tints are available for tags, toasts, and badges. */

  /* Ember — brick red, the primary action color. Anchor of the system. */
  --ember-100: #F6DDD2;       /* tint background, toast */
  --ember-200: #ECC2B7;       /* badge bg */
  --ember-300: #DA7766;       /* light mid */
  --ember-400: #C44E3B;       /* secondary */
  --ember:     #A62A1B;       /* PRIMARY ACCENT — brick red */
  --ember-500: #A62A1B;       /* alias */
  --ember-600: #8A2516;       /* hover */
  --ember-700: #6B1C0F;       /* pressed */
  --ember-800: #4A140A;       /* deepest — text on tint, headers */

  /* Sage — deep pine. Positive money. */
  --sage-100:  #D2DCD4;
  --sage-200:  #A0B2A6;
  --sage-400:  #3A6B4A;
  --sage:      #1F4D34;       /* deep pine green */
  --sage-700:  #103420;

  /* Plum — deep aubergine. Identity, AI voice, "you". The co-star. */
  --plum-100:  #DBCFE0;
  --plum-200:  #B698C0;
  --plum-300:  #8861A0;
  --plum-400:  #6E2E80;
  --plum:      #4D1F58;       /* SECONDARY ACCENT — deep aubergine */
  --plum-700:  #2F0F40;
  --plum-800:  #1F0728;
  --plum-900:  #14041B;

  /* Indigo — deep midnight blue. Information, inline links, plots. */
  --indigo-100: #D0D6E4;
  --indigo-200: #9FA9C8;
  --indigo-400: #3A4D85;
  --indigo:     #1F3265;       /* deep midnight */
  --indigo-700: #122040;
  --indigo-800: #08132A;

  /* Teal — deep evergreen-teal. Notes, journals, time-stamped writing.
     Sibling to indigo and sage but distinctly its own hue. */
  --teal-100: #CFD9DD;
  --teal-200: #9CB1B8;
  --teal-400: #3A6F7E;
  --teal:     #1F4A5C;         /* deep teal */
  --teal-700: #102F3E;
  --teal-800: #061E2A;

  /* Amber — burnt brass / copper. Review, pending. */
  --amber-100: #ECDAC2;
  --amber-200: #CCAB85;
  --amber-400: #A55F22;
  --amber:     #804518;       /* burnt brass */
  --amber-700: #5A2E0D;

  /* Crimson — deep wine. Destructive, debt. Hue-shifted from ember
     toward purple-red so the two remain distinct. */
  --crimson-100: #E8CAD0;
  --crimson-200: #C8929E;
  --crimson-400: #8A2E45;
  --crimson:     #6B1828;       /* deep wine */
  --crimson-700: #4A0F1B;
  --crimson-800: #2F0810;

  /* — Semantic — */
  --bg:            var(--paper);
  --bg-sunken:    var(--paper-deep);
  --bg-elevated:  var(--snow);
  --bg-hover:     var(--mist);

  --fg:            var(--ink-900);
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--ink-400);
  --fg-faint:     var(--ink-300);
  --fg-on-accent: var(--paper);

  --border:        var(--veil);
  --border-strong: var(--veil-strong);

  --accent:        var(--ember);
  --accent-hover:  var(--ember-600);
  --accent-press:  var(--ember-700);
  --accent-tint:   var(--ember-100);

  --positive:      var(--sage);
  --warning:       var(--amber);
  --critical:      var(--crimson);
  --identity:      var(--plum);
  --info:          var(--indigo);

  /* — Focus ring — */
  --ring: 0 0 0 3px color-mix(in oklab, var(--ember) 38%, transparent);

  /* ============================================================
     Typography
     ============================================================ */
  --font-sans: "Glacial Indifference", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: "Glacial Indifference", ui-sans-serif, system-ui, sans-serif;   /* alias — numerals & ledes still pull from Glacial */
  --font-mono: "Glacial Indifference", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (1.200 minor third, anchored at 16px)
     Glacial Indifference is the sole typeface. --font-serif and --font-mono
     are kept as aliases so existing component code doesn't break, but they
     all resolve to Glacial. Numerals use font-variant-numeric: tabular-nums
     lining-nums to align money, dates, and metrics. */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  46px;
  --text-5xl:  60px;
  --text-6xl:  80px;

  /* Line heights tuned for Glacial Indifference */
  --leading-tight: 1.12;
  --leading-snug:  1.28;
  --leading-body:  1.55;
  --leading-loose: 1.75;

  --tracking-tight: -0.018em;
  --tracking-snug:  -0.008em;
  --tracking-base:   0em;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.16em;

  /* ============================================================
     Spacing / radius / shadow / motion
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Shadows — warm, low-spread. Like late-afternoon light, not Material.  */
  --shadow-xs: 0 1px 0 rgba(20, 17, 12, 0.04), 0 1px 2px rgba(20, 17, 12, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 17, 12, 0.05), 0 2px 6px rgba(20, 17, 12, 0.04);
  --shadow-md: 0 2px 4px rgba(20, 17, 12, 0.06), 0 8px 20px rgba(20, 17, 12, 0.06);
  --shadow-lg: 0 4px 8px rgba(20, 17, 12, 0.06), 0 18px 40px rgba(20, 17, 12, 0.08);
  --shadow-xl: 0 8px 16px rgba(20, 17, 12, 0.08), 0 40px 80px rgba(20, 17, 12, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(20, 17, 12, 0.06);
  --shadow-ring: inset 0 0 0 1px var(--border);

  /* Motion — gentle, never bouncy by default */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:  cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);

  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-4: 360ms;
  --dur-5: 520ms;
}

/* ============================================================
   Dark mode — a deep aubergine dusk, not flat black
   ============================================================ */
[data-theme="dark"], .dark {
  --paper:       #14101A;
  --paper-deep:  #0A0710;
  --snow:        #1C1726;
  --mist:        #221C2D;
  --veil:        #2E2740;
  --veil-strong: #443B5A;

  --ink-900: #F2EBEF;
  --ink-800: #E6DDE3;
  --ink-700: #D6CBD2;
  --ink-500: #A89DA5;
  --ink-400: #847A82;
  --ink-300: #645B63;
  --ink-200: #443B43;
  --ink-100: #2A2330;

  --ember:     #C44A3B;
  --ember-600: #A53626;
  --ember-700: #821F12;
  --ember-400: #D86B58;
  --ember-300: #B85949;
  --ember-200: #4A1812;
  --ember-100: #2A0E0A;
  --ember-800: #5C140A;

  --sage:      #8EA897;
  --plum:      #B59AC4;       /* plum lifts in dark mode */
  --plum-200:  #3D2A48;
  --plum-100:  #281A30;
  --amber:     #D29969;
  --crimson:   #C66A7A;

  --shadow-xs: 0 1px 0 rgba(0,0,0,0.45);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.55);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.65);
  --shadow-xl: 0 40px 80px rgba(0,0,0,0.75);
}

/* ============================================================
   Semantic element styles
   Use these by adding the class, OR by extending in your own CSS.
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display,
h1.display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

.h1, h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

.h2, h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
  text-wrap: balance;
}

.h3, h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.h4, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-muted);
}

.lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--fg);
  text-wrap: pretty;
}

.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }

small, .small {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.caption {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--fg-subtle);
}

.numeral,
.tabular {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.01em;
}

code, kbd, samp, .mono {
  font-family: var(--font-sans);
  font-size: 0.92em;
  letter-spacing: 0.01em;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.05em 0.35em;
}

pre.code {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  letter-spacing: 0.005em;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
}

a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--ember) 50%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
a:hover { text-decoration-color: var(--ember); }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--ember-200);
  color: var(--ember-700);
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}