/* ==========================================================================
   PayCard — Design Tokens
   Three layers: primitive → semantic → component
   Trust-first fintech system. Navy dominant, gold scarce, bone-white surfaces.
   ========================================================================== */

/* ---------- Fonts (self-hosted, offline-safe) ---------- */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
/* ---------- Display faces (Estedad ExtraBold for H1/H2, Lalezar for kickers/badges) ----------
   Self-hosted from the design kit, arabic subset only + latin fallback.
   Only two weights to keep the payload small (~90KB total). */
@font-face {
  font-family: 'Estedad';
  src: url('../fonts/display/Estedad-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
}
@font-face {
  font-family: 'Estedad';
  src: url('../fonts/display/Estedad-800-latin.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Lalezar';
  src: url('../fonts/display/Lalezar-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D;
}

:root {
  /* ================= LAYER 1 — PRIMITIVES ================= */

  /* Ink Navy ramp — financial authority */
  --ink-900: #050F1E;
  --ink-800: #081729;
  --ink-700: #0B1F3A;   /* brand primary */
  --ink-600: #122C4E;
  --ink-500: #1B3A63;
  --ink-400: #2A4E7C;

  /* Warm Gold ramp — verified / premium. Scarce by policy. */
  --gold-700: #7E6516;  /* text-on-light only: WCAG AA (5.1:1 on bone) */
  --gold-600: #A8871F;  /* borders & decoration on light */
  --gold-500: #C9A227;  /* brand accent */
  --gold-400: #DCBB4E;
  --gold-200: #EFE0B0;
  --gold-050: #FBF5E4;

  /* Bone / neutral ramp */
  --bone-000: #FFFFFF;
  --bone-050: #FBFAF7;
  --bone-100: #F7F5F0;  /* brand surface */
  --bone-200: #EDEAE2;
  --bone-300: #DCD8CD;

  /* Slate ramp — secondary text */
  --slate-600: #465563;
  --slate-500: #5B6B7C;  /* brand support */
  --slate-400: #8494A3;

  /* Semantic hues */
  --green-700: #146646;
  --green-600: #1E7F5A;  /* verified / safe ONLY */
  --green-050: #E7F3EE;

  /* Space scale (4px base) */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  /* Radii */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Elevation — soft, never harsh */
  --sh-1: 0 1px 2px rgba(11,31,58,.06), 0 1px 3px rgba(11,31,58,.05);
  --sh-2: 0 4px 12px rgba(11,31,58,.07), 0 1px 3px rgba(11,31,58,.05);
  --sh-3: 0 12px 32px rgba(11,31,58,.10), 0 2px 8px rgba(11,31,58,.06);
  --sh-card: 0 30px 60px -12px rgba(5,15,30,.55), 0 18px 36px -18px rgba(5,15,30,.45);

  /* Motion — slow, calm, trustworthy */
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  /* Type scale */
  --fs-hero: clamp(2.25rem, 5.4vw, 4.25rem);
  --fs-h2:   clamp(1.75rem, 3.4vw, 2.5rem);
  --fs-h3:   clamp(1.15rem, 1.8vw, 1.375rem);
  --fs-lead: clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-sm:   .9375rem;
  --fs-xs:   .8125rem;
  --lh-tight: 1.25;
  --lh-body: 1.7;

  --font-head: 'Estedad', 'Vazirmatn', Tahoma, sans-serif;
  --font-display: 'Lalezar', 'Estedad', 'Vazirmatn', Tahoma, sans-serif;
  --font-body: 'Vazirmatn', 'Inter', Tahoma, system-ui, sans-serif;

  /* ================= LAYER 2 — SEMANTIC ================= */
  --bg-page: var(--bone-100);
  --bg-surface: var(--bone-000);
  --bg-sunken: var(--bone-050);
  --bg-inverse: var(--ink-700);
  --bg-inverse-deep: var(--ink-900);

  --text-strong: var(--ink-700);
  --text-body: #33404E;
  --text-muted: var(--slate-500);
  --text-on-inverse: #EEF2F7;
  --text-on-inverse-muted: #A9BACD;

  --border-hairline: var(--bone-300);
  --border-subtle: var(--bone-200);
  --border-on-inverse: rgba(238,242,247,.14);

  --accent: var(--gold-500);
  --accent-strong: var(--gold-700);   /* AA-safe gold for text on light */
  --accent-border: var(--gold-600);
  --accent-wash: var(--gold-050);
  --verified: var(--green-600);
  --verified-wash: var(--green-050);

  /* Focus: high-contrast on light, warm gold on dark surfaces */
  --focus-ring: var(--ink-700);

  /* ================= LAYER 3 — COMPONENT ================= */
  --header-h: 72px;
  --container: 1200px;
  --btn-h: 52px;
  --btn-h-sm: 44px;      /* never below 44px touch target */
  --card-pad: clamp(1.5rem, 3vw, 2rem);
  --section-py: clamp(4rem, 9vw, 7.5rem);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}