/* ==========================================================================
   DRAUPR 31.1 — Stitch canonical design tokens
   Single source of truth for palette, typography, spacing, radii, elevation
   and motion. Ported 1:1 from the approved Stitch export
   (`shared_design_tokens` + `application_shell` theme) into local CSS
   custom properties.

   Rules honoured here:
   - zero CDN, zero remote font, zero remote asset
   - Persian-first RTL typography with Vazirmatn shipped in `static/fonts/`
   - legacy variable names are aliased so every pre-existing stylesheet
     inherits the canonical palette without being rewritten by hand
   ========================================================================== */

/* --- Local Vazirmatn (SIL OFL 1.1) ------------------------------------- */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Regular.cdc140628f11.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Medium.dd2193b32cbe.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-SemiBold.9260c1927872.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Bold.7958481fe611.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Black.6cfb460b4140.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Surfaces ------------------------------------------------------- */
  --canvas: #e4e9f2;
  --surface: #ffffff;
  --surface-secondary: #dbe3f0;
  --surface-container: #f0ecf9;
  --surface-container-low: #f5f2ff;
  --surface-container-high: #eae6f4;
  --surface-container-highest: #e4e1ee;
  --surface-bright: #fcf8ff;
  --surface-dim: #dcd8e5;
  --border: #b6c2d4;
  --border-strong: #8fa0ba;
  --outline: #777587;

  /* --- Brand --------------------------------------------------------- */
  --primary: #4f46e5;
  --primary-strong: #3525cd;
  --primary-dark: #3730a3;
  --primary-soft: #eef2ff;
  --primary-container: #4f46e5;
  --on-primary: #ffffff;
  --primary-fixed: #e2dfff;
  --inverse-primary: #c3c0ff;

  /* --- Semantics ------------------------------------------------------ */
  --success: #10b981;
  --success-ink: #047857;
  --success-soft: #ecfdf5;
  --warning: #f59e0b;
  --warning-ink: #b45309;
  --warning-soft: #fffbeb;
  --danger: #ef4444;
  --danger-ink: #b91c1c;
  --danger-soft: #fef2f2;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --info: #3b82f6;
  --info-ink: #1d4ed8;
  --info-soft: #eff6ff;
  --ai-accent: #8b5cf6;
  --ai-ink: #6d28d9;
  --ai-soft: #f5f3ff;

  /* --- Text ----------------------------------------------------------- */
  --text-main: #111827;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --on-surface: #1b1b24;
  --on-surface-variant: #464555;

  /* --- Radii ---------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* --- Layout --------------------------------------------------------- */
  --sidebar-width: 272px;
  --topbar-height: 72px;
  --content-max: 1480px;
  --form-max: 840px;
  --margin-desktop: 32px;
  --margin-mobile: 16px;
  --gutter: 16px;
  --unit: 4px;
  --touch: 44px;

  /* --- Elevation ------------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-3: 0 12px 24px rgba(15, 23, 42, 0.12);
  --shadow-ring: 0 0 0 4px rgba(79, 70, 229, 0.14);
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.35);

  /* --- Typography ----------------------------------------------------- */
  --font-sans: "Vazirmatn", "Segoe UI", Tahoma, "Iranian Sans", sans-serif;
  --fs-display-lg: 36px;
  --lh-display-lg: 48px;
  --fs-headline-lg: 28px;
  --lh-headline-lg: 36px;
  --fs-headline-md: 22px;
  --lh-headline-md: 30px;
  --fs-title-lg: 18px;
  --lh-title-lg: 26px;
  --fs-body-lg: 16px;
  --lh-body-lg: 24px;
  --fs-body-md: 14px;
  --lh-body-md: 20px;
  --fs-label-md: 13px;
  --lh-label-md: 18px;

  /* --- Motion --------------------------------------------------------- */
  --motion: 200ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ==================================================================
     Legacy aliases — every stylesheet written before 31.1 keeps working
     and inherits the canonical Stitch palette automatically.
     ================================================================== */
  --bg: var(--canvas);
  --panel: var(--surface);
  --panel-2: var(--surface-secondary);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --text: var(--text-main);
  --muted: var(--text-secondary);
  --subtle: var(--text-muted);
  --brand: var(--primary);
  --brand-2: var(--primary-dark);
  --brand-soft: var(--primary-soft);
  --nav: var(--surface);
  --nav-2: var(--surface-secondary);
  --ok: var(--success);
  --ok-soft: var(--success-soft);
  --warn: var(--warning-ink);
  --warn-accent: var(--warning);
  --warn-soft: var(--warning-soft);
  --bad: var(--danger);
  --bad-soft: var(--danger-soft);
  --cyan: var(--info);
  --cyan-soft: var(--info-soft);
  --violet: var(--ai-accent);
  --shadow: var(--shadow-2);
  --shadow-high: var(--shadow-3);
  --sidebar: var(--sidebar-width);
  --topbar: var(--topbar-height);
  --ds-content: var(--content-max);
  --ds-form: var(--form-max);
  --ds-touch: var(--touch);
  --ds-focus: var(--focus-ring);
  --finance-tint: #f5f7ff;
  --planning-tint: #f0f9ff;
  --success-tint: var(--success-soft);
  --warning-tint: var(--warning-soft);
  --ai-tint: var(--ai-soft);

  /* stitch-production.css generation-28 aliases */
  --st-bg: var(--canvas);
  --st-bg-deep: #eef1f8;
  --st-surface: var(--surface);
  --st-surface-2: var(--surface-secondary);
  --st-ink: var(--text-main);
  --st-copy: var(--text-secondary);
  --st-muted: var(--text-muted);
  --st-line: var(--border);
  --st-line-strong: var(--border-strong);
  --st-primary: var(--primary);
  --st-primary-2: var(--primary-dark);
  --st-primary-soft: var(--primary-soft);
  --st-cyan: var(--info);
  --st-green: var(--success);
  --st-amber: var(--warning);
  --st-red: var(--danger);
  --st-violet: var(--ai-accent);
  --st-sidebar: var(--sidebar-width);
  --st-topbar: var(--topbar-height);
  --st-r-sm: var(--radius-sm);
  --st-r: var(--radius-lg);
  --st-r-lg: var(--radius-xl);
  --st-shadow: var(--shadow-1), var(--shadow-2);
  --st-shadow-high: var(--shadow-3);
  --st-ring: var(--shadow-ring);

  /* canonical-pages.css aliases */
  --c-accent: var(--primary);
  --c-strong: var(--primary-dark);
  --c-soft: var(--primary-soft);
  --c-a: #312e81;
  --c-b: #6366f1;
}

