/* ============================================================
   Al Arabi Decor — Design Tokens (single source of truth)
   Per Creative-Direction.md v1.2 + approved art direction.
   BRAND PALETTE (client review 2026-09-20): every brand colour is
   derived from the shipped logo artwork (assets/logo-wordmark.png,
   sampled from its opaque pixels): bronze depth #A57127 → core
   #D2A049 → PRIMARY #D2A049 → light gold #E4B65E → highlight
   #EFCC83. Ivory grounds stay warm. No green, blue, purple or red
   at brand level. Dark chapters are warm umber-bronze — never black.
   ============================================================ */
:root{
  /* ---- brand: sampled from the logo (source of truth) ---- */
  --brand-primary:#D2A049;      /* the logo's own gold — identity, premium highlights */
  --brand-bronze:#A57127;       /* the logo's deep bronze — borders, details, large accents */
  --brand-bronze-deep:#8A5E20;  /* text-grade bronze (AA on ivory) — small labels, links */
  --brand-gold-light:#E4B65E;   /* the logo's light gold — soft highlights, on-dark accents */
  --brand-gold-highlight:#EFCC83; /* the logo's lightest band — fine on-dark details */
  --brand-ivory:#F8F5EF;        /* warm ivory ground, in the logo's temperature */

  /* ---- color: grounds ---- */
  --color-bg-base:   #F8F5EF;  /* ivory — the plaster surface */
  --color-bg-surface:#F8F5EF;
  --color-bg-muted:  #EFE9DF;  /* bone */
  --color-bg-velvet: #3A2E19;  /* deep golden umber — a dark warm-gold shade of the logo, no olive cast */
  --color-bg-velvet-deep:#241A0E;

  /* ---- color: text ---- */
  --color-text:      #5A3E14;  /* warm bronze — primary body/nav text (reads bronze, not black) */
  --color-text-muted:#6E4B1A;  /* warm bronze — secondary/description (same hue as brand bronze, not grey) */
  --color-text-on-dark:#F8F5EF;
  --color-text-on-dark-muted:rgba(248,245,239,.75);

  /* ---- color: accents ---- */
  --color-accent-champagne:#C29F63;   /* display accent: rules, numerals, eyebrows — never buttons/body text */
  --color-accent-champagne-deep:#A58452;
  --color-accent-champagne-on-dark:#D8BC82;
  --color-hero-gold:#E4B65E;          /* hero headline gold — matched to the logo's sampled gold */
  --color-heading-gold:#8A5E20;       /* section headings on light grounds — deep logo gold, one consistent voice */
  /* DEPRECATED 2026-07-28 (Phase 2.5 palette lock): saturated golds retired as GROUNDS.
     No large flat gold/yellow backgrounds anywhere. Kept only so legacy refs don't break. */
  --color-statement-gold:#E9C24A;
  --color-heritage-gold:#D2A049;
  /* Phase 2.5 refined luxury palette — chapter grounds */
  --color-charcoal:#3A2E19;           /* warm charcoal — dark chapter ground */
  --color-stone:#EFE9DF;              /* warm stone — light chapter ground (same family as bg-muted) */
  --color-statement-ink:#6A4A0E;      /* deep amber-gold — statement type, tone-on-tone on the luminous gold */
  /* Functional gold scale — all derived from the logo sampling above */
  --color-accent-functional:#8A5E20;        /* deep logo-gold — links, focus, states (AA on ivory) */
  --color-accent-functional-on-dark:#E4B65E;
  --color-gold-btn:#D2A049;                 /* button gold — logo mid-tone */
  --color-gold-btn-hover:#B58538;
  --color-accent-support:var(--brand-bronze-deep);  /* quiet supporting accent — logo bronze (green support retired, client 2026-09-20) */
  --color-accent-support-on-dark:#CFAF74;   /* muted light gold on dark */

  /* ---- color: semantic ---- */

  /* ---- borders ---- */
  --hairline:1px solid rgba(59,44,24,.16);
  --hairline-on-dark:1px solid rgba(248,245,239,.2);

  /* ---- elevation (near-imperceptible by design) ---- */
  --shadow-sm:0 2px 24px rgba(59,44,24,.06);
  --shadow-md:0 6px 30px rgba(59,44,24,.12);

  /* ---- type families ----
     Free tier (shipped): Amiri (AR display) + Cormorant Garamond (Latin display)
     + IBM Plex Sans Arabic (text/UI). Licensed upgrade path: 29LT Zarid superfamily. */
  --font-display-ar:"Amiri", "Sakkal Majalla", "Traditional Arabic", serif;
  --font-display-lat:"Cormorant Garamond", Didot, "Bodoni MT", Georgia, serif;
  --font-text:"IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;

  /* ---- type scale (fluid, rem-anchored) ---- */
  --text-display:clamp(2.4rem, 1.5rem + 4.2vw, 5.4rem);
  --text-h2:     clamp(2.6rem, 1.7rem + 3.4vw, 4.4rem);
  --text-h3:     clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  --text-standfirst:clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --text-body:   clamp(1rem, .95rem + .25vw, 1.125rem);
  --text-caption:.8125rem;
  --text-eyebrow:.75rem;

  /* ---- per-locale leading (AR values; EN mirror overrides later) ---- */
  --leading-display:1.45;   /* Arabic display */
  --leading-body:1.75;      /* Arabic body */
  --leading-tight:1.3;

  /* ---- spacing (8px ladder) ---- */
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-5:48px; --space-6:64px; --space-7:96px;
  --space-section:clamp(80px, 6vw + 40px, 144px);
  --space-section-sm:clamp(48px, 4vw + 28px, 88px);

  /* ---- layout ---- */
  --container:1520px;
  --gutter:clamp(20px, 5vw, 96px);
  --measure:70ch;

  /* ---- radius: plaster edges are sharp ---- */
  --radius:2px;

  /* ---- motion ---- */
  --motion-instant:100ms;
  --motion-fast:200ms;
  --motion-base:350ms;
  --motion-slow:650ms;
  --motion-reveal:1000ms;
  --motion-ambient:1200ms;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --stagger:80ms;

  /* ---- z-index ---- */
  --z-header:60; --z-overlay:80; --z-float:70;
}