/* ==========================================================================
   tokens.css — primitives, semantic tokens, themes
   Layer 1 of 5. Load order: tokens → base → layout → components → print
   Visual direction: Swiss / minimal, trust navy + restrained gold accent.
   ========================================================================== */

/* --- Fonts (self-hosted; print iframe re-declares its own copies) --------- */
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Vazirmatn-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
}
/* Legacy family name kept for saved contract bodies that request "Vazir". */
@font-face {
  font-family: "Vazir";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Vazir";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Vazirmatn-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Vazir";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
}

:root {
  /* --- Primitives: neutral (slate) ---------------------------------------- */
  --slate-0: #ffffff;
  --slate-25: #fafbfd;
  --slate-50: #f4f6fa;
  --slate-100: #e9edf4;
  --slate-200: #dbe1eb;
  --slate-300: #c3ccda;
  --slate-400: #94a1b5;
  --slate-500: #6b7a92;
  --slate-600: #4c5a72;
  --slate-700: #35415a;
  --slate-800: #1e2941;
  --slate-900: #131c30;
  --slate-950: #0b1220;

  /* --- Primitives: brand navy -------------------------------------------- */
  --navy-50: #eef2fc;
  --navy-100: #dde5f8;
  --navy-200: #bccbf1;
  --navy-400: #5c7fd6;
  --navy-500: #3a60c4;
  --navy-600: #2a4bab;
  --navy-700: #1e3a8a;
  --navy-800: #182d6b;
  --navy-900: #0f172a;

  /* --- Primitives: gold accent, status ----------------------------------- */
  --gold-50: #fdf6e7;
  --gold-100: #f8ebcb;
  --gold-300: #e2b765;
  --gold-600: #a16207;
  --gold-700: #85500a;
  --red-50: #fef2f2;
  --red-300: #fca5a5;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --green-600: #15803d;
  --green-400: #4ade80;

  /* --- Semantic: surfaces & text (light) --------------------------------- */
  --bg: var(--slate-50);
  --bg-subtle: var(--slate-100);
  --surface: var(--slate-0);
  --surface-sunken: var(--slate-50);
  --surface-alt: var(--slate-25);
  --field-bg: var(--slate-0);
  --field-bg-readonly: var(--slate-50);
  --ink: var(--slate-900);
  --ink-strong: var(--navy-900);
  --muted: var(--slate-600);
  --muted-soft: var(--slate-500);
  --line: var(--slate-200);
  --line-strong: var(--slate-300);

  /* --- Semantic: interactive -------------------------------------------- */
  --primary: var(--navy-700);
  --primary-hover: var(--navy-600);
  --primary-active: var(--navy-800);
  --on-primary: #ffffff;
  --primary-soft: var(--navy-50);
  --primary-soft-border: var(--navy-200);
  --accent: var(--gold-600);
  --accent-soft: var(--gold-50);
  --accent-soft-border: var(--gold-100);
  --danger: var(--red-600);
  --danger-strong: var(--red-700);
  --danger-soft: var(--red-50);
  --success: var(--green-600);
  --focus-ring: color-mix(in srgb, var(--primary) 55%, transparent);
  --scrim: color-mix(in srgb, var(--slate-950) 48%, transparent);
  --tooltip-bg: var(--slate-900);
  --tooltip-ink: var(--slate-50);

  /* Back-compat aliases (older selectors / inline references) */
  --warn: var(--danger);

  /* --- Spacing scale (density: dense-standard, 4px rhythm) --------------- */
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.375rem; /*  6px */
  --space-3: 0.5rem; /*  8px */
  --space-4: 0.75rem; /* 12px */
  --space-5: 1rem; /* 16px */
  --space-6: 1.5rem; /* 24px */
  --space-7: 2rem; /* 32px */

  --gap-field: var(--space-4);
  --gap-field-row: 0.85rem;
  --panel-pad-block: var(--space-5);
  --panel-pad-inline: var(--space-5);

  /* --- Radius ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- Elevation (sharp, low-spread — Swiss) ----------------------------- */
  --shadow-1: 0 1px 2px color-mix(in srgb, var(--slate-950) 8%, transparent);
  --shadow-2: 0 4px 14px color-mix(in srgb, var(--slate-950) 10%, transparent);
  --shadow-3: 0 18px 44px color-mix(in srgb, var(--slate-950) 20%, transparent);

  /* --- Typography -------------------------------------------------------- */
  --font: "Vazirmatn", "Vazir", "Tahoma", sans-serif;
  --text-2xs: 0.7rem;
  --text-xs: 0.76rem;
  --text-sm: 0.82rem;
  --text-base: 0.88rem;
  --text-md: 0.95rem;
  --text-lg: 1.05rem;
  --text-xl: 1.2rem;
  --leading-tight: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* --- Controls ---------------------------------------------------------- */
  --control-h: 2.5rem;
  --control-h-touch: 2.75rem;
  --control-pad-inline: 0.7rem;
  --tap-min: 2.75rem; /* 44px minimum touch target */

  /* --- Layout ------------------------------------------------------------ */
  --app-max: 1320px;
  --contract-max: 74rem;
  --drawer-width: 22rem;

  /* --- Motion ------------------------------------------------------------ */
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* --- Z-index scale ----------------------------------------------------- */
  --z-sticky: 40;
  --z-popover: 1000;
  --z-tooltip: 1100;
  --z-scrim: 2200;
  --z-drawer: 2210;
  --z-modal: 2500;
  --z-toast: 3000;
  --z-gate: 5000;

  color-scheme: light dark;
}

