/* ============================================================
   DESIGN TOKENS — AL DAYANI LAW FIRM
   One source of truth. Nothing below this file hardcodes a
   colour, a duration or an easing curve.
   ============================================================ */

:root {
  /* The crest as a mask image. A custom property so an embedding host can
     point it at its own asset URL (app.js, assetBase). */
  --ad-crest: url(../assets/crest.png);

  /* ---------- SURFACE / ARCHIVE ---------- */
  --archive-void: #050507;
  --archive-900: #08090c;
  --archive-800: #0b0d11;
  --archive-700: #101318;
  --archive-600: #161a21;
  --archive-500: #1d222b;
  --archive-400: #272d38;
  --archive-300: #353d4a;

  /* ---------- LEATHER (the book) ---------- */
  --leather-deep: #090b0e;
  --leather-base: #101319;
  --leather-mid: #181c23;
  --leather-high: #2b3039;
  --leather-lit: #474d5a;    /* the hinge bevel, where light lands */
  --leather-edge: #06070a;

  /* ---------- ENDPAPER (the board's inner face) ----------
     Was a warm brown. Against midnight calf it read as a third,
     unowned material, and because only its top square is visible
     around an open spread it showed up as a stray brown bar beside
     the navy back board — two mismatched strips instead of one
     object. Marbled ink with a bronze comb belongs to the palette
     and lets both boards read as the same frame. */
  --endpaper-deep: #0d1118;
  --endpaper-base: #151b25;
  --endpaper-high: #212b39;
  --endpaper-comb: #6d5a3a;

  /* ---------- PAPER ---------- */
  --paper-100: #f3ede1;
  --paper-200: #e9e1d2;
  --paper-300: #ddd3c1;
  --paper-400: #c9bda7;
  --paper-500: #a99b83;
  --paper-edge: #b9ab92;

  /* ---------- GOLD FOIL ---------- */
  --foil-dark: #5a4620;      /* foil at rest — almost unlit */
  --foil-base: #6a5326;
  --foil-lit: #c9a961;
  --foil-hot: #f6ecc9;
  --foil-peak: #fffaf0;      /* the specular crest only */

  --gold-100: #f4e3b6;
  --gold-200: #e5cd8e;
  --gold-300: #cfae63;
  --gold-400: #b08f44;
  --gold-500: #85682c;
  --gold-600: #55411a;

  /* ---------- INK (type on paper) ---------- */
  --ink-900: #14100c;
  --ink-800: #241d16;
  --ink-700: #3b3129;
  --ink-600: #57493d;
  --ink-500: #766555;
  --ink-400: #776756;    /* raised to clear AA 4.5:1 on paper */

  /* ---------- LIGHT (type on dark) ---------- */
  --lume-100: #f6f2ea;
  --lume-200: #ded7cb;
  --lume-300: #b6ac9c;
  --lume-400: #8b8175;
  --lume-500: #827a6f;   /* raised to clear AA 4.5:1 on the void ground */
  --lume-600: #403c37;

  /* ============================================================
     SEMANTIC LAYER
     ------------------------------------------------------------
     Everything above this line is a raw ramp. Everything below the
     line is what the rest of the site is allowed to reference.

     Nothing outside this file should use a primitive directly — if a
     rule reads `var(--lume-300)`, that is a bug. Naming a colour for
     the job it does rather than the value it holds is what lets the
     Figma file be a source of truth rather than a picture of one.

     Mirrors the "Semantic" collection in the Figma library.
     ============================================================ */

  /* ground */
  --color-bg-void: var(--archive-void);
  --color-bg-deep: var(--archive-900);
  --color-surface-raised: var(--archive-800);
  --color-surface-sunken: var(--archive-700);
  --color-surface-edge: var(--archive-600);

  /* paper — the printed leaf */
  --color-paper-leaf: var(--paper-100);
  --color-paper-fold: var(--paper-200);
  --color-paper-edge: var(--paper-300);
  --color-paper-deep: var(--paper-400);

  /* ink — type on paper */
  --color-ink-strong: var(--ink-900);
  --color-ink-body: var(--ink-700);
  --color-ink-muted: var(--ink-500);
  --color-ink-faint: var(--ink-400);

  /* text — type on dark */
  --color-text-primary: var(--lume-100);
  --color-text-secondary: var(--lume-200);
  --color-text-body: var(--lume-300);
  --color-text-muted: var(--lume-400);
  --color-text-faint: var(--lume-500);
  /* Retired. The sub-AA tone below faint carried information — folios,
     ordinals, the closing address — so it could not stay. Six text levels
     was one more than the system needed; this now resolves to faint and
     is kept only so existing rules do not break. */
  --color-text-ghost: var(--lume-500);

  /* accent — gold, used sparingly */
  --color-accent-bright: var(--gold-100);
  --color-accent-light: var(--gold-200);
  --color-accent-base: var(--gold-300);
  --color-accent-deep: var(--gold-400);
  --color-accent-shadow: var(--gold-500);
  --color-accent-darkest: var(--gold-600);

  /* foil — a material, not a colour. Reads dark until light crosses it. */
  --color-foil-dark: var(--foil-dark);
  --color-foil-base: var(--foil-base);
  --color-foil-lit: var(--foil-lit);
  --color-foil-hot: var(--foil-hot);
  --color-foil-peak: var(--foil-peak);

  /* The ramp itself is a token, because two different things are made of
     this material: foiled type (clipped to glyphs) and the stamped crest
     (clipped to a mask). They must catch the same light from the same
     angle or the cover falls apart. `--foil-pos` is written per frame by
     the book; everything else here is fixed. */
  --foil-ramp: linear-gradient(
    100deg,
    var(--color-foil-dark) 0%,
    var(--color-foil-base) 26%,
    var(--color-foil-lit) 39%,
    var(--color-foil-hot) 45%,
    var(--color-foil-peak) 48%,
    var(--color-foil-hot) 51%,
    var(--color-foil-lit) 58%,
    var(--color-foil-base) 72%,
    var(--color-foil-dark) 100%
  );
  /* the emboss: a dark bite under the stamp, a lit lip above it */
  --foil-emboss:
    drop-shadow(0 1.5px 0 rgb(0 0 0 / 0.92))
    drop-shadow(0 -1px 0 rgb(255 245 220 / 0.22));

  /* material */
  --color-endpaper-deep: var(--endpaper-deep);
  --color-endpaper-base: var(--endpaper-base);
  --color-endpaper-high: var(--endpaper-high);
  --color-endpaper-comb: var(--endpaper-comb);
  --color-leather-lit: var(--leather-lit);
  --color-leather-high: var(--leather-high);
  --color-leather-mid: var(--leather-mid);
  --color-leather-base: var(--leather-base);
  --color-leather-deep: var(--leather-deep);

  /* borders carry their own alpha */
  --color-border-faint: rgb(255 255 255 / 0.09);
  --color-border-mid: rgb(255 255 255 / 0.16);
  --color-border-accent: rgb(207 174 99 / 0.42);
  --color-border-ink: rgb(20 16 12 / 0.16);
  /* the rules printed on a leaf. Heavier than a UI hairline, because it
     is ink on paper seen at an angle and across a moving surface. */
  --color-rule-leaf: rgb(59 49 41 / 0.34);

  /* ---------- ENVIRONMENT (driven per chapter by JS) ---------- */
  --env-base: 5 5 7;
  --env-glow: 176 143 68;
  --env-cool: 30 42 60;
  --env-key-x: 50%;
  --env-key-y: 38%;
  --env-key-power: 0.5;
  --env-fog: 0.4;

  /* ---------- TYPEFACES ---------- */
  --font-display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --font-serif: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --font-meta: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- TYPE SCALE (fluid) ---------- */
  /* sized so the longest word — INTEGRITY — clears the chapter rail
     on either side at every width the rail is shown at */
  --t-monument: clamp(2.6rem, 10.4vw, 11rem);
  --t-display-1: clamp(2.6rem, 7.4vw, 7.2rem);
  --t-display-2: clamp(2rem, 4.6vw, 4.2rem);
  --t-display-3: clamp(1.5rem, 2.6vw, 2.4rem);
  --t-lede: clamp(1.02rem, 1.34vw, 1.38rem);
  --t-body: clamp(0.92rem, 1.02vw, 1.04rem);
  --t-small: clamp(0.78rem, 0.84vw, 0.86rem);
  --t-meta: 0.66rem;
  --t-micro: 0.58rem;

  --track-monument: -0.025em;
  --track-display: -0.018em;
  /* Tightened in Phase 4.8 (0.26 / 0.42): nearly every label on the page
     is small tracked capitals, and at the wider setting they read as
     decoration rather than as a quiet register under the type. */
  --track-meta: 0.2em;
  --track-meta-wide: 0.3em;

  --leading-tight: 0.92;
  --leading-display: 1.04;
  --leading-body: 1.72;

  /* ---------- SPACE ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 18px;
  --sp-5: 26px;
  --sp-6: 38px;
  --sp-7: 56px;
  --sp-8: 80px;
  --sp-9: 116px;
  --gutter: clamp(20px, 4.4vw, 76px);
  --rail-w: 196px;          /* the column the chapter rail occupies (and, Phase 5.0, the light slot beside it) */

  /* ---------- LINE / EDGE ---------- */
  --rule-hair: 1px;   /* the only rule weight in the system */
  --radius-0: 0px;
  --radius-1: 1px;
  --radius-2: 3px;

  /* ---------- BOOK GEOMETRY ---------- */
  --book-w: clamp(260px, min(42vw, 50vh), 620px);   /* one page (half spread) */
  --book-h: clamp(360px, min(58vw, 74vh), 880px);
  --book-thickness: 104px;   /* a reference volume, not a pamphlet */
  --book-leaf: 5px;
  /* A shorter camera. 2600px on an object this size is nearly
     orthographic, which is the main reason the old book read as flat. */
  --book-perspective: 1750px;
  --book-tilt: -13deg;
  /* The baseline three-quarter turn. Eased to near zero as the volume
     opens, so the closed hero is dimensional and the open spread is
     square to the reader. */
  --book-yaw: 25deg;
  /* how far the boards overhang the block. Generous (Phase 5.4): the open
     pages stand above the boards, and with the camera's perspective a 9px
     square was covered entirely — the open volume showed no binding at all */
  --book-square: clamp(14px, 1.9vw, 26px);

  /* ---------- ELEVATION ---------- */
  --shadow-contact: 0 60px 90px -30px rgb(0 0 0 / 0.9);
  --shadow-cover: 0 2px 0 rgb(0 0 0 / 0.5), 0 24px 60px -12px rgb(0 0 0 / 0.72);
  --shadow-leaf: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-panel: 0 40px 90px -40px rgb(0 0 0 / 0.85);

  /* ---------- MOTION: DURATION ---------- */
  --dur-micro: 220ms;
  --dur-ui: 420ms;
  --dur-content: 760ms;
  --dur-chapter: 1400ms;
  --dur-cinematic: 2400ms;

  /* ---------- MOTION: EASING ---------- */
  /* out-expo — things arriving and settling */
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);
  /* in-out-quint — camera and chapter moves */
  --ease-camera: cubic-bezier(0.83, 0, 0.17, 1);
  /* editorial — typography and rules */
  --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* paper — weight, a touch of overshoot-free settle */
  --ease-paper: cubic-bezier(0.34, 0.86, 0.28, 1);
  /* cinematic — long environmental transformations */
  --ease-cinematic: cubic-bezier(0.62, 0.02, 0.16, 1);

  /* ---------- SCROLL FEEL ---------- */
  --scroll-lerp: 0.085;

  /* ---------- Z ---------- */
  --z-stage: 1;
  --z-book: 20;
  --z-escape: 30;
  --z-chrome: 60;
  --z-nav: 70;
  --z-cursor: 100;
  --z-overlay: 90;
}

/* A reduced-motion reader gets the same design, told calmly. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 1ms;
    --dur-ui: 140ms;
    --dur-content: 200ms;
    --dur-chapter: 240ms;
    --dur-cinematic: 260ms;
    --scroll-lerp: 1;
  }
}

/* Tablet — keep the composition, flatten the depth. */
@media (max-width: 1100px) {
  :root {
    --t-monument: clamp(2.6rem, 13.5vw, 9rem);
    --book-thickness: 54px;
    --book-leaf: 4px;
    --book-perspective: 2000px;
    --track-meta: 0.18em;
  }
}

/* Mobile — the book becomes a vertical object. */
@media (max-width: 720px) {
  :root {
    /* Sized for the CLOSED book, which is the widest the volume ever is:
       one page plus the boards, plus the three-quarter yaw. At 86vw that
       composition ran off both edges of a 390px screen and cut the cover
       type. */
    --book-w: min(76vw, 380px);
    --book-h: min(60vh, 540px);
    --book-thickness: 34px;
    --book-leaf: 3px;
    --book-perspective: 1400px;
    --book-tilt: -8deg;
    --t-monument: clamp(2.8rem, 19vw, 6rem);
    --leading-body: 1.66;
  }
}