/* ============================================================
   ZANYAR — DESIGN TOKENS
   Layer 1: Palette (raw values)
   Layer 2: Semantic (role-based) — edit ONLY this file for brand changes
   ============================================================ */

:root{

  /* ---------- PALETTE (raw) ---------- */
  --p-ink-950:#0F1B22;
  --p-ink-900:#16232B;
  --p-ink-700:#2C3E46;
  --p-ink-500:#5B6E75;
  --p-ink-300:#9AACB0;

  --p-paper-50:#F7F3E8;
  --p-paper-100:#F1EBDA;
  --p-paper-200:#E7DEC4;

  --p-turquoise-700:#1F6B68;
  --p-turquoise-500:#2F8F8B;
  --p-turquoise-300:#7CBAB5;
  --p-turquoise-100:#DDEDEA;

  --p-saffron-700:#A9660F;
  --p-saffron-500:#D98A2B;
  --p-saffron-300:#EFC077;
  --p-saffron-100:#FBEDD6;

  --p-brick-600:#9C4A2C;
  --p-brick-400:#C97250;

  --p-white:#FFFFFF;
  --p-black:#0A1114;

  /* ---------- SEMANTIC ---------- */
  --color-bg:            var(--p-paper-50);
  --color-bg-alt:        var(--p-paper-100);
  --color-surface:       var(--p-white);
  --color-surface-dark:  var(--p-ink-900);
  --color-surface-dark-alt: var(--p-ink-950);

  --color-text-primary:    var(--p-ink-900);
  --color-text-secondary:  var(--p-ink-500);
  --color-text-on-dark:    var(--p-paper-50);
  --color-text-on-dark-muted: var(--p-ink-300);

  --color-border:        var(--p-paper-200);
  --color-border-dark:   rgba(247,243,232,0.14);

  --color-accent:         var(--p-turquoise-500);
  --color-accent-strong:  var(--p-turquoise-700);
  --color-accent-tint:    var(--p-turquoise-100);

  --color-conversion:        var(--p-saffron-500);
  --color-conversion-strong: var(--p-saffron-700);
  --color-conversion-tint:   var(--p-saffron-100);

  --color-brick: var(--p-brick-600);

  --color-focus: var(--p-saffron-500);

  /* ---------- TYPOGRAPHY ---------- */
  --font-fa: "Vazirmatn", "Tahoma", sans-serif;

  --fs-eyebrow: 0.8125rem;
  --fs-body-sm: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-body-lg: 1.1875rem;
  --fs-h6: 1.125rem;
  --fs-h5: 1.375rem;
  --fs-h4: 1.75rem;
  --fs-h3: 2.25rem;
  --fs-h2: 2.875rem;
  --fs-h1: 3.75rem;
  --fs-display: 4.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.65;
  --lh-relaxed: 1.85;

  /* ---------- SPACING SCALE (single scale used everywhere) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --container-max: 1180px;
  --container-narrow: 760px;

  /* ---------- RADIUS / SHADOW (limited, functional) ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15,27,34,0.06), 0 1px 1px rgba(15,27,34,0.04);
  --shadow-md: 0 8px 24px rgba(15,27,34,0.09);
  --shadow-lg: 0 20px 48px rgba(15,27,34,0.14);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.16,.8,.32,1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  /* ---------- Z ---------- */
  --z-header: 100;
  --z-overlay: 200;
}