/* bluTshirt design tokens — single source of truth for the theme.
   Mirrors design_handoff/tokens/* (colors, typography, spacing, effects).
   Override any value via the Customizer (it prints overrides into :root). */

:root {
  /* ---- Base palette (official BrandBook) ---- */
  --blu-500: #00ADE6;   /* primary brand blue */
  --gray-150: #EBEBEB;  /* hairline borders, light surfaces */
  --white: #FFFFFF;
  --slate-600: #4B555A; /* primary text + wordmark + footer bg */

  /* ---- Derived working shades ---- */
  --blu-600: #0092C4;   /* hover */
  --blu-700: #007AA6;   /* press */
  --blu-100: rgba(0, 173, 230, 0.10);
  --blu-200: rgba(0, 173, 230, 0.18);
  --gray-100: #F4F4F4;  /* card / input fill */
  --slate-700: #394246; /* max-contrast text */
  --slate-500: #566066;
  --slate-400: rgba(75, 85, 90, 0.64);
  --slate-300: rgba(75, 85, 90, 0.40);
  /* a11y (ممیزی تیر ۱۴۰۵): تیره‌شده تا متن ثانویه/وضعیت به کنتراست AA برسد
     (مقادیر قبلی: muted #7a8388=3.9:1، muted-2 #9aa1a6=2.6:1، success 3.05،
     warning 2.16، danger 3.99 — همه زیر آستانه روی سفید). */
  --muted: #5F6A71;
  --muted-2: #6F777D;

  /* ---- Functional / status (status only — never decoration) ---- */
  --success: #157A43;
  --danger: #C22F2F;
  --warning: #A35F06;
  --info-purple: #5B46C9;

  /* ---- Semantic aliases ---- */
  --color-primary: var(--blu-500);
  --color-primary-hover: var(--blu-600);
  --color-primary-press: var(--blu-700);
  --color-on-primary: var(--white);

  --surface-page: var(--white);
  --surface-subtle: var(--gray-100);
  --surface-soft: var(--gray-150);
  --surface-tint: var(--blu-100);
  --surface-inverse: var(--slate-600);

  --text-strong: var(--slate-700);
  --text-body: var(--slate-600);
  --text-muted: var(--slate-400);
  --text-on-primary: var(--white);
  --text-link: var(--blu-700); /* a11y: blu-600 روی سفید 3.55:1 بود؛ blu-700 = 4.8:1 */

  --border-soft: var(--gray-150);
  --border-strong: var(--slate-300);
  --border-input: #8A9094; /* a11y: مرز قابل‌مشاهدهٔ فیلدها (~3:1 روی سفید) */
  --border-focus: var(--blu-500);

  /* ---- Type families ---- */
  --font-fa: "Yekan Bakh", "Vazirmatn", Tahoma, sans-serif;
  --font-fa-num: "Yekan Bakh FaNum", "Yekan Bakh", "Vazirmatn", Tahoma, sans-serif;
  --font-en: "Pero", "Trebuchet MS", Verdana, sans-serif;

  /* ---- Type weights ---- */
  --weight-title: 800;     /* ExtraBold — تیتر */
  --weight-subtitle: 400;  /* Regular — سوتیتر */
  --weight-body: 300;      /* Light — متن */
  --weight-ui: 500;        /* buttons, labels, nav */
  --weight-strong: 700;

  /* ---- Web type scale ---- */
  --text-display: 56px;  --leading-display: 1.15;
  --text-h1: 40px;       --leading-h1: 1.25;
  --text-h2: 30px;       --leading-h2: 1.3;
  --text-h3: 22px;       --leading-h3: 1.4;
  --text-body-lg: 18px;
  --text-body-md: 16px;  --leading-body: 1.85;
  --text-caption: 13px;
  --text-button: 15px;
  --text-label: 12px;    --tracking-label: 0.06em;

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

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: 16px;
  --grid-gap: 16px;
  --section-gap: 56px;

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-sheet: 26px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 3px rgba(75, 85, 90, 0.08), 0 4px 16px rgba(75, 85, 90, 0.06);
  --shadow-raised: 0 4px 12px rgba(75, 85, 90, 0.10), 0 12px 32px rgba(75, 85, 90, 0.10);
  /* a11y: حلقهٔ فوکوس قبلاً rgba(0,173,230,.30) بود = 1.34:1 و عملاً نامرئی؛
     اکنون بر پایهٔ blu-700 و تقریباً توپر (~4.4:1). */
  --shadow-focus: 0 0 0 3px rgba(0, 122, 166, 0.90);

  /* ---- Motion ---- */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ---- Theme chrome ---- */
  --ticker-h: 38px;
  --header-h: 60px;
  --bottomnav-h: 64px;
}

@media (min-width: 1024px) {
  :root {
    --container-pad: 40px;
    --grid-gap: 24px;
    --section-gap: 96px;
  }
}