/* ==========================================================================
   Dark theme — same token names, remapped. Applied automatically by OS
   preference, or forced with <html data-theme="dark" | "light">.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--slate-950);
    --bg-subtle: #0e1627;
    --surface: #121b2d;
    --surface-sunken: #0e1627;
    --surface-alt: #162035;
    --field-bg: #0e1729;
    --field-bg-readonly: #162035;
    --ink: #e8edf7;
    --ink-strong: #f4f7fc;
    --muted: #a3b1c9;
    --muted-soft: #8b9ab4;
    --line: #27334d;
    --line-strong: #374665;

    --primary: var(--navy-400);
    --primary-hover: #7495e0;
    --primary-active: var(--navy-500);
    --on-primary: #0b1220;
    --primary-soft: color-mix(in srgb, var(--navy-400) 16%, transparent);
    --primary-soft-border: color-mix(in srgb, var(--navy-400) 38%, transparent);
    --accent: var(--gold-300);
    --accent-soft: color-mix(in srgb, var(--gold-300) 14%, transparent);
    --accent-soft-border: color-mix(in srgb, var(--gold-300) 34%, transparent);
    --danger: #f87171;
    --danger-strong: var(--red-300);
    --danger-soft: color-mix(in srgb, #f87171 14%, transparent);
    --success: var(--green-400);
    --scrim: color-mix(in srgb, #000 62%, transparent);
    --tooltip-bg: #e8edf7;
    --tooltip-ink: var(--slate-900);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.55);
    --shadow-3: 0 18px 44px rgba(0, 0, 0, 0.65);
  }
}

[data-theme="dark"] {
  --bg: var(--slate-950);
  --bg-subtle: #0e1627;
  --surface: #121b2d;
  --surface-sunken: #0e1627;
  --surface-alt: #162035;
  --field-bg: #0e1729;
  --field-bg-readonly: #162035;
  --ink: #e8edf7;
  --ink-strong: #f4f7fc;
  --muted: #a3b1c9;
  --muted-soft: #8b9ab4;
  --line: #27334d;
  --line-strong: #374665;

  --primary: var(--navy-400);
  --primary-hover: #7495e0;
  --primary-active: var(--navy-500);
  --on-primary: #0b1220;
  --primary-soft: color-mix(in srgb, var(--navy-400) 16%, transparent);
  --primary-soft-border: color-mix(in srgb, var(--navy-400) 38%, transparent);
  --accent: var(--gold-300);
  --accent-soft: color-mix(in srgb, var(--gold-300) 14%, transparent);
  --accent-soft-border: color-mix(in srgb, var(--gold-300) 34%, transparent);
  --danger: #f87171;
  --danger-strong: var(--red-300);
  --danger-soft: color-mix(in srgb, #f87171 14%, transparent);
  --success: var(--green-400);
  --scrim: color-mix(in srgb, #000 62%, transparent);
  --tooltip-bg: #e8edf7;
  --tooltip-ink: var(--slate-900);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 18px 44px rgba(0, 0, 0, 0.65);

  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;
}

/* ==========================================================================
   Brand themes (bank skins) — data-brand on <html>
   Overrides primary palette; light/dark surface tokens stay intact.
   ========================================================================== */

