/*
  Design tokens for "آنلاین پیامک" (Online Payamak).
  Source: reports/01-analysis-report.md (Figma file 37SY92liLpx1mUw3LS5N4Y).

  This file has three trust tiers, in order of authority:

  1. CONFIRMED — read directly from Figma (get_variable_defs) or measured
     directly from Figma frame geometry (get_metadata coordinates). Exact.

  2. MEASURED (provisional) — sampled with pixel-level color analysis
     directly from the Phase 1 screenshots (see
     .claude/.../memory + reports/01-analysis-report.md screenshots).
     Not read from a Figma style/variable, but empirically measured from
     the rendered design rather than guessed.

  3. INFERRED (provisional) — no direct Figma evidence exists for the
     exact number. A coherent, standard design-system scale was chosen
     that is consistent with the visual proportions observed across all
     captured screenshots (8px spacing rhythm, standard type/radius/shadow
     scales). Centralized here so replacing a real Figma value later means
     editing ONE line, never touching components.css/layout.css.

  Figma MCP quota was exhausted before typography/spacing/radius/shadow
  variables could be pulled directly — see project memory
  (project-sms-frontend-phase1) for the exact reconciliation order to
  follow once quota is available again.
*/

:root {
  /* ============================================================
     1. CONFIRMED — Figma variables (get_variable_defs), exact.
     Do not rename or change these values.
     ============================================================ */
  --color-white: #ffffff;
  --color-primary: #dda853;          /* Figma: Primary (gold/amber) */
  --color-secondary: #102e50;        /* Figma: "Secoundry" (navy) */
  --color-business-primary: #0a2647; /* Figma: Business/Primary (deep navy) */

  /* Figma variable "Business/Text gray" resolved to the same hex as
     Business/Primary (#0A2647) — likely a mislabeled/duplicate Figma
     variable, not a real gray. Pixel sampling below shows body/secondary
     text is in fact a desaturated tint of the navy, not neutral gray,
     which is consistent with that variable being a copy/paste error
     rather than an intentional gray token. See --color-text-muted. */

  /* ============================================================
     1. CONFIRMED — measured from Figma frame geometry (get_metadata).
     Home page + other desktop frames consistently place inner content
     at x=80 inside a 1440px-wide frame, with inner sections repeatedly
     width=1280 (803 occurrences of width="1280" across the Ui page).
     Icon symbols are consistently 24x24. Mobile reference frames are
     393px wide (iPhone 14/15 Pro), desktop reference frames 1440px.
     ============================================================ */
  --container-max-width: 1280px;
  --container-gutter: 80px;          /* desktop side gutter, 1440px viewport */
  --icon-size-base: 24px;
  --viewport-mobile-reference: 393px;
  --viewport-desktop-reference: 1440px;

  /* CONFIRMED — copied directly from Figma Dev Mode (user-provided,
     2026-08-19) for the Home header card ("Frame 9", 1280x171 Hug).
     border-radius matched --radius-lg exactly (16px) and top-offset
     matched --space-md exactly (24px) — reused, not duplicated. Padding
     (20px) had no existing match in the spacing scale, so it's its own
     token; the border color is --color-secondary at 13% alpha. */
  --space-header-padding: 20px;
  --color-header-border: rgba(16, 46, 80, 0.13);

  /* ============================================================
     2. MEASURED (provisional) — pixel-sampled from Phase 1 screenshots.
     Method: dominant-color sampling of rendered PNGs (Login, Home
     comparison table, Profile dropdown). Confirms --color-primary and
     --color-secondary exactly (cross-validation), and adds the semantic
     colors Figma variables didn't cover. Replace with real Figma
     variables once available; do not treat as pixel-perfect until then.
     ============================================================ */
  --color-success: #10af54;      /* comparison-table checkmarks */
  --color-danger: #f40259;       /* profile dropdown "خروج" (logout), error/cross accents */
  --color-text-muted: #7a8ca1;   /* secondary/muted text (navy-tinted gray, e.g. dropdown email) */
  --color-surface-alt: #f3f4f6;  /* light gray section/table-header background */
  --color-border: #e5e7eb;       /* inferred light divider gray, consistent with --color-surface-alt family */

  /*
   * PROVISIONAL TOKEN — INFERRED SCALE
   * Derived from Phase 1 Figma screenshots and repeated visual patterns
   * (rounded inputs/buttons/cards, soft elevation on dropdowns/popups,
   * generous section rhythm on the Home page). Figma numeric verification
   * unavailable due to MCP quota limitation. Centralized intentionally so
   * it can be replaced later without changing components/layout.
   */

  /* Spacing — 8px base rhythm */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Border radius — small reusable set */
  --radius-sm: 8px;    /* tags, small badges */
  --radius-md: 12px;   /* inputs, buttons */
  --radius-lg: 16px;   /* cards, dropdowns */
  --radius-xl: 24px;   /* large surfaces, popups/modals */
  --radius-full: 999px; /* avatars, pills, icon circles */

  /* Elevation — soft, brand-navy-tinted shadows (not pure black) */
  --shadow-sm: 0 1px 2px rgba(10, 38, 71, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 38, 71, 0.10);
  --shadow-lg: 0 12px 32px rgba(10, 38, 71, 0.14);

  /* Typography */
  --font-family-base: "Yekan Bakh FaNum", Tahoma, Arial, sans-serif; /* CONFIRMED — matches font-family in every Figma Dev Mode export seen; real files provided by the user (assets/fonts/), @font-face in css/fonts.css. Replaced the earlier "Vazir" placeholder 2026-08-19. */

  --font-size-caption: 12px;
  --font-size-label: 13px;
  --font-size-body-sm: 14px;
  --font-size-body-md: 16px;
  --font-size-body-lg: 18px;
  --font-size-heading-md: 22px;
  --font-size-heading-lg: 28px;
  --font-size-heading-xl: 36px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-heading: 1.3;
  --line-height-body: 1.7; /* Persian text benefits from slightly taller line-height */

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky-header: 200;
  --z-drawer: 300;
  --z-header: 310; /* above the mobile drawer backdrop — confirmed design (humburger-menu-ok.png) keeps the header crisp/visible above the dimmed drawer overlay */
  --z-modal-backdrop: 400;
  --z-modal: 410;
  --z-toast: 500;

  /* Breakpoints (mobile-first). Mobile (393) and desktop (1440) are
     confirmed Figma reference frames; tablet (768) has no Figma frame
     in this file and is interpolated to satisfy docs/00-rules.md's
     mobile/tablet/desktop requirement. */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}