/**
 * Signal Console — dual-theme design tokens (RTL-first)
 *
 * Identity: a "connectivity operations console".
 *   · Light: cool canvas, signal-navy text, restrained signal-mint actions
 *   · Dark: deep blue-green canvas, semantic parity with the light theme
 * Font roles: display (Estedad heavy) / body (Vazirmatn) / data (JetBrains Mono for figures & IDs)
 *
 * Fonts are self-hosted under /assets/fonts/{vazirmatn,estedad,jetbrains-mono}.
 */

@layer tokens {

/* Body — Vazirmatn (self-hosted) */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Display — Estedad (self-hosted) */
@font-face {
  font-family: 'Estedad';
  src: url('../fonts/estedad/Estedad-FD-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Estedad';
  src: url('../fonts/estedad/Estedad-FD-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Estedad';
  src: url('../fonts/estedad/Estedad-FD-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Estedad';
  src: url('../fonts/estedad/Estedad-FD-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Estedad';
  src: url('../fonts/estedad/Estedad-FD-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Data face — Latin digits, IDs, money figures (Persian text falls back to Vazirmatn) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono/jetbrains-mono-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF;
}

/* ─────────────────────────────────────────────
   Theme-agnostic tokens (shared by both themes)
   ───────────────────────────────────────────── */
:root {
  --font-sans: 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-display: 'Estedad', 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  --font-data: 'JetBrains Mono', 'Vazirmatn', ui-monospace, 'Cascadia Code', monospace;
  --font-mono: var(--font-data);

  /* Fluid type — compact phones to wide desktop, with a 13px UI floor. */
  --text-xs: clamp(0.8125rem, 0.79rem + 0.1vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.14vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.16vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.06rem + 0.25vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.14rem + 0.45vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 0.75vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.55rem + 1.25vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 1.9vw, 3.25rem);
  --text-5xl: clamp(2.75rem, 2rem + 2.8vw, 4.25rem);

  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.75rem;
  --radius-full: 9999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 200ms;

  /* Material 3 window-size classes used literally in @media rules:
     compact < 600px · medium 600–839px · expanded 840–1023px
     large >= 1024px · content cap 1280px. */
  --breakpoint-compact: 37.5rem;
  --breakpoint-medium: 52.5rem;
  --breakpoint-large: 64rem;

  --touch-min: 2.75rem;
  --touch-comfortable: 3rem;
  --control-sm: var(--touch-min);
  --control-md: var(--touch-comfortable);

  --sidebar-width: 16.5rem;
  --sidebar-collapsed-width: 4.5rem;
  --header-height: 4.25rem;
  --content-max-width: 80rem;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 320;
  --z-overlay: 340;
  --z-sidebar: 360;
  --z-modal: 600;
  --z-toast: 700;
}

/* ─────────────────────────────────────────────
   Light theme (default)
   ───────────────────────────────────────────── */
:root,
[data-theme='light'] {
  color-scheme: light;

  /* Canonical Signal Console palette (mapped one-to-one in DESIGN.md). */
  --color-canvas: #f4f7f8;
  --color-surface: #ffffff;
  --color-navy: #0d2b36;
  --color-signal: #16a58c;
  --color-caution: #b96b1f;
  --color-fault: #c23f4d;

  --color-bg: var(--color-canvas);
  --color-bg-subtle: #edf2f3;
  --color-bg-muted: #dfe8ea;
  --color-surface-raised: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-overlay: rgba(255, 255, 255, 0.92);

  --color-border: #d7e1e3;
  --color-border-strong: #b9c9cc;
  --color-border-subtle: #e9eff0;

  --color-text: var(--color-navy);
  --color-text-secondary: #3f5962;
  --color-text-muted: #586d74;
  --color-text-inverse: #ffffff;
  --color-text-link: #0f7d6c;

  /* Signal mint-teal — primary action color */
  --color-primary: var(--color-signal);
  --color-primary-hover: #118672;
  --color-primary-active: #0d6d5e;
  --color-primary-subtle: #e3f5f1;
  --color-primary-muted: rgba(22, 165, 140, 0.12);
  --color-on-primary: #05241d;
  --color-primary-text: var(--color-on-primary);

  /* Secondary signal is structural navy, never decorative color. */
  --color-accent: var(--color-navy);
  --color-accent-hover: #174555;
  --color-accent-subtle: #e6edef;
  --color-on-accent: #ffffff;
  --color-accent-text: var(--color-on-accent);

  --color-success: var(--color-signal);
  --color-success-hover: #118672;
  --color-success-subtle: #e3f5f1;
  --color-success-text: #0d6d5e;
  --color-on-success: #ffffff;

  --color-warning: var(--color-caution);
  --color-warning-hover: #965415;
  --color-warning-subtle: #fbf0e5;
  --color-warning-text: #874b13;
  --color-on-warning: #ffffff;

  --color-danger: var(--color-fault);
  --color-danger-hover: #9f303c;
  --color-danger-subtle: #f9e9eb;
  --color-danger-text: #942d38;
  --color-on-danger: #ffffff;

  --color-info: #2f5cc9;
  --color-info-subtle: #e9effc;
  --color-info-text: #274ba6;
  --color-on-info: #ffffff;

  --shadow-xs: 0 1px 2px rgba(11, 16, 32, 0.04);
  --shadow-sm: 0 1px 3px rgba(11, 16, 32, 0.05), 0 1px 2px rgba(11, 16, 32, 0.03);
  --shadow-md: 0 8px 24px -12px rgba(11, 16, 32, 0.12);
  --shadow-lg: 0 18px 40px -20px rgba(11, 16, 32, 0.16);
  --shadow-xl: 0 28px 60px -28px rgba(11, 16, 32, 0.2);
  --shadow-inner: inset 0 1px 2px rgba(11, 16, 32, 0.04);
  --shadow-glow: 0 0 0 3px rgba(22, 165, 140, 0.18);
  --shadow-glow-success: 0 0 0 3px rgba(10, 143, 99, 0.16);
  --shadow-glow-danger: 0 0 0 3px rgba(192, 37, 55, 0.16);

  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-bg-strong: rgba(255, 255, 255, 0.94);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-border-subtle: rgba(220, 227, 238, 0.9);
  --glass-blur: 12px;
  --glass-blur-strong: 18px;
  --glass-shadow: 0 12px 40px rgba(11, 16, 32, 0.06);

  --sidebar-bg: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.86);
  --ops-hero-bg: var(--color-navy);
  --nav-item-hover: rgba(22, 165, 140, 0.06);
  --nav-item-active: rgba(22, 165, 140, 0.1);
  --nav-item-active-text: var(--color-primary-active);

  --input-bg: #ffffff;
  --input-border: var(--color-border);
  --input-border-focus: var(--color-primary);
  --input-placeholder: var(--color-text-muted);

  --table-header-bg: #f6f8fc;
  --table-row-hover: rgba(12, 133, 119, 0.04);
  --table-stripe: rgba(245, 247, 251, 0.7);

  --chart-1: var(--color-signal);
  --chart-2: var(--color-navy);
  --chart-3: #0a8f63;
  --chart-4: #c77414;
  --chart-5: #b13a83;
  --chart-6: #6d5ae0;
  --chart-grid: rgba(119, 132, 158, 0.18);
  --chart-text: var(--color-text-secondary);

  --skeleton-base: #e3e9f2;
  --skeleton-shine: #f7f9fd;

  --focus-ring: 0 0 0 3px rgba(22, 165, 140, 0.22);

  --brand-telegram: #2079b0;
  --brand-whatsapp: #128c4b;
  --brand-rubika: #7a3fc0;
  --brand-sms: #5c6a87;
}

/* ─────────────────────────────────────────────
   Dark theme — deep navy console
   ───────────────────────────────────────────── */
[data-theme='dark'] {
  color-scheme: dark;

  --color-canvas: #071d25;
  --color-surface: #0d2b36;
  --color-navy: #0d2b36;
  --color-signal: #16a58c;
  --color-caution: #b96b1f;
  --color-fault: #c23f4d;

  --color-bg: var(--color-canvas);
  --color-bg-subtle: #0a252e;
  --color-bg-muted: #123741;
  --color-surface-raised: #123741;
  --color-surface-elevated: #17424d;
  --color-surface-overlay: rgba(13, 43, 54, 0.94);

  --color-border: #254b56;
  --color-border-strong: #37616b;
  --color-border-subtle: #163842;

  --color-text: #edf7f5;
  --color-text-secondary: #b4c9c9;
  --color-text-muted: #87a3a7;
  --color-text-inverse: #071d25;
  --color-text-link: #4fe3c8;

  /* Bright signal mint on navy */
  --color-primary: #45cfb6;
  --color-primary-hover: #6cdbc6;
  --color-primary-active: var(--color-signal);
  --color-primary-subtle: rgba(69, 207, 182, 0.13);
  --color-primary-muted: rgba(69, 207, 182, 0.18);
  --color-on-primary: #05241d;
  --color-primary-text: var(--color-on-primary);

  --color-accent: #94b4b8;
  --color-accent-hover: #b5cbcd;
  --color-accent-subtle: rgba(148, 180, 184, 0.14);
  --color-on-accent: #071d25;
  --color-accent-text: var(--color-on-accent);

  --color-success: #34d399;
  --color-success-hover: #5ddfae;
  --color-success-subtle: rgba(52, 211, 153, 0.13);
  --color-success-text: #6ee7b7;
  --color-on-success: #05241d;

  --color-warning: #fbbf24;
  --color-warning-hover: #fcd34d;
  --color-warning-subtle: rgba(251, 191, 36, 0.13);
  --color-warning-text: #fcd34d;
  --color-on-warning: #291900;

  --color-danger: #f87171;
  --color-danger-hover: #fca5a5;
  --color-danger-subtle: rgba(248, 113, 113, 0.13);
  --color-danger-text: #fca5a5;
  --color-on-danger: #2b0707;

  --color-info: #93b4fd;
  --color-info-subtle: rgba(147, 180, 253, 0.13);
  --color-info-text: #b4cafe;
  --color-on-info: #091630;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 28px 60px -28px rgba(0, 0, 0, 0.7);
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 0 3px rgba(53, 212, 184, 0.25);
  --shadow-glow-success: 0 0 0 3px rgba(52, 211, 153, 0.22);
  --shadow-glow-danger: 0 0 0 3px rgba(248, 113, 113, 0.22);

  --glass-bg: rgba(18, 26, 46, 0.82);
  --glass-bg-strong: rgba(18, 26, 46, 0.94);
  --glass-border: rgba(51, 67, 107, 0.5);
  --glass-border-subtle: rgba(36, 48, 77, 0.9);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);

  --sidebar-bg: #0e1526;
  --header-bg: rgba(11, 16, 32, 0.86);
  --ops-hero-bg: var(--color-surface-raised);
  --nav-item-hover: rgba(53, 212, 184, 0.08);
  --nav-item-active: rgba(53, 212, 184, 0.14);
  --nav-item-active-text: var(--color-primary);

  --input-bg: #0e1526;
  --input-border: var(--color-border);
  --input-border-focus: var(--color-primary);
  --input-placeholder: var(--color-text-muted);

  --table-header-bg: #0e1526;
  --table-row-hover: rgba(53, 212, 184, 0.05);
  --table-stripe: rgba(14, 21, 38, 0.6);

  --chart-1: #35d4b8;
  --chart-2: #94b4b8;
  --chart-3: #34d399;
  --chart-4: #fbbf24;
  --chart-5: #f472b6;
  --chart-6: #a78bfa;
  --chart-grid: rgba(117, 131, 159, 0.22);
  --chart-text: var(--color-text-secondary);

  --skeleton-base: #16203a;
  --skeleton-shine: #1f2c4d;

  --focus-ring: 0 0 0 3px rgba(53, 212, 184, 0.3);

  --brand-telegram: #54b3e8;
  --brand-whatsapp: #4ad07e;
  --brand-rubika: #b78ae8;
  --brand-sms: #93a1bd;
}

html {
  direction: rtl;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html[dir='ltr'] {
  direction: ltr;
}

:root {
  --inline-start: right;
  --inline-end: left;
  --transform-sidebar-open: translateX(0);
  --transform-sidebar-closed: translateX(100%);
}

html[dir='ltr'] {
  --inline-start: left;
  --inline-end: right;
  --transform-sidebar-open: translateX(0);
  --transform-sidebar-closed: translateX(-100%);
}

/* Data figures — money, traffic, IDs, dates */
.figure,
[data-figure] {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Signature: signal underline for hero figures */
.signal-underline {
  position: relative;
  display: inline-block;
}

.signal-underline::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: -0.3rem;
  width: 100%;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-signal);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}

}