/* ============================================================
   ZAYMAR — tokens.css
   Every colour, size, space, duration and easing on the site
   lives here. No other stylesheet declares a raw value.

   v2 palette — light-led. The site reads black + white first:
   warm luxury whites carry the page, near-blacks carry the
   editorial moments, and sand/bronze exist only as accents.
   Token NAMES are kept from v1 so components stay stable;
   their VALUES define the new hierarchy.
   ============================================================ */

:root {

  /* ---- Colour · core ---- */
  --z-paper:     #FDFCFA;  /* purest moments — brand statement */
  --z-ivory:     #FAF8F4;  /* primary background — warm luxury white */
  --z-sand:      #F1ECE1;  /* secondary background — very light cream */
  --z-stone:     #F0F0F0;  /* neutral gallery grey — the phone Chapter I page, a shade under the white cards (as a studio shelf) */
  --z-beige:     #C9C2B6;  /* secondary text on dark */
  --z-taupe:     #8C8072;  /* stone — hairline accents, decorative marks */
  --z-brown:     #4A4440;  /* secondary text on light — warm charcoal */
  --z-espresso:  #17130F;  /* primary dark surface — warm black */
  --z-ink:       #0D0B09;  /* deepest black — statements, finale, transitions */

  /* accents — the house's warm metal thread: details, never surfaces */
  --z-burgundy:  #5C1A22;
  --z-amber:     #7E3F1A;  /* smoked burnt copper: the Tropical Burn room, mixed into ink */
  --z-gold:      #A98F55;  /* champagne — accent on dark surfaces */
  --z-bronze:    #82663A;  /* deep bronze — accent on light surfaces, AA-safe */
  --z-umber:     #2B1C0D;  /* warm black — hover states on primary actions */
  --z-caramel:   #7A4A22;
  --z-date:      #48221A;  /* Medjool date skin: deep, red-black, glossy. The Date Me room, mixed into ink */
  --z-oud:       #3A2314;  /* deep oud-brown — the Chapter I room */

  /* ---- Colour · roles ---- */
  --fg-on-dark:        var(--z-ivory);
  --fg2-on-dark:       var(--z-beige);
  --fg3-on-dark:       var(--z-taupe);
  --fg-on-light:       var(--z-ink);
  --fg2-on-light:      var(--z-brown);
  --fg3-on-light:      #6B6258;   /* deep stone — smallest labels on light, AA-safe */

  --line-on-dark:      rgba(250, 248, 244, 0.16);
  --line-on-light:     rgba(13, 11, 9, 0.12);      /* very light grey */
  --line-gold:         rgba(169, 143, 85, 0.45);

  /* accent role — resolved per surface (champagne on dark,
     bronze on light); the default matches the light-led page */
  --accent: var(--z-bronze);
  --tick: 1.75rem;   /* length of the short accent rule segments */

  /* fragrance temperatures — micro-accents + imagery tints only,
     never large surfaces */
  --temp-date-me:       var(--z-date);
  --temp-tropical-burn: var(--z-amber);
  --temp-sweet-disaster:var(--z-burgundy);
  --temp-black-honey:   var(--z-gold);

  /* ---- Typography ---- */
  --font-display: 'Zodiak', 'Iowan Old Style', Georgia, serif;
  --font-title:   'Lora', 'Iowan Old Style', Georgia, serif;  /* hero title */
  --font-sans:    'Switzer', 'Helvetica Neue', Arial, sans-serif;
  --font-ar-display: 'Reem Kufi', 'Geeza Pro', sans-serif;
  --font-ar-text:    'Noto Naskh Arabic', 'Geeza Pro', serif;

  --fs-display-1: clamp(4rem, 12vw, 14rem);
  --fs-display-2: clamp(2.75rem, 7vw, 7.5rem);
  --fs-h1:        clamp(2.25rem, 4.5vw, 4rem);
  --fs-h2:        clamp(1.6rem, 2.6vw, 2.5rem);
  --fs-h3:        1.375rem;
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-label:     0.75rem;
  --fs-micro:     0.6875rem;

  --lh-display:   1.02;
  --lh-heading:   1.12;
  --lh-body:      1.65;
  --lh-body-lg:   1.75;
  --lh-label:     1.4;

  --track-label:  0.14em;
  --track-micro:  0.16em;
  --track-display: -0.015em;

  --measure:      65ch;

  /* ---- Space ---- */
  --sp-2xs: 0.375rem;
  --sp-xs:  0.625rem;
  --sp-s:   1rem;
  --sp-m:   1.5rem;
  --sp-l:   2.5rem;
  --sp-xl:  4rem;
  --sp-2xl: 6rem;
  --sp-3xl: 8.75rem;

  --space-section:    clamp(7.5rem, 14vh, 12.5rem);
  --space-focal:      clamp(11rem, 24vh, 20rem);
  --space-block:      clamp(3.5rem, 7vh, 6rem);

  /* ---- Grid ---- */
  --margin: clamp(1.25rem, 6vw, 7.5rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --cols: 12;
  --content-max: 100rem;

  /* ---- Chrome ---- */
  --header-h: 4.25rem;
  --radius: 2px;
  --hairline: 1px;

  /* ---- Motion ---- */
  --dur-micro: 200ms;
  --dur-state: 400ms;
  --dur-reveal: 700ms;
  --dur-cine: 1200ms;

  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:  cubic-bezier(0.7, 0, 0.84, 0);

  --stagger: 80ms;
  --reveal-shift: 16px;

  /* ---- Layers ---- */
  --layer-header: 100;
  --layer-nav: 200;
  --layer-preview: 150;
  --layer-transition: 300;
  --layer-blotter: 400;
  --layer-cursor: 500;

  /* ---- Effects ---- */
  --grain-opacity: 0.035;
  --ambient-opacity: 0.06;
  --sillage-size: 26rem;
  --sillage-opacity: 0.1;

  /* ---- Focus ---- */
  --focus-ring-dark: 2px solid var(--z-beige);
  --focus-ring-light: 2px solid var(--z-ink);
  --focus-offset: 3px;
}