/* Design tokens — Figma variables collection «TabanBin Tokens». Light = :root; Dark (M9) = :root[data-theme="dark"] and,
   for data-theme="system", the same values under prefers-color-scheme: dark (keep both dark blocks identical — a test checks it). */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-brand-navy: #21365E;
  --color-brand-navy-700: #1A2B4B;
  --color-brand-navy-50: #EEF1F7;
  --color-brand-yellow: #FED408;
  --color-brand-gold: #FDC114;
  --color-brand-amber: #F8AF1E;
  --color-brand-amber-50: #FEF6E4;
  --color-brand-orange: #F49C23;

  --color-gray-50: #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;

  --color-success: #1F9D55;
  --color-success-bg: #E8F6EE;
  --color-warning: #D97706;
  --color-warning-bg: #FEF3E2;
  --color-danger: #DC2626;
  --color-danger-bg: #FDECEC;
  --color-info: #2563EB;
  --color-info-bg: #EAF1FE;

  --color-danger-solid: #DC2626;
  --color-surface-page: #F6F7FA;
  --color-surface-sidebar: #21365E;
  --color-surface-sidebar-hover: #1A2B4B;
  --color-text-brand: #21365E;
  --color-text-on-brand: #FFFFFF;
  --focus-ring: 0 0 0 3px rgba(33, 54, 94, .35);
  --color-surface-card: #FFFFFF;
  --color-border: #E2E8F0;
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #94A3B8;
  --color-text-on-amber: #1A2B4B;          /* text on amber buttons/chips — stays dark navy in both modes */
  --color-link-hover: #1A2B4B;
  --color-overlay: rgba(15, 23, 42, .45);  /* modal / drawer backdrop */
  --color-sidebar-avatar-bg: #F8AF1E;
  --color-sidebar-avatar-fg: #1A2B4B;
  --color-chart-line: #21365E;             /* sparklines / mini charts */
  --color-paper: #FFFFFF;                  /* PDF / document previews stay paper-white in dark mode too */
  --color-paper-text: #0F172A;
  --color-danger-solid-hover: #B91C1C;
  --color-brand-amber-700: #B45309;        /* amber text on amber-50 */
  --color-amber-text: #B7791F;
  --color-amber-border: #FBDCA0;
  --color-danger-border: #F8C9C9;
  --color-success-border: #BFE5CF;
  --color-success-text: #166534;
  --color-info-border: #BFD3FB;
  --color-row-warn: #FFF7EB;
  --color-row-warn-hover: #FFF1DC;
  color-scheme: light;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 56px; --space-11: 64px; --space-12: 80px;

  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);

  --font-family: "Vazirmatn", Tahoma, sans-serif;
  /* text styles: size/line-height/weight */
  --text-display: 700 28px/40px var(--font-family);
  --text-h1: 700 22px/32px var(--font-family);
  --text-h2: 600 18px/28px var(--font-family);
  --text-h3: 600 16px/24px var(--font-family);
  --text-body: 400 14px/24px var(--font-family);
  --text-body-strong: 500 14px/24px var(--font-family);
  --text-small: 400 12px/20px var(--font-family);
  --text-caption: 500 11px/16px var(--font-family);

  /* layout */
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --topbar-height: 64px;
  --content-max: 1360px;

  /* status tones (Badge/Status): label text is gray-800 for every tone; tone = background + dot (Figma 18:618) */
  --tone-neutral-dot: var(--color-gray-500);  --tone-neutral-bg: var(--color-gray-100);
  --tone-blue-dot: var(--color-info);         --tone-blue-bg: var(--color-info-bg);
  --tone-navy-dot: var(--color-brand-navy);   --tone-navy-bg: var(--color-brand-navy-50);
  --tone-amber-dot: var(--color-brand-amber); --tone-amber-bg: var(--color-brand-amber-50);
  --tone-orange-dot: var(--color-warning);    --tone-orange-bg: var(--color-warning-bg);   /* «نارنجی» = warning tone */
  --tone-green-dot: var(--color-success);     --tone-green-bg: var(--color-success-bg);
  --tone-red-dot: var(--color-danger);        --tone-red-bg: var(--color-danger-bg);
}

