/* ============================================================
   design-tokens.css
   ─────────────────────────────────────────────────────────────
   Single source of truth for all visual decisions:
   colors, typography, spacing, motion, elevation.

   All other CSS in the project should consume these tokens
   via var(--token-name). NEVER override a token in a page-
   specific file -- if you need a different value, add a new
   token here.

   Loaded by: components.css (via @import) and any page that
   uses the design system directly.
   ============================================================ */

/* ── @font-face — Vazirmatn local (بدون CDN، CLAUDE.md compliant) ──
   مرجع: https://github.com/rastikerdar/vazirmatn (SIL OFL 1.1)
   چهار وزن: Light(300), Regular(400), Medium(500), Bold(700)
   font-display: swap → جلوگیری از FOIT (متن نامرئی موقت) */
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('/static/fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Surfaces — rich black with cool undertone (2026-05-13) ──
     قبلاً مشکی خالص #0a0a0a بود؛ به #0B0D12 ارتقا یافت تا چشم
     خستگی کمتری بگیرد و عمق بصری بین لایه‌ها بیشتر دیده شود. */
  --bg:               #0B0D12;
  --surface:          #14171D;
  --surface-hover:    #181B22;
  --surface-strong:   #1C2028;
  /* AA-36: سطحِ ثانویهٔ کارت‌ها (accounts/portal/field_visit) — هم‌ترازِ elevated. */
  --surface-2:        #1C2028;
  --border:           #1F232B;
  --border-soft:      #181B22;
  --border-strong:    #2A2F38;

  /* ── Text — off-white, warmer ─────────────────────────── */
  --text:             #F5F5F7;
  --text-muted:       #8A8A93;
  --text-subtle:      #52525B;
  --text-faint:       #2A2A2F;
  --text-on-accent:   #0B0D12;

  /* ── Accent — premium gold (2026-05-13) ────────────────
     قبلاً نقره‌ای #c8c8d0 بود؛ به طلایی #D4A574 تغییر یافت تا
     هویت brand را با حس boutique/مالی منتقل کند. */
  --accent:           #D4A574;
  --accent-rgb:       212, 165, 116;

  /* ── Alert system — exception-only colors ─────────────── */
  --critical:         #ff3b5c;
  --critical-bg:      rgba(255, 59, 92, 0.08);
  --critical-edge:    rgba(255, 59, 92, 0.25);

  --warning:          #ff9f43;
  --warning-bg:       rgba(255, 159, 67, 0.06);
  --warning-edge:     rgba(255, 159, 67, 0.20);

  --watch:            #ffd93d;
  --watch-bg:         rgba(255, 217, 61, 0.04);
  --watch-edge:       rgba(255, 217, 61, 0.15);

  --positive:         #4ade80;
  --positive-bg:      rgba(74, 222, 128, 0.06);

  /* ── Typography — modern minimal favors thin weights ──── */
  --font-fa:          "Vazirmatn", "Tahoma", system-ui, sans-serif;
  --font-en:          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-num:         "Inter", "SF Mono", "JetBrains Mono", system-ui, sans-serif;

  /* Font sizes — semantic scale */
  --fs-hero:          96px;     /* layer 1 main number */
  --fs-hero-sm:       64px;     /* layer 1 mobile */
  --fs-display:       56px;     /* drawer hero number */
  --fs-kpi:           38px;     /* layer 2 numbers */
  --fs-page-title:    18px;     /* topbar title */
  --fs-h2:            16px;     /* section heads */
  --fs-body:          14px;     /* default body */
  --fs-small:         13px;
  --fs-label:         12px;
  --fs-eyebrow:       11px;     /* uppercase tiny labels */

  /* Font weights — minimal design uses light weights */
  --fw-thin:          200;
  --fw-light:         300;
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-bold:          700;  /* AA-36: استفاده در کارت‌های «پررنگ» portal.css */

  /* Letter spacing */
  --ls-eyebrow:       0.12em;   /* uppercase eyebrows */
  --ls-label:         0.04em;
  --ls-tight:         -0.02em;  /* large numbers */
  --ls-tighter:       -0.04em;  /* hero numbers */

  /* ── Spacing scale — 4-based ──────────────────────────── */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-7:          28px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;
  --space-16:         64px;
  --space-20:         80px;

  /* ── Layout ───────────────────────────────────────────── */
  --content-max:      1200px;
  --content-padding-x: 40px;
  --content-padding-x-mobile: 20px;

  /* ── Radius ───────────────────────────────────────────── */
  --radius-sm:        4px;
  --radius:           6px;
  --radius-lg:        12px;
  --radius-pill:      999px;

  /* ── Motion ───────────────────────────────────────────── */
  /* Hydraulic-feel easings — smooth deceleration without overshoot.
     The further "out" the curve, the gentler the stop. */
  --ease:             cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint — default UI */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);    /* easeOutExpo — dramatic */
  --ease-hydraulic:   cubic-bezier(0.19, 1, 0.22, 1);   /* very soft tail — drawers, panels */
  --ease-soft:        cubic-bezier(0.25, 0.46, 0.45, 0.94); /* easeOutQuad — gentle */

  /* Durations — slightly longer than snappy defaults so motion reads as
     deliberate, not jerky. Drawers especially benefit from a longer travel. */
  --dur-fast:         .20s;   /* hover, color change */
  --dur:              .28s;   /* common UI, surface change */
  --dur-slow:         .70s;   /* drawer, modal, large surface motion */
  --dur-backdrop:     .50s;   /* backdrop fade */

  /* ── Elevation (rarely used in matte design) ──────────── */
  --elev-1:           0 1px 2px rgba(0, 0, 0, 0.3);
  --elev-2:           0 8px 24px rgba(0, 0, 0, 0.4);
  --elev-overlay:     0 32px 64px rgba(0, 0, 0, 0.6);

  /* ── Z-index scale ────────────────────────────────────── */
  --z-base:           1;
  --z-sticky:         10;
  --z-overlay:        100;
  --z-drawer:         101;
  --z-modal:          150;   /* پنجره‌های محلیِ صفحه (ویرایش/افزودن) — روی drawer، زیرِ toast/confirm */
  --z-datepicker:     151;   /* تقویم شمسی — باید روی modal باشد */
  --z-toast:          200;
}