/* ════════════════════════════════════════════════════════════════════════
 * BUNYAN DESIGN SYSTEM — TOKENS (v1)
 * بُنيان · Phase 9d brand refresh
 *
 * The complete design language as CSS custom properties.
 * Loaded BEFORE styles.css so legacy components inherit when convenient,
 * and new components consume the tokens exclusively.
 *
 * Naming follows the cascade: --color-<role>-<shade>, --space-<n>, etc.
 * ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── BRAND COLOURS ─────────────────────────────────────────────────────
   * Inspired by Diriyah:
   *  - "stone"   — mud-brick warm tone, base of every Najdi wall
   *  - "gold"    — refined Diriyah gilding, used sparingly for accents
   *  - "palm"    — date-palm green, signals trust and growth
   *  - "sand"    — sun-bleached background, like a Najdi courtyard
   *  - "ink"     — deep warm earth, primary text
   */
  --bn-stone-50:  #f9f3e3;
  --bn-stone-100: #f1e7c8;
  --bn-stone-200: #e3d3a0;
  --bn-stone-300: #c9b274;
  --bn-stone-400: #9a7e44;
  --bn-stone-500: #6b5530;   /* primary stone */
  --bn-stone-600: #4d3c20;
  --bn-stone-700: #3a2d18;
  --bn-stone-800: #251c0f;

  --bn-gold-300:  #ddc086;
  --bn-gold-400:  #c9a45a;   /* primary gold accent */
  --bn-gold-500:  #b08840;
  --bn-gold-600:  #8a682c;

  --bn-palm-300:  #4ea876;
  --bn-palm-400:  #1f8c52;
  --bn-palm-500:  #0e7a3f;   /* primary palm */
  --bn-palm-600:  #0a5d2e;

  --bn-sand-50:   #fefcf6;
  --bn-sand-100:  #faf3e0;
  --bn-sand-200:  #f1e8cd;
  --bn-sand-300:  #e6d8ab;

  --bn-ink-soft:  #5a4a30;
  --bn-ink:       #2a2014;
  --bn-ink-strong:#180f06;

  --bn-danger:    #b8323d;
  --bn-warning:   #c0892b;
  --bn-success:   var(--bn-palm-500);

  /* ── SEMANTIC TOKENS (use these in components, not raw colours) ──────── */
  --color-surface:        var(--bn-sand-50);
  --color-surface-raised: #ffffff;
  --color-surface-sunk:   var(--bn-sand-100);
  --color-surface-veil:   rgba(36, 26, 14, .55);

  --color-text-primary:   var(--bn-ink);
  --color-text-secondary: var(--bn-ink-soft);
  --color-text-muted:     #8a7556;
  --color-text-inverse:   var(--bn-sand-50);

  --color-border:         #e8dec0;
  --color-border-strong:  var(--bn-stone-300);
  --color-divider:        #f0e8d2;

  --color-brand:          var(--bn-stone-500);
  --color-accent:         var(--bn-gold-400);
  --color-trust:          var(--bn-palm-500);
  --color-danger:         var(--bn-danger);
  --color-warning:        var(--bn-warning);
  --color-success:        var(--bn-success);

  /* ── GRADIENTS — used for highlights, never as base surface ──────────── */
  --grad-gold:  linear-gradient(135deg, #ddc086, #c9a45a 55%, #b08840);
  --grad-stone: linear-gradient(135deg, #6b5530, #4d3c20);
  --grad-palm:  linear-gradient(135deg, #1f8c52, #0e7a3f);
  --grad-hero:  linear-gradient(180deg, #faf3e0 0%, #f1e8cd 50%, #e6d8ab 100%);

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────────── */
  --font-sans-ar: 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-display: 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Consolas', monospace;

  /* Fluid font scale (clamp(min, ideal, max)) */
  --text-xs:   clamp(.72rem, .70rem + .15vw, .80rem);
  --text-sm:   clamp(.82rem, .80rem + .15vw, .92rem);
  --text-base: clamp(.94rem, .90rem + .25vw, 1.04rem);
  --text-lg:   clamp(1.08rem, 1.02rem + .35vw, 1.22rem);
  --text-xl:   clamp(1.24rem, 1.16rem + .50vw, 1.46rem);
  --text-2xl:  clamp(1.50rem, 1.36rem + .85vw, 1.94rem);
  --text-3xl:  clamp(1.90rem, 1.65rem + 1.4vw, 2.65rem);
  --text-4xl:  clamp(2.40rem, 2.00rem + 2.2vw, 3.60rem);

  --lh-tight:  1.20;
  --lh-snug:   1.40;
  --lh-normal: 1.65;
  --lh-relax:  1.80;

  --tracking-tight: -0.012em;
  --tracking-norm:  0;
  --tracking-wide:  0.04em;

  /* ── SPACING — 4-pt scale ───────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── RADIUS ─────────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 30px;
  --radius-pill: 999px;

  /* ── SHADOWS — layered, calibrated for warm-bg ──────────────────────── */
  --shadow-xs: 0 1px 2px rgba(36, 26, 14, .04);
  --shadow-sm: 0 2px 4px rgba(36, 26, 14, .06), 0 1px 2px rgba(36, 26, 14, .04);
  --shadow-md: 0 6px 14px rgba(36, 26, 14, .08), 0 2px 4px rgba(36, 26, 14, .06);
  --shadow-lg: 0 14px 30px rgba(36, 26, 14, .12), 0 4px 8px rgba(36, 26, 14, .06);
  --shadow-xl: 0 24px 60px rgba(36, 26, 14, .18), 0 8px 18px rgba(36, 26, 14, .08);
  --shadow-glow-gold: 0 0 0 1px rgba(201, 164, 90, .35), 0 8px 20px rgba(201, 164, 90, .28);

  /* ── MOTION — calibrated for "expensive" feel without latency ────────── */
  --ease-out-soft:  cubic-bezier(.16, 1, .30, 1);
  --ease-in-soft:   cubic-bezier(.62, .04, .96, .40);
  --ease-in-out:    cubic-bezier(.65, .05, .35, 1);

  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   380ms;
  --dur-anchor: 600ms;

  /* ── LAYOUT ─────────────────────────────────────────────────────────── */
  --max-w-prose:   68ch;
  --max-w-content: 1240px;
  --gutter:        clamp(1rem, 4vw, 2rem);

  /* ── Z-LAYERS ───────────────────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fab:      300;
  --z-modal:    9000;
  --z-toast:    9500;
}

/* ── Honour user motion preferences ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-anchor: 0ms;
  }
  /* Killing animations with a universal selector is too aggressive — it
   * disables even the welcome cinematic that users explicitly opt into.
   * Each layer respects reduced-motion via its OWN scoped rules instead. */
  /* (intentionally no universal rule here) */
}

/* ── Print: strip shadows + colours bleed nicely ───────────────────────── */
@media print {
  :root {
    --shadow-xs: none; --shadow-sm: none; --shadow-md: none;
    --shadow-lg: none; --shadow-xl: none;
  }
}