/* ============ Dark mode ============ */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* values read from the Figma «Dark» mode of «TabanBin Tokens» via the dark frames 499:84492 / 499:85179 / 499:85825 / 499:86417 / 509:4770
     (REST variables endpoint needs a scope the token lacks); «inferred» = not used on any dark frame, chosen to keep WCAG AA */
  --color-brand-navy: #2F4D85;
  --color-brand-navy-700: #3A5C9A;         /* inferred: primary-button hover (lighter on dark) */
  --color-brand-navy-50: #1B2A47;
  --color-brand-amber-50: #2E2412;
  --color-gray-50: #172133;
  --color-gray-100: #1C2739;
  --color-gray-200: #263248;
  --color-gray-300: #34425C;
  --color-gray-400: #64748B;
  --color-gray-500: #7D8BA1;
  --color-gray-600: #A3B0C2;
  --color-gray-700: #C3CCDA;
  --color-gray-800: #DCE2EB;
  --color-gray-900: #E6EBF2;               /* inferred (= text/primary) */
  --color-success: #3DBE77;
  --color-success-bg: #12301F;
  --color-warning: #F0A030;
  --color-warning-bg: #33240E;
  --color-danger: #EE5D60;
  --color-danger-bg: #34171A;
  --color-info: #5B9BFF;
  --color-info-bg: #132544;                /* inferred */
  --color-danger-solid: #C93434;
  --color-surface-page: #0B1220;
  --color-surface-sidebar: #111C33;
  --color-surface-sidebar-hover: #18264A;  /* inferred */
  --color-text-brand: #A9BFEA;
  --color-text-on-brand: #FFFFFF;
  --focus-ring: 0 0 0 3px rgba(169, 191, 234, .35);
  --color-surface-card: #131C2E;
  --color-border: #263248;
  --color-text-primary: #E6EBF2;
  --color-text-secondary: #A3B0C2;
  --color-text-muted: #7A889E;
  --color-danger-solid-hover: #A82A2A;
  --color-brand-amber-700: #F0B44A;
  --color-amber-text: #F0B44A;
  --color-amber-border: #5A4520;
  --color-danger-border: #5A2A2E;
  --color-success-border: #1F5A3A;
  --color-success-text: #3DBE77;
  --color-info-border: #24406E;
  --color-row-warn: #261E10;
  --color-row-warn-hover: #2E2412;
  --color-link-hover: #C9D7F2;
  --color-overlay: rgba(2, 6, 14, .65);
  --color-sidebar-avatar-bg: #2E2412;
  --color-sidebar-avatar-fg: #F49C23;
  --color-chart-line: #64748B;               /* Figma dark KpiCard sparkline stroke */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    /* values read from the Figma «Dark» mode of «TabanBin Tokens» via the dark frames 499:84492 / 499:85179 / 499:85825 / 499:86417 / 509:4770
       (REST variables endpoint needs a scope the token lacks); «inferred» = not used on any dark frame, chosen to keep WCAG AA */
    --color-brand-navy: #2F4D85;
    --color-brand-navy-700: #3A5C9A;         /* inferred: primary-button hover (lighter on dark) */
    --color-brand-navy-50: #1B2A47;
    --color-brand-amber-50: #2E2412;
    --color-gray-50: #172133;
    --color-gray-100: #1C2739;
    --color-gray-200: #263248;
    --color-gray-300: #34425C;
    --color-gray-400: #64748B;
    --color-gray-500: #7D8BA1;
    --color-gray-600: #A3B0C2;
    --color-gray-700: #C3CCDA;
    --color-gray-800: #DCE2EB;
    --color-gray-900: #E6EBF2;               /* inferred (= text/primary) */
    --color-success: #3DBE77;
    --color-success-bg: #12301F;
    --color-warning: #F0A030;
    --color-warning-bg: #33240E;
    --color-danger: #EE5D60;
    --color-danger-bg: #34171A;
    --color-info: #5B9BFF;
    --color-info-bg: #132544;                /* inferred */
    --color-danger-solid: #C93434;
    --color-surface-page: #0B1220;
    --color-surface-sidebar: #111C33;
    --color-surface-sidebar-hover: #18264A;  /* inferred */
    --color-text-brand: #A9BFEA;
    --color-text-on-brand: #FFFFFF;
    --focus-ring: 0 0 0 3px rgba(169, 191, 234, .35);
    --color-surface-card: #131C2E;
    --color-border: #263248;
    --color-text-primary: #E6EBF2;
    --color-text-secondary: #A3B0C2;
    --color-text-muted: #7A889E;
    --color-danger-solid-hover: #A82A2A;
    --color-brand-amber-700: #F0B44A;
    --color-amber-text: #F0B44A;
    --color-amber-border: #5A4520;
    --color-danger-border: #5A2A2E;
    --color-success-border: #1F5A3A;
    --color-success-text: #3DBE77;
    --color-info-border: #24406E;
    --color-row-warn: #261E10;
    --color-row-warn-hover: #2E2412;
    --color-link-hover: #C9D7F2;
    --color-overlay: rgba(2, 6, 14, .65);
    --color-sidebar-avatar-bg: #2E2412;
    --color-sidebar-avatar-fg: #F49C23;
    --color-chart-line: #64748B;               /* Figma dark KpiCard sparkline stroke */
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
  }
}