/* =================================================================
   UNIQ — Design Tokens
   Single source of truth. Every value here is mirrored by the
   themeTokens object and is live-editable from the Studio theme panel.
   Sections must theme ONLY through these variables — never literals.
   ================================================================= */

:root {
  /* ---- Brand palette (from brand_assets) ---- */
  --c-green: #22494c;        /* Deep Academic Green */
  --c-green-700: #1a3a3c;
  --c-green-900: #102528;
  --c-cream: #e8ebdd;        /* Soft Cream */
  --c-stone: #e4e2dd;        /* Archival Stone */
  --c-ink: #0b0b0b;          /* Near-black stage */
  --c-ink-soft: #14171a;
  --c-bone: #f4f2ec;         /* lifted paper */
  --c-gold: #c9b07a;         /* archival metallic accent (sparingly) */
  --c-rust: #a3503e;         /* muted terracotta — cancellation / negative states */

  /* ---- Semantic surfaces (base -> elevated -> floating) ---- */
  --bg-stage: var(--c-ink);            /* cinematic dark stage */
  --bg-paper: var(--c-bone);           /* luminous editorial surface */
  --surface-1: #ffffff;
  --surface-2: #ece9e1;
  --surface-float: #ffffff;
  --line: color-mix(in srgb, var(--c-green) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--c-green) 34%, transparent);

  /* ---- Text ---- */
  --text-on-dark: var(--c-cream);
  --text-on-dark-dim: color-mix(in srgb, var(--c-cream) 64%, transparent);
  --text-on-paper: var(--c-green-900);
  --text-on-paper-dim: color-mix(in srgb, var(--c-green-900) 62%, transparent);

  /* ---- Typography ---- */
  --font-display: 'Anton', 'Rakkas', 'Arial Narrow', sans-serif;     /* collegiate brand impact */
  --font-editorial: 'Fraunces', 'Rakkas', Georgia, serif;            /* refined luxury headings */
  --font-body: 'Aileron', 'Hanken Grotesk', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --tracking-tight: -0.03em;
  --tracking-wide: 0.18em;
  --leading-body: 1.7;

  /* Fluid type scale (clamp) */
  --fs-mega: clamp(4rem, 14vw, 16rem);
  --fs-h1: clamp(2.8rem, 7vw, 7rem);
  --fs-h2: clamp(2rem, 4.4vw, 4rem);
  --fs-h3: clamp(1.4rem, 2.2vw, 2.2rem);
  --fs-lead: clamp(1.1rem, 1.5vw, 1.5rem);
  --fs-body: clamp(1rem, 1.05vw, 1.125rem);
  --fs-small: 0.82rem;
  --fs-micro: 0.68rem;

  /* ---- Spacing (density-scalable) ---- */
  --density: 1;
  --sp-1: calc(0.5rem * var(--density));
  --sp-2: calc(1rem * var(--density));
  --sp-3: calc(1.5rem * var(--density));
  --sp-4: calc(2.5rem * var(--density));
  --sp-5: calc(4rem * var(--density));
  --sp-6: calc(6rem * var(--density));
  --sp-7: calc(9rem * var(--density));
  --section-y: clamp(5rem, 12vh, 11rem);
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1500px;

  /* ---- Radius ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* ---- Shadows (layered, color-tinted, low opacity) ---- */
  --shadow-1:
    0 1px 1px color-mix(in srgb, var(--c-green-900) 8%, transparent),
    0 4px 12px color-mix(in srgb, var(--c-green-900) 8%, transparent);
  --shadow-2:
    0 2px 4px color-mix(in srgb, var(--c-green-900) 10%, transparent),
    0 12px 30px color-mix(in srgb, var(--c-green-900) 14%, transparent);
  --shadow-float:
    0 6px 14px color-mix(in srgb, var(--c-green-900) 16%, transparent),
    0 30px 70px color-mix(in srgb, var(--c-green-900) 22%, transparent);
  --shadow-glow: 0 0 60px color-mix(in srgb, var(--c-green) 40%, transparent);

  /* ---- Motion ---- */
  --motion: 1;                              /* intensity multiplier (theme panel) */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: calc(0.18s * var(--motion));
  --dur-2: calc(0.4s * var(--motion));
  --dur-3: calc(0.7s * var(--motion));
  --dur-4: calc(1.1s * var(--motion));

  /* ---- Z layers ---- */
  --z-grain: 1;
  --z-content: 2;
  --z-header: 60;
  --z-drawer: 80;
  --z-cursor: 120;
  --z-overlay: 100;

  color-scheme: dark;
}

/* RTL / Arabic: swap display + body to Arabic-capable faces */
[dir='rtl'] {
  --font-display: 'Rakkas', 'Anton', serif;
  --font-editorial: 'Rakkas', 'Fraunces', serif;
  --font-body: 'IBM Plex Sans Arabic', 'Aileron', system-ui, sans-serif;
  --tracking-tight: 0em;
}

/* Reduced motion: neutralise intensity */
@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0.001; }
}