html[data-brand="saderat"] {
  --brand-primary: #112b6d;
  --brand-primary-hover: #1a3a8f;
  --brand-primary-active: #0d2258;
  --brand-on-primary: #ffffff;
  --brand-soft: #e8eef8;
  --brand-soft-border: #b7c5e0;
  --brand-ink: #112b6d;

  --navy-50: #e8eef8;
  --navy-100: #d4deef;
  --navy-200: #b7c5e0;
  --navy-400: #4a6bb0;
  --navy-500: #2a4a8f;
  --navy-600: #1a3a8f;
  --navy-700: #112b6d;
  --navy-800: #0d2258;
  --navy-900: #0a1a45;

  --primary: var(--brand-primary);
  --primary-hover: var(--brand-primary-hover);
  --primary-active: var(--brand-primary-active);
  --on-primary: var(--brand-on-primary);
  --primary-soft: var(--brand-soft);
  --primary-soft-border: var(--brand-soft-border);
  --ink-strong: var(--brand-ink);
  --accent: var(--brand-primary);
  --accent-soft: var(--brand-soft);
  --accent-soft-border: var(--brand-soft-border);
}

@media (prefers-color-scheme: dark) {
  html[data-brand="saderat"]:not([data-theme="light"]) {
    --primary: #6b8fd4;
    --primary-hover: #8aa7e0;
    --primary-active: #4a6bb0;
    --on-primary: #0b1220;
    --primary-soft: color-mix(in srgb, #6b8fd4 16%, transparent);
    --primary-soft-border: color-mix(in srgb, #6b8fd4 38%, transparent);
    --accent: #8aa7e0;
    --accent-soft: color-mix(in srgb, #8aa7e0 14%, transparent);
    --accent-soft-border: color-mix(in srgb, #8aa7e0 34%, transparent);
    --ink-strong: #e8edf7;
  }
}

html[data-brand="saderat"][data-theme="dark"] {
  --primary: #6b8fd4;
  --primary-hover: #8aa7e0;
  --primary-active: #4a6bb0;
  --on-primary: #0b1220;
  --primary-soft: color-mix(in srgb, #6b8fd4 16%, transparent);
  --primary-soft-border: color-mix(in srgb, #6b8fd4 38%, transparent);
  --accent: #8aa7e0;
  --accent-soft: color-mix(in srgb, #8aa7e0 14%, transparent);
  --accent-soft-border: color-mix(in srgb, #8aa7e0 34%, transparent);
  --ink-strong: #e8edf7;
}

html[data-brand="mellat"] {
  --brand-primary: #ed1b2f;
  --brand-primary-hover: #f43d4e;
  --brand-primary-active: #c41628;
  --brand-on-primary: #ffffff;
  --brand-soft: #fde8ea;
  --brand-soft-border: #f5b3b9;
  --brand-ink: #52595b;
  --brand-secondary: #52595b;

  --navy-50: #fde8ea;
  --navy-100: #f9d0d4;
  --navy-200: #f5b3b9;
  --navy-400: #f43d4e;
  --navy-500: #ed1b2f;
  --navy-600: #d4182a;
  --navy-700: #c41628;
  --navy-800: #a11222;
  --navy-900: #7a0e1a;

  --primary: var(--brand-primary);
  --primary-hover: var(--brand-primary-hover);
  --primary-active: var(--brand-primary-active);
  --on-primary: var(--brand-on-primary);
  --primary-soft: var(--brand-soft);
  --primary-soft-border: var(--brand-soft-border);
  --ink-strong: var(--brand-ink);
  --accent: var(--brand-primary);
  --accent-soft: var(--brand-soft);
  --accent-soft-border: var(--brand-soft-border);
}

@media (prefers-color-scheme: dark) {
  html[data-brand="mellat"]:not([data-theme="light"]) {
    --primary: #ff6b7a;
    --primary-hover: #ff8a96;
    --primary-active: #ed1b2f;
    --on-primary: #1a0a0c;
    --primary-soft: color-mix(in srgb, #ff6b7a 16%, transparent);
    --primary-soft-border: color-mix(in srgb, #ff6b7a 38%, transparent);
    --accent: #ff8a96;
    --accent-soft: color-mix(in srgb, #ff8a96 14%, transparent);
    --accent-soft-border: color-mix(in srgb, #ff8a96 34%, transparent);
    --ink-strong: #f3e8ea;
  }
}

html[data-brand="mellat"][data-theme="dark"] {
  --primary: #ff6b7a;
  --primary-hover: #ff8a96;
  --primary-active: #ed1b2f;
  --on-primary: #1a0a0c;
  --primary-soft: color-mix(in srgb, #ff6b7a 16%, transparent);
  --primary-soft-border: color-mix(in srgb, #ff6b7a 38%, transparent);
  --accent: #ff8a96;
  --accent-soft: color-mix(in srgb, #ff8a96 14%, transparent);
  --accent-soft-border: color-mix(in srgb, #ff8a96 34%, transparent);
  --ink-strong: #f3e8ea;
}

/* Eghtesad Novin (EN Bank): primary #9564D4, on-primary white.
   Muted secondary accent: deeper purple #6E45A8 (hover/active/ink contrast). */
html[data-brand="eghtesad-novin"] {
  --brand-primary: #9564d4;
  --brand-primary-hover: #a87bdb;
  --brand-primary-active: #6e45a8;
  --brand-on-primary: #ffffff;
  --brand-soft: #f3ecfa;
  --brand-soft-border: #d4bfef;
  --brand-ink: #6e45a8;

  --navy-50: #f3ecfa;
  --navy-100: #e8d9f6;
  --navy-200: #d4bfef;
  --navy-400: #b794e8;
  --navy-500: #a87bdb;
  --navy-600: #9564d4;
  --navy-700: #7d4fc0;
  --navy-800: #6e45a8;
  --navy-900: #4f2f7a;

  --primary: var(--brand-primary);
  --primary-hover: var(--brand-primary-hover);
  --primary-active: var(--brand-primary-active);
  --on-primary: var(--brand-on-primary);
  --primary-soft: var(--brand-soft);
  --primary-soft-border: var(--brand-soft-border);
  --ink-strong: var(--brand-ink);
  --accent: var(--brand-primary);
  --accent-soft: var(--brand-soft);
  --accent-soft-border: var(--brand-soft-border);
}

@media (prefers-color-scheme: dark) {
  html[data-brand="eghtesad-novin"]:not([data-theme="light"]) {
    --primary: #b794e8;
    --primary-hover: #c9aef0;
    --primary-active: #9564d4;
    --on-primary: #0b1220;
    --primary-soft: color-mix(in srgb, #b794e8 16%, transparent);
    --primary-soft-border: color-mix(in srgb, #b794e8 38%, transparent);
    --accent: #c9aef0;
    --accent-soft: color-mix(in srgb, #c9aef0 14%, transparent);
    --accent-soft-border: color-mix(in srgb, #c9aef0 34%, transparent);
    --ink-strong: #e8edf7;
  }
}

html[data-brand="eghtesad-novin"][data-theme="dark"] {
  --primary: #b794e8;
  --primary-hover: #c9aef0;
  --primary-active: #9564d4;
  --on-primary: #0b1220;
  --primary-soft: color-mix(in srgb, #b794e8 16%, transparent);
  --primary-soft-border: color-mix(in srgb, #b794e8 38%, transparent);
  --accent: #c9aef0;
  --accent-soft: color-mix(in srgb, #c9aef0 14%, transparent);
  --accent-soft-border: color-mix(in srgb, #c9aef0 34%, transparent);
  --ink-strong: #e8edf7;
}