/* --- Global base ------------------------------------------------------- */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}
html,
body {
  font-family: var(--font-sans);
  background: var(--canvas);
  color: var(--text-main);
}
body {
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection {
  background: var(--primary-fixed);
  color: var(--primary-dark);
}

/* --- Typography scale (Stitch names) ---------------------------------- */
.t-display-lg {
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.t-headline-lg {
  font-size: var(--fs-headline-lg);
  line-height: var(--lh-headline-lg);
  font-weight: 700;
}
.t-headline-md {
  font-size: var(--fs-headline-md);
  line-height: var(--lh-headline-md);
  font-weight: 600;
}
.t-title-lg {
  font-size: var(--fs-title-lg);
  line-height: var(--lh-title-lg);
  font-weight: 600;
}
.t-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}
.t-body-md {
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
}
.t-label-md {
  font-size: var(--fs-label-md);
  line-height: var(--lh-label-md);
  font-weight: 500;
}
.t-muted {
  color: var(--text-muted);
}
.t-secondary {
  color: var(--text-secondary);
}

/* --- LTR islands: codes, money, dates, DOI, formulas ------------------ */
.tabular,
.cell-num,
td.num,
th.num,
.num,
.money,
.code,
.doi {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.ltr-island,
.code,
.doi,
.formula,
.filename {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* --- Inline Material Symbols ------------------------------------------ */
.msi {
  display: inline-block;
  flex: none;
  vertical-align: -0.18em;
  fill: currentColor;
}
.msi-16 { width: 16px; height: 16px; }
.msi-20 { width: 20px; height: 20px; }
.msi-22 { width: 22px; height: 22px; }
.msi-24 { width: 24px; height: 24px; }

/* --- Motion / reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Print ------------------------------------------------------------- */
@media print {
  :root {
    --canvas: #ffffff;
  }
  body {
    background: #fff;
  }
}