/*
 * wooary design system — tokens.
 *
 * Everything downstream reads from here, so a rebrand is a change to this file rather
 * than a sweep through the whole theme.
 *
 * Two rules this theme holds to that the stock theme did not:
 *
 *   1. LOGICAL PROPERTIES ONLY for anything directional. margin-inline-start, not
 *      margin-left; inset-inline-end, not right. Arabic and Persian are first-class
 *      here, so RTL must fall out of the markup rather than needing a 5KB override
 *      sheet bolted on afterwards.
 *   2. No hard-coded colour literals outside this file.
 */

:root {
  /* ---- brand ---- */
  --wa-ink:        #0B0D12;   /* page base */
  --wa-ink-2:      #12151C;   /* raised surface: cards, sheets */
  --wa-ink-3:      #1A1E27;   /* hover / pressed surface */
  --wa-line:       #242A36;   /* hairline borders */
  --wa-amber:      #F5A524;   /* primary action, brand accent */
  --wa-amber-lt:   #FFC15E;   /* gradient top / hover */
  --wa-amber-dim:  rgba(245,165,36,.14);
  --wa-bone:       #F5F3EF;   /* primary text on dark */
  --wa-mute:       #8A8F9A;   /* secondary text */
  --wa-mute-2:     #5C626E;   /* tertiary / disabled */
  --wa-danger:     #E5484D;
  --wa-ok:         #3DD68C;

  /* ---- type ----
     Two stacks. The Latin stack leads for en/tr; the RTL stack is swapped in wholesale
     under [dir="rtl"] because Arabic and Persian need different fonts AND different
     metrics, not just a fallback appended to the end of the Latin list. */
  --wa-font: "Outfit", "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, system-ui, sans-serif;
  --wa-font-rtl: "Noto Naskh Arabic", "Noto Sans Arabic", "Vazirmatn", "Dubai",
                 "Segoe UI", Tahoma, sans-serif;
  --wa-font-display: "Outfit", "Anton", "Plus Jakarta Sans", system-ui, sans-serif;

  /* Fluid scale: clamp() so type breathes between phone and desktop without a stack
     of breakpoints. */
  --wa-t-hero:  clamp(2.6rem, 7vw, 6.5rem);
  --wa-t-h1:    clamp(1.75rem, 3.4vw, 2.75rem);
  --wa-t-h2:    clamp(1.3rem, 2.2vw, 1.75rem);
  --wa-t-h3:    clamp(1.05rem, 1.5vw, 1.25rem);
  --wa-t-body:  clamp(.92rem, 1.05vw, 1rem);
  --wa-t-sm:    .84rem;
  --wa-t-xs:    .75rem;

  --wa-lh-tight: 1.1;
  --wa-lh-body:  1.6;

  /* ---- space (4px base) ---- */
  --wa-1: 4px;  --wa-2: 8px;  --wa-3: 12px; --wa-4: 16px;
  --wa-5: 24px; --wa-6: 32px; --wa-7: 48px; --wa-8: 64px; --wa-9: 96px;

  /* ---- radius ---- */
  --wa-r-sm: 6px; --wa-r: 10px; --wa-r-lg: 16px; --wa-r-xl: 24px; --wa-r-pill: 999px;

  /* ---- elevation ----
     Dark UIs read depth from glow and border far more than from drop shadow; a black
     shadow on a near-black surface is invisible. */
  --wa-sh-1: 0 1px 2px rgba(0,0,0,.4);
  --wa-sh-2: 0 8px 24px rgba(0,0,0,.45);
  --wa-sh-3: 0 20px 60px rgba(0,0,0,.6);
  --wa-glow: 0 0 0 1px rgba(245,165,36,.35), 0 8px 32px rgba(245,165,36,.18);

  /* ---- motion ---- */
  --wa-fast: 140ms;
  --wa-med:  240ms;
  --wa-slow: 420ms;
  --wa-ease: cubic-bezier(.4,0,.2,1);
  --wa-ease-out: cubic-bezier(.16,1,.3,1);

  /* ---- layout ---- */
  --wa-max:  1600px;
  --wa-gut:  clamp(16px, 4vw, 56px);
  --wa-header-h: 68px;

  /* ---- z-index scale ----
     Named so the parallax stacking order is legible rather than a pile of magic
     numbers. Mirrors the blueprint: back < text < front. */
  --wa-z-hero-back:  10;
  --wa-z-hero-mid:   15;
  --wa-z-hero-text:  20;
  --wa-z-hero-front: 30;
  --wa-z-header:     100;
  --wa-z-drawer:     200;
  --wa-z-modal:      300;
  --wa-z-toast:      400;
}

[dir="rtl"] {
  --wa-font: var(--wa-font-rtl);
  --wa-font-display: var(--wa-font-rtl);
  /* Arabic script sits lower on the baseline and needs more leading than Latin at the
     same px size, otherwise descenders collide. */
  --wa-lh-tight: 1.3;
  --wa-lh-body:  1.85;
}

/* Respect the OS-level motion preference. The parallax hero is the main offender, so
   this is a real accessibility requirement, not a nicety. */
@media (prefers-reduced-motion: reduce) {
  :root { --wa-fast: 1ms; --wa-med: 1ms; --wa-slow: 1ms; }
}