/**
 * px-ds-tokens.css — Wave 0 Stitch design-system TOKENS (ParsExam)
 *
 * Source of visual truth: Stitch parsexam_admin/DESIGN.md
 * Namespace: --px-* only (safe; does not override legacy --color-* in shared.css)
 *
 * Wave 0: foundations only. Do not link this from IELTS runners.
 * Future waves opt-in via admin/public shells that intentionally consume --px-*.
 *
 * Fonts: local Vazirmatn/Vazir via shared-fonts.css — never Google Fonts.
 * English/numeric/code: system UI / monospace stacks (no Inter CDN).
 */

:root {
  /* ── Brand / primary (deep professional blue) ───────────────── */
  --px-primary: #1e40af;
  --px-primary-deep: #00288e;
  --px-primary-container: #1e40af;
  --px-on-primary: #ffffff;
  --px-on-primary-container: #a8b8ff;
  --px-primary-fixed: #dde1ff;
  --px-primary-fixed-dim: #b8c4ff;
  --px-surface-tint: #3755c3;

  /* ── Surfaces / background (light only — Warmth Pass: avoid sterile gray) */
  --px-bg: #f4f7fc;
  --px-bg-alt: #f0f4ff;
  --px-bg-warm: #f3f6fb;
  --px-surface: #ffffff;
  --px-surface-lowest: #ffffff;
  --px-surface-low: #eff4ff;
  --px-surface-container: #e5eeff;
  --px-surface-high: #dce9ff;
  --px-surface-highest: #d3e4fe;
  --px-surface-dim: #cbdbf5;
  --px-surface-variant: #d3e4fe;
  /* Soft tinted panel fills (perceptible as warmth, not saturation) */
  --px-surface-student: #f7faff;
  --px-surface-success-soft: #f3fbf7;
  --px-surface-warning-soft: #fffbf3;
  --px-surface-flag-soft: #fff8f3;

  /* ── Text ───────────────────────────────────────────────────── */
  --px-text: #0b1c30;
  --px-text-muted: #444653;
  --px-on-surface: #0b1c30;
  --px-on-surface-variant: #444653;
  --px-on-background: #0b1c30;
  --px-text-inverse: #ffffff;

  /* ── Borders / outline (blue-tinted neutrals, not cold gray-only) */
  --px-border: #d7e2f3;
  --px-border-subtle: #e3ebf7;
  --px-border-strong: #b8c7e0;
  --px-border-accent: #bfdbfe;
  --px-border-success: #bbf7d0;
  --px-border-warning: #fde68a;
  --px-border-error: #fecaca;
  --px-border-flag: #fdba74;
  --px-outline: #757684;
  --px-outline-variant: #c4c5d5;

  /* ── Secondary / tertiary ───────────────────────────────────── */
  --px-secondary: #565e74;
  --px-on-secondary: #ffffff;
  --px-secondary-container: #dae2fd;
  --px-on-secondary-container: #5c647a;
  --px-tertiary: #00563a;
  --px-on-tertiary: #ffffff;
  --px-tertiary-container: #00563a;
  --px-on-tertiary-container: #5bcf9e;

  /* ── Semantic ───────────────────────────────────────────────── */
  --px-success: #059669;
  --px-success-bg: #d1fae5;
  --px-success-text: #065f46;
  --px-warning: #d97706;
  --px-warning-bg: #fef3c7;
  --px-warning-text: #92400e;
  --px-error: #ba1a1a;
  --px-error-bg: #ffdad6;
  --px-error-text: #93000a;
  --px-info: #0284c7;
  --px-info-bg: #e0f2fe;
  --px-info-text: #075985;

  /* ── Inverse (rare: dark chips / inverse surfaces) ──────────── */
  --px-inverse-surface: #213145;
  --px-inverse-on-surface: #eaf1ff;
  --px-inverse-primary: #b8c4ff;

  /* ── Typography families ────────────────────────────────────── */
  --px-font-persian: 'Vazirmatn', 'Vazir', Tahoma, sans-serif;
  --px-font-ui: 'Vazirmatn', 'Vazir', Tahoma, sans-serif;
  --px-font-meta: system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --px-font-code: ui-monospace, 'Cascadia Code', 'Consolas', 'Courier New', monospace;

  /* ── Type scale (DESIGN.md) ─────────────────────────────────── */
  --px-text-display-lg-size: 30px;
  --px-text-display-lg-weight: 700;
  --px-text-display-lg-line: 42px;

  --px-text-display-md-size: 24px;
  --px-text-display-md-weight: 700;
  --px-text-display-md-line: 34px;

  --px-text-title-lg-size: 20px;
  --px-text-title-lg-weight: 600;
  --px-text-title-lg-line: 28px;

  --px-text-title-md-size: 18px;
  --px-text-title-md-weight: 600;
  --px-text-title-md-line: 26px;

  --px-text-body-lg-size: 16px;
  --px-text-body-lg-weight: 400;
  --px-text-body-lg-line: 24px;

  --px-text-body-md-size: 14px;
  --px-text-body-md-weight: 400;
  --px-text-body-md-line: 22px;

  --px-text-label-size: 13px;
  --px-text-label-weight: 500;
  --px-text-label-line: 18px;

  --px-text-code-size: 13px;
  --px-text-code-weight: 400;
  --px-text-code-line: 20px;

  /* ── Spacing ────────────────────────────────────────────────── */
  --px-space-1: 4px;
  --px-space-2: 8px;
  --px-space-3: 12px;
  --px-space-4: 16px;
  --px-space-5: 20px;
  --px-space-6: 24px;
  --px-space-8: 32px;
  --px-space-10: 40px;
  --px-space-12: 48px;

  --px-gutter: 24px;
  --px-component-gap: 12px;
  --px-margin-mobile: 16px;
  --px-margin-desktop: 32px;

  --px-container-max: 1920px;
  --px-sidebar-width: 280px;
  --px-sidebar-collapsed: 80px;

  /* ── Radius (restrained) ────────────────────────────────────── */
  --px-radius-sm: 0.125rem;   /* 2px */
  --px-radius: 0.25rem;       /* 4px — controls */
  --px-radius-md: 0.375rem;   /* 6px */
  --px-radius-lg: 0.5rem;     /* 8px — cards/modals */
  --px-radius-xl: 0.75rem;
  --px-radius-full: 9999px;

  /* ── Elevation (Warmth: soft depth, not flat gray or heavy legacy) */
  --px-shadow-none: none;
  --px-shadow-sm: 0 1px 3px rgba(15, 40, 90, 0.05), 0 1px 2px rgba(15, 40, 90, 0.04);
  --px-shadow-card: 0 2px 10px rgba(15, 40, 90, 0.06);
  --px-shadow-level2: 0 4px 14px rgba(15, 40, 90, 0.08);
  --px-shadow-hover: 0 8px 22px rgba(15, 40, 90, 0.11);
  --px-shadow-primary: 0 4px 14px rgba(30, 64, 175, 0.28);
  --px-shadow-focus: 0 0 0 2px rgba(30, 64, 175, 0.28);

  /* ── Motion / micro-interaction (idle professional, alive on interact) */
  --px-transition-fast: 120ms ease;
  --px-transition: 180ms ease;
  --px-lift: translateY(-2px);
  --px-press: translateY(1px) scale(0.985);

  /* ── Breakpoints (documentation; use in @media literals) ────── */
  /* mobile: max 480 | tablet: 768–1024 | desktop: 1366+ */

  /* ── Touch ──────────────────────────────────────────────────── */
  --px-touch-min: 44px;

  /* ── Z-index scale (shell/modals; future waves) ──────────────── */
  --px-z-base: 1;
  --px-z-sticky: 40;
  --px-z-sidebar: 100;
  --px-z-drawer: 200;
  --px-z-modal: 300;
  --px-z-toast: 400;
}