/* =====================================================================
   KATY TOWELL — design portfolio tokens
   Adapted from the Old Mother's Altar system: same bones, same brand
   vocabulary, but the altar surface is now warm eggplant. Indigo carries
   the chrome; moss carries the ritual accent.
   ===================================================================== */

/* ---- FONTS ---------------------------------------------------------- */

/* New Kansas — body + UI workhorse (8 weights) */
@font-face { font-family: "New Kansas"; font-weight: 100; font-style: normal;
  src: url("./fonts/NewKansas-Thin.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "New Kansas"; font-weight: 300; font-style: normal;
  src: url("./fonts/NewKansas-Light.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "New Kansas"; font-weight: 400; font-style: normal;
  src: url("./fonts/NewKansas-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "New Kansas"; font-weight: 500; font-style: normal;
  src: url("./fonts/NewKansas-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "New Kansas"; font-weight: 600; font-style: normal;
  src: url("./fonts/NewKansas-SemiBold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "New Kansas"; font-weight: 700; font-style: normal;
  src: url("./fonts/NewKansas-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "New Kansas"; font-weight: 800; font-style: normal;
  src: url("./fonts/NewKansas-Black.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "New Kansas"; font-weight: 900; font-style: normal;
  src: url("./fonts/NewKansas-Heavy.otf") format("opentype"); font-display: swap; }

/* Ohno Blazeface — display, ROMAN/UPRIGHT, 9 optical sizes.
   The "Ohno Blazeface Upright" family routes to the 16pt file (a sensible
   middle-ground for headings 18–32px). For specific size choices, use the
   per-optical-size aliases ("Ohno Blazeface 24" etc) — they now point at
   the matching roman file, not the italic. */
@font-face {
  font-family: "Ohno Blazeface Upright";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/OhnoBlazeface-16Point.otf") format("opentype");
  font-display: swap;
}

/* Per-optical-size aliases — roman */
@font-face { font-family: "Ohno Blazeface 12"; font-style: normal; font-weight: 400;
  src: url("./fonts/OhnoBlazeface-12Point.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Ohno Blazeface 14"; font-style: normal; font-weight: 400;
  src: url("./fonts/OhnoBlazeface-14Point.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Ohno Blazeface 16"; font-style: normal; font-weight: 400;
  src: url("./fonts/OhnoBlazeface-16Point.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Ohno Blazeface 18"; font-style: normal; font-weight: 400;
  src: url("./fonts/OhnoBlazeface-18Point.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Ohno Blazeface 24"; font-style: normal; font-weight: 400;
  src: url("./fonts/OhnoBlazeface-24Point.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Ohno Blazeface 36"; font-style: normal; font-weight: 400;
  src: url("./fonts/OhnoBlazeface-36Point.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Ohno Blazeface 48"; font-style: normal; font-weight: 400;
  src: url("./fonts/OhnoBlazeface-48Point.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Ohno Blazeface 60"; font-style: normal; font-weight: 400;
  src: url("./fonts/OhnoBlazeface-60Point.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Ohno Blazeface 72"; font-style: normal; font-weight: 400;
  src: url("./fonts/OhnoBlazeface-72Point.otf") format("opentype"); font-display: swap; }

/* Italic family — kept registered for the rare emphasis use, NOT the default.
   Uses the corresponding italic optical-size files. */
@font-face { font-family: "Ohno Blazeface Italic"; font-style: italic; font-weight: 400;
  src: url("./fonts/OhnoBlazeface-16PointItalic.otf") format("opentype"); font-display: swap; }

:root {
  /* =================================================================
     COLOR — base palette
     ================================================================= */

  /* Ink — the altar cloth. EGGPLANT family: a warm purple-black, deep
     enough to read as a ritual surface but with the violet undertone of
     a stained-glass dusk. Three depth swatches the Tweaks panel can swap
     between (deep / mid / warm). */
  --ink-0:        #000000;
  --ink-50:       #170820;       /* deeper-than-page shadow */
  --ink-100:      #2A1530;       /* page bg — eggplant default */
  --ink-200:      #3B2244;       /* card surface — warm eggplant */
  --ink-300:      #4D2F58;       /* elevated / hover */
  --ink-400:      #67456F;       /* line break / divider tone */

  /* Eggplant depth swatches (Tweaks panel cycles these into --ink-100/200) */
  --eggplant-deep: #1A0A1F;
  --eggplant-mid:  #2A1530;
  --eggplant-warm: #3B2244;

  /* Slate — bone & taupe smoke. Slightly cooled toward neutral so it
     reads cleanly on the violet ink instead of going muddy. */
  --slate-100:    #FFFFFF;
  --slate-200:    #ECE3D4;  /* high-contrast text on ink — warm bone */
  --slate-300:    #BFAE92;  /* secondary text, icons */
  --slate-400:    #A4926F;
  --slate-500:    #7D6E55;  /* eyebrow / tertiary */
  --slate-600:    #564A36;
  --slate-700:    #3A3024;

  /* Indigo — the sigil, the sealed envelope, the action */
  --indigo-300:   #4F71C7;
  --indigo-500:   #2D4EA6;  /* primary button */
  --indigo-700:   #1F3878;
  --indigo-900:   #0F1C40;

  /* Crimson — the wound, the warning, the bound spell */
  --crimson-300:  #E84A6B;
  --crimson-500:  #D41840;
  --crimson-700:  #8C0E2A;

  /* Aquarian Tarot warm accents — lifted from Palladini 1970.
     Used sparingly for ritual tags, candle states, sigil highlights. */
  --ember:        #F35321;  /* fire, completed spell */
  --vermillion:   #C34530;  /* deeper ember */
  --saffron:      #F59823;  /* a struck match */
  --amber:        #F4AF59;  /* warm parchment glow */
  --gold:         #FFCE00;  /* offering */
  --moss:         #96A560;  /* herb, growth */
  --olive:        #976F34;  /* root, oil */
  --bone:         #FDFEEB;  /* parchment, salt circle */
  --plum:         #764883;  /* twilight */

  /* Semantic feedback */
  --success:      #00C28A;
  --warning:      #F4AF59;
  --danger:       #D41840;
  --info:         #00BCC2;

  /* =================================================================
     SEMANTIC — what the design system reaches for
     ================================================================= */

  /* surfaces */
  --bg-page:        var(--ink-100);
  --bg-surface:     var(--ink-200);
  --bg-elevated:    var(--ink-300);
  --bg-overlay:     rgba(23, 8, 32, 0.78);
  --bg-vellum:      var(--bone);       /* light-mode parchment, journal pages */

  /* foreground */
  --fg-1:           var(--slate-200);  /* primary text */
  --fg-2:           var(--slate-300);  /* secondary text */
  --fg-3:           var(--slate-500);  /* eyebrow / labels */
  --fg-invert:      var(--ink-100);    /* text on light surfaces */
  --fg-accent:      var(--moss);
  --fg-link:        var(--bone);

  /* lines — slate-3 family, tuned to read on eggplant */
  --line-soft:      rgba(191, 174, 146, 0.12);
  --line-medium:    rgba(191, 174, 146, 0.24);
  --line-strong:    rgba(191, 174, 146, 0.46);
  --line-vellum:    rgba(26, 10, 31, 0.18);

  /* actions */
  --action-primary-bg:     var(--indigo-500);
  --action-primary-fg:     var(--bone);
  --action-primary-hover:  #3760BD;
  --action-primary-press:  var(--indigo-700);
  --action-secondary-bg:   rgba(191, 174, 146, 0.08);
  --action-secondary-fg:   var(--slate-200);
  --action-secondary-hover: rgba(191, 174, 146, 0.16);
  --action-ghost-fg:       var(--slate-200);
  --btn-secondary-bg:      rgba(253,254,235,0.06);
  --btn-secondary-bg-hover: rgba(253,254,235,0.12);
  --btn-secondary-fg:      var(--bone);
  --btn-secondary-border:  rgba(253,254,235,0.28);
  --action-danger-bg:      var(--crimson-500);
  --action-danger-fg:      var(--bone);

  /* Moss is the everyday "active / selected" tint on eggplant — it reads
     naturally without competing with indigo (which carries primary action).
     Ember / saffron / plum remain reserved for true ritual states. */
  --chrome-active-bg:      rgba(150, 165, 96, 0.16);
  --chrome-active-fg:      var(--moss);
  --chrome-active-line:    var(--moss);

  /* =================================================================
     TYPE — families, weights, scale
     ================================================================= */

  /* Display — Ohno Blazeface, roman/upright. Resolves to the 16pt optical
     file. For larger sizes use the optical-size aliases via .oma-h1/h2
     classes (each maps to the right optical file). */
  --font-display: "Ohno Blazeface Upright", "New Kansas",
                  ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "New Kansas", ui-serif, Georgia, "Times New Roman", serif;
  --font-eyebrow: "New Kansas", ui-serif, Georgia, serif;  /* tracked, uppercase */
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* type scale — body-driven (1.250 minor third) */
  --t-2xs:  11px;
  --t-xs:   12px;
  --t-sm:   14px;
  --t-md:   16px;
  --t-lg:   18px;
  --t-xl:   22px;
  --t-2xl:  28px;
  --t-3xl:  36px;
  --t-4xl:  48px;
  --t-5xl:  64px;
  --t-6xl:  84px;

  /* line heights */
  --lh-tight:    1.05;
  --lh-display:  1.0;
  --lh-snug:     1.20;
  --lh-body:     1.55;
  --lh-loose:    1.70;

  /* tracking */
  --tk-eyebrow:  0.18em;
  --tk-button:   0.04em;
  --tk-tight:    -0.01em;

  /* =================================================================
     SHAPE — radii, shadow, spacing
     ================================================================= */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  10px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 0 0 1px var(--line-soft);
  --shadow-2: 0 4px 18px rgba(0,0,0,0.40), 0 0 0 1px var(--line-soft);
  --shadow-3: 0 18px 60px rgba(0,0,0,0.55), 0 0 0 1px var(--line-medium);
  --glow-indigo: 0 0 0 1px rgba(45,78,166,0.45), 0 0 24px rgba(45,78,166,0.30);
  --glow-ember:  0 0 0 1px rgba(243,83,33,0.30), 0 0 22px rgba(243,83,33,0.25);

  /* spacing — 4px grid */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;

  /* motion */
  --ease-out:    cubic-bezier(0.20, 0.80, 0.20, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-candle: cubic-bezier(0.40, 0.00, 0.20, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* candle flame — gradient stops switch by mode so the flame reads on
     both ink (default) and parchment (light). See [data-theme="light"]. */
  --flame-1: #FFE082;
  --flame-2: var(--saffron);
  --flame-3: var(--ember);
  --flame-4: rgba(243, 83, 33, 0);
  /* candle wax — light bone on ink, deeper waxy beige on parchment */
  --wax-1: var(--bone);
  --wax-2: #E8DDC1;
  --wax-outline: rgba(0,0,0,0.35);
}

/* =====================================================================
   LIGHT MODE — parchment surface, ink text, indigo accent
   Apply by setting `data-theme="light"` on <html> or any container.
   The same brand vocabulary (ember/saffron/moss/indigo/crimson) is
   preserved; only surfaces, text and lines flip.
   ===================================================================== */
[data-theme="light"] {
  /* surfaces */
  --bg-page:      var(--bone);              /* #FDFEEB parchment */
  --bg-surface:   #FFFFFF;                  /* a brighter page-within-page */
  --bg-elevated:  #F6F4E4;                  /* softly warmed elevated */
  --bg-overlay:   rgba(253, 254, 235, 0.78);
  --bg-vellum:    var(--bone);              /* same surface */

  /* foreground */
  --fg-1:         var(--ink-100);           /* primary ink */
  --fg-2:         var(--slate-700);         /* secondary */
  --fg-3:         var(--slate-500);         /* eyebrow / labels */
  --fg-invert:    var(--bone);
  --fg-accent:    var(--vermillion);        /* warmer than indigo on parchment */
  --fg-link:      var(--fg-1);

  /* lines */
  --line-soft:    rgba(20, 17, 13, 0.08);
  --line-medium:  rgba(20, 17, 13, 0.16);
  --line-strong:  rgba(20, 17, 13, 0.34);

  /* actions */
  --action-primary-bg:     var(--indigo-500);
  --action-primary-fg:     var(--bone);
  --action-primary-hover:  var(--indigo-700);
  --action-primary-press:  #142A60;
  --action-secondary-bg:   rgba(20, 17, 13, 0.05);
  --action-secondary-fg:   var(--ink-100);
  --action-secondary-hover: rgba(20, 17, 13, 0.10);
  --action-ghost-fg:       var(--ink-100);
  --btn-secondary-bg:      transparent;
  --btn-secondary-bg-hover: rgba(31,56,120,0.08);
  --btn-secondary-fg:      var(--indigo-700);
  --btn-secondary-border:  rgba(31,56,120,0.45);

  /* chrome accent on parchment — deeper olive-moss for legibility on bone */
  --chrome-active-bg:      rgba(120, 138, 70, 0.18);
  --chrome-active-fg:      #4F5E2C;
  --chrome-active-line:    #4F5E2C;

  /* elevation — light mode uses soft drop-shadows, no glow at rest */
  --shadow-1: 0 1px 2px rgba(20,20,18,0.06), 0 0 0 1px var(--line-soft);
  --shadow-2: 0 4px 14px rgba(20,20,18,0.10), 0 0 0 1px var(--line-soft);
  --shadow-3: 0 18px 50px rgba(20,20,18,0.18), 0 0 0 1px var(--line-medium);
  --glow-indigo: 0 0 0 2px rgba(45,78,166,0.30);
  --glow-ember:  0 0 0 1px rgba(243,83,33,0.45), 0 0 16px rgba(243,83,33,0.18);

  /* candle flame — deeper, more saturated so it reads on parchment */
  --flame-1: var(--saffron);
  --flame-2: var(--ember);
  --flame-3: var(--vermillion);
  --flame-4: rgba(195, 69, 48, 0);

  /* candle wax — beeswax beige with vermillion outline on parchment */
  --wax-1: #E8C892;
  --wax-2: #B8884A;
  --wax-outline: rgba(120, 60, 20, 0.45);
}

/* =====================================================================
   SEMANTIC TEXT ELEMENTS — drop-in classes
   ===================================================================== */

.oma-display {
  font-family: "Ohno Blazeface 72", var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-5xl);
  line-height: var(--lh-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.oma-h1 {
  font-family: "Ohno Blazeface 48", var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-4xl);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.oma-h2 {
  font-family: "Ohno Blazeface 36", var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-3xl);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.oma-h3 {
  font-family: "Ohno Blazeface 24", var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.oma-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.oma-p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}
.oma-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}
.oma-eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: 600;
  font-size: var(--t-2xs);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.oma-button-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: var(--tk-button);
  line-height: 1;
}
.oma-mono {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0;
  color: var(--fg-2);
}
.oma-rune {
  /* For roman-numeral chapter marks etc. — display, big & airy */
  font-family: "Ohno Blazeface 72", var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-6xl);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}