/* ==========================================================================
   astryx.css  —  Hidden Temple shared design tokens + component utilities
   --------------------------------------------------------------------------
   The DISCIPLINE of Meta's Astryx design system (astryx.atmeta.com), mapped
   onto the Temple's own palette and fonts. Only the structure transfers:

     - a 4px spacing grid              (--sp-*)
     - a 14px base type scale x1.2     (--fs-*  +  role trios --t-*)
     - a semantic surface ladder       (body -> surface -> card -> popover)
       paired one-to-one with an elevation ramp (--shadow-*)
     - one motion curve                (--ease + --dur-*)

   The Temple keeps its dark palette, its Cinzel / Cormorant / IBM Plex Mono
   voices, and its SHARP, engraved corners -- so Astryx's rounded radius scale
   is deliberately flattened to 0 here; only the semantic *naming* is kept.

   Self-contained: this file re-declares the palette primitives, so any page
   that links it gets the whole token set even if its own :root differs.

   Armored like ht-button.css: component utilities use a doubled .ax class
   (.ax-panel.ax-panel) so they outrank legacy "html body .thing" element
   selectors and drop onto an old page without an !important war. Rolled out
   page by page; do not retro-fit a page that has not been redesigned yet.
   ========================================================================== */

:root {
  /* ---- palette primitives (mirror of the site's own :root) ---- */
  --bg: #0a1416;
  --bg-deeper: #050a0b;
  --ink: #d6e2e0;
  --ink-dim: #8a9896;
  --ink-faint: #4a5856;
  --teal: #6db5b0;
  --teal-bright: #8ed4cf;
  --teal-deep: #2d5654;
  --blood: #a93942;
  --bronze: #8b7344;
  --bronze-bright: #c9a968;
  --line: #1f2e30;

  /* ---- 1. spacing — 4px grid, fractional steps hyphenated ---- */
  --sp-0: 0;      --sp-0-5: 2px;  --sp-1: 4px;   --sp-1-5: 6px;
  --sp-2: 8px;    --sp-3: 12px;   --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px;   --sp-7: 28px;   --sp-8: 32px;  --sp-9: 36px;
  --sp-10: 40px;  --sp-11: 44px;  --sp-12: 48px;

  /* ---- 2. type — 14px base x 1.2 (minor third) ---- */
  --font-display: 'Cinzel', serif;              /* names, titles */
  --font-prose:   'Cormorant Garamond', serif;  /* running prose */
  --font-mono:    'IBM Plex Mono', monospace;    /* labels, data, eyebrows */

  --fs-4xs: 6px;  --fs-3xs: 7px;  --fs-2xs: 8px; --fs-xs: 10px; --fs-sm: 12px;
  --fs-base: 14px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px;
  --fs-3xl: 29px; --fs-4xl: 35px; --fs-5xl: 42px;

  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* line-height, banded by size (Astryx: <20 ->1.5, 20-31 ->1.4, >=32 ->1.25) */
  --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.5; --lh-prose: 1.6;

  /* ---- 3. surface ladder + text + border (dark, mapped to primitives) ---- */
  --surface-body:    var(--bg);
  --surface-1:       rgba(20, 35, 38, 0.42);   /* raised - a quiet lift off the page */
  --surface-2:       rgba(17, 31, 33, 0.62);   /* card   - a distinct plate */
  --surface-3:       rgba(26, 44, 42, 0.85);   /* popover- floats over everything */

  --text-primary:    var(--ink);
  --text-secondary:  var(--ink-dim);
  --text-faint:      var(--ink-faint);
  --text-accent:     var(--teal-bright);

  --border:          var(--line);
  --border-emph:     var(--teal-deep);
  --overlay-hover:   rgba(109, 181, 176, 0.05);
  --accent:          var(--teal);
  --gold:            var(--bronze-bright);

  /* ---- 4. elevation — subtle on dark; the border carries most separation ---- */
  --shadow-low:  0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-med:  0 6px 18px -6px rgba(0, 0, 0, 0.55);
  --shadow-high: 0 18px 40px -12px rgba(0, 0, 0, 0.68);

  /* ---- 5. shape — semantic names, flattened to sharp for the engraved brand ---- */
  --radius-none: 0; --radius-inner: 0; --radius-element: 0; --radius-container: 0;
  --radius-full: 9999px;   /* the one real curve: pills / avatars only */

  /* ---- 6. motion — one easing, three duration bands ---- */
  --dur-fast: 175ms; --dur-med: 410ms; --dur-slow: 975ms;
  --ease: cubic-bezier(0.24, 1, 0.4, 1);
}

/* ==========================================================================
   TYPE ROLE UTILITIES  — three voices, three jobs.
   Doubled-class armored so they win on legacy pages. Sizes stay compact.
   ========================================================================== */
.ax-eyebrow.ax-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: var(--lh-normal);
}
.ax-title.ax-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-accent);
  line-height: var(--lh-snug);
}
.ax-prose.ax-prose {
  font-family: var(--font-prose);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  line-height: var(--lh-prose);
}
.ax-label.ax-label {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: var(--lh-normal);
}
.ax-data.ax-data {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  line-height: var(--lh-normal);
}

/* ==========================================================================
   PANEL / CARD  — the standard Astryx plate: a card-rung surface inside a
   token border, sharp, with the elevation rung that matches. Hover lifts the
   border to the emphasized teal and (for links) floats one rung higher.
   ========================================================================== */
.ax-panel.ax-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-low);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.ax-panel.ax-panel:hover {
  border-color: var(--border-emph);
  background: var(--surface-3);
}
a.ax-panel.ax-panel:hover,
.ax-panel--interactive.ax-panel:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-med);
}

/* a quieter raised surface — for supporting blocks that should read as one
   rung above the page without becoming a full card */
.ax-surface.ax-surface {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-container);
}

/* ==========================================================================
   RHYTHM  — section spacing + a hairline rule on the 4px grid.
   ========================================================================== */
.ax-section.ax-section { margin-block: var(--sp-8); }
.ax-stack.ax-stack > * + * { margin-top: var(--sp-3); }
.ax-rule.ax-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--border-emph), transparent);
}