/* ==========================================================================
   ENDLESS BELOW — design tokens
   Single source of truth for colour, type, spacing, motion and pixel scaling.
   Change values here rather than in component files.
   ========================================================================== */

:root {
  /* ---- Typography -------------------------------------------------------
     Two roles only: display (ancient / inscriptional) and body (readable).
     A third mono role is used for versions, dimensions and UI metadata.
     Swap the font stacks here to re-skin the whole site.                   */
  --font-display: "Hollow Crown", "Georgia", "Times New Roman", serif;
  --font-ui: "Hollow Crown", "Georgia", "Times New Roman", serif;
  --font-body: "Spectral", "Georgia", "Iowan Old Style", "Palatino", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

  /* Fluid type scale — min at 390px, max at 1920px */
  --fs-display-1: clamp(2.75rem, 1.6rem + 5.6vw, 7.5rem);
  --fs-display-2: clamp(2rem, 1.3rem + 2.9vw, 4rem);
  --fs-h1: clamp(1.9rem, 1.35rem + 2.2vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
  --fs-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --fs-small: 0.9375rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.72;

  --ls-display: 0.06em;
  --ls-wide: 0.22em;
  --ls-label: 0.16em;

  /* ---- Colour ------------------------------------------------------------
     Deep blacks and charcoal, desaturated parchment, restrained magic.     */
  --void: #050506;
  --ink-900: #0a0b0d;
  --ink-800: #101216;
  --ink-700: #16191f;
  --ink-600: #1d2128;
  --stone-500: #2a2e36;
  --stone-400: #3a3f49;
  --stone-300: #4d535e;

  --parchment-100: #f2ead8;
  --parchment-200: #e6dcc6;
  --parchment-300: #cdc0a4;
  --parchment-500: #9a8f78;
  --parchment-700: #6d6554;

  --violet: #6f5fb8;
  --violet-dim: #4a3f80;
  --cyan: #6fb3c0;
  --cyan-dim: #40707c;
  --abyss-blue: #4f6f9f;
  --ember: #b4703a;
  --blood: #9d4a3a;

  /* Semantic */
  --bg: var(--void);
  --bg-raised: var(--ink-800);
  --bg-sunken: #030304;
  --text: var(--parchment-200);
  --text-muted: var(--parchment-500);
  --text-dim: var(--parchment-700);
  --heading: var(--parchment-100);
  --rule: rgba(205, 192, 164, 0.14);
  --rule-strong: rgba(205, 192, 164, 0.28);
  --accent: var(--cyan);
  --accent-2: var(--violet);
  --focus: #9fd8e2;

  /* Surfaces built from translucency so background layers show through */
  --panel: rgba(16, 18, 22, 0.72);
  --panel-solid: #0e1014;
  --panel-hover: rgba(29, 33, 40, 0.82);

  /* ---- Spacing ----------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-y: clamp(4rem, 7vw, 8.5rem);
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* ---- Measure / layout -------------------------------------------------- */
  --width-max: 1440px;
  --width-wide: 1760px;
  --width-text: 68ch;
  --header-h: 72px;

  /* ---- Pixel UI (Aseprite 24×24 templates, 8×8 slice grid) -------------- */
  --ui-slice: 8px;
  --ui-scale: 2;
  --ui-unit: calc(var(--ui-slice) * var(--ui-scale)); /* 16px at default 2× */
  --ui-tab-scale: 4; /* 3-slice tabs must stay exactly 8×scale tall */
  --ui-tab-unit: calc(var(--ui-slice) * var(--ui-tab-scale)); /* 32px */
  --ui-icon-scale: 2;
  --ui-icon-size: calc(24px * var(--ui-icon-scale)); /* full 24×24 sprite */
  --ui-ink: #2c281f;
  --ui-ink-muted: #5c5344;
  --ui-gold: #b59f29;
  --ui-gold-bright: #e6d78d;

  --ui-img-border: url("../assets/ui/borders%209-sl.png");
  --ui-img-btn: url("../assets/ui/button_normal%209-sl.png");
  --ui-img-btn-hover: url("../assets/ui/button_hover%209-sl.png");
  --ui-img-btn-pressed: url("../assets/ui/button_pressed%209-sl.png");
  --ui-img-tab: url("../assets/ui/tab_normal%203-sl.png");
  --ui-img-tab-active: url("../assets/ui/tab_active%203-sl.png");
  --ui-img-divider: url("../assets/ui/divider%203-sl.png");
  --ui-img-pointer: url("../assets/ui/pointer%203-sl.png");
  --ui-img-arrow-left: url("../assets/ui/arrow_left.png");
  --ui-img-arrow-right: url("../assets/ui/arrow_right.png");
  --ui-img-close: url("../assets/ui/close.png");

  /* ---- Borders & shadows ------------------------------------------------- */
  --radius-sm: 0;
  --radius: 0;
  --radius-pill: 0;
  --border: 1px solid var(--rule);
  --border-strong: 1px solid var(--rule-strong);

  --shadow-low: 0 1px 0 rgba(0, 0, 0, 0.6), 0 8px 24px -16px rgba(0, 0, 0, 0.9);
  --shadow-high: 0 24px 60px -30px rgba(0, 0, 0, 0.95), 0 2px 0 rgba(0, 0, 0, 0.5);
  --glow-cyan: 0 0 24px -6px rgba(111, 179, 192, 0.45);
  --glow-violet: 0 0 28px -6px rgba(111, 95, 184, 0.45);

  /* ---- Motion ------------------------------------------------------------ */
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 700ms;
  --dur-atmos: 14s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Pixel art display sizes -------------------------------------------
     Source sprites are 16x16. Display sizes stay integer multiples so edges
     remain perfectly crisp: 96 = 6x, 128 = 8x, 160 = 10x, 192 = 12x.        */
  --px-sprite-source: 16px;
  --px-size-sm: 64px;   /*  4x */
  --px-size-md: 96px;   /*  6x */
  --px-size-lg: 128px;  /*  8x */
  --px-size-xl: 160px;  /* 10x */
  --px-size-2xl: 192px; /* 12x */

  /* ---- Z-index ----------------------------------------------------------- */
  --z-atmos: 0;
  --z-content: 1;
  --z-header: 50;
  --z-menu: 60;
  --z-overlay: 100;
}

/* Texture + ornament reused by several components, declared once. */
:root {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --sigil-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23cdc0a4' stroke-opacity='0.11'%3E%3Ccircle cx='16' cy='16' r='13.5'/%3E%3Ccircle cx='16' cy='16' r='9.5' stroke-dasharray='2 3'/%3E%3Cpath d='M10.5 10.5 16 14l5.5-3.5M10.5 15.5 16 19l5.5-3.5M10.5 20.5 16 24l5.5-3.5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --hatch: repeating-linear-gradient(
    45deg,
    rgba(205, 192, 164, 0.05) 0 1px,
    transparent 1px 7px
  );
}