/* ============================================================================
   THE BLACK RELIQUARY - DESIGN TOKENS
   Every visual token lives here. The final visual style from the design doc is
   applied by overriding these variables (a second stylesheet after tokens.css),
   NOT by editing the component rules below.
   ============================================================================ */

:root {
  /* ---- Palette ----------------------------------------------------------- */
  --c-bg:        #050608;   /* deepest background */
  --c-bg-soft:   #0a0c10;   /* raised surface */
  --c-panel:     #0d1015;   /* card / modal surface */
  --c-panel-hi:  #12151c;   /* highlighted surface */

  --c-ink:       #e6dfcf;   /* primary text - aged paper */
  --c-ink-dim:   #a39a87;   /* secondary text */
  --c-ink-faint: #5c5749;   /* tertiary / disabled */

  --c-accent:        #8a6d3b;  /* aged brass */
  --c-accent-bright: #c9a24b;  /* polished brass / hover */
  --c-accent-deep:   #4a3a1e;  /* shadowed brass */

  --c-blood:      #6b1414;   /* deep dried red */
  --c-blood-hi:   #8f2320;   /* bright blood */
  --c-smoke:      #171a20;   /* fog / smoke tone */
  --c-lamp:       #ffb347;   /* warm tungsten lamp */
  --c-lamp-soft:  #e8a13a;   /* lamp falloff */
  --c-fog:        #39414d;   /* fog body */

  --c-black:      #000000;
  --c-white:      #ffffff;

  /* ---- Typography -------------------------------------------------------- */
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body:    "Crimson Text", "Georgia", serif;
  --font-type:    "Special Elite", "Courier New", monospace;

  --fs-eyebrow:   0.72rem;
  --fs-sub:       0.95rem;
  --fs-menu:      1.05rem;
  --fs-title:     clamp(2.4rem, 8vw, 6rem);
  --fs-location:  clamp(1.6rem, 5vw, 3rem);
  --fs-modal:     1.6rem;
  --fs-hud:       0.85rem;

  --tracking-wide:  0.42em;
  --tracking-mid:   0.22em;
  --tracking-tight: 0.06em;

  --lh-body: 1.6;

  /* ---- Spacing and layout ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  --gutter: clamp(1rem, 4vw, 3rem);
  --hud-height: 3.2rem;
  --modal-width: min(34rem, calc(100vw - 2rem));

  /* ---- Borders and shadows ----------------------------------------------- */
  --border: 1px solid rgba(201, 162, 75, 0.22);
  --border-soft: 1px solid rgba(230, 223, 207, 0.10);
  --radius: 2px;

  --shadow-panel: 0 18px 50px -12px rgba(0, 0, 0, 0.85);
  --shadow-text:  0 1px 12px rgba(0, 0, 0, 0.9);

  /* ---- Timing and easing ------------------------------------------------- */
  --t-fast:    180ms;
  --t-mid:     360ms;
  --t-slow:    800ms;
  --t-glacial: 6000ms;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.55, 0, 1, 0.45);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Effects (strength knobs) ------------------------------------------ */
  --vignette-opacity: 0.85;
  --vignette-spread:  68%;
  --grain-opacity:    0.055;
  --grain-size:       3px;
  --fog-opacity:      0.16;
  --fog-blur:         60px;
  --flicker-amount:   0.06;
  --letterbox-h:      clamp(1rem, 4vh, 2.6rem);

  /* ---- Z-index scale ----------------------------------------------------- */
  --z-scene:      1;
  --z-hud:        30;
  --z-vignette:   50;
  --z-letterbox:  55;
  --z-grain:      60;
  --z-modal:      70;
  --z-subtitle:   75;
  --z-transition: 100;
}

/* Readable-font mode swaps display/type faces for heavier legibility. */
body.readable-font {
  --font-display: "Georgia", "Times New Roman", serif;
  --font-type:    "Courier New", monospace;
  --tracking-wide: 0.12em;
  --tracking-mid:  0.06em;
}