@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* Global visual system. Change --font-ui here when replacing Vazirmatn later. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #0A0A0A;
  --surface: #141414;
  --surface-raised: #222222;
  --surface-accent: #102B2E;
  --surface-success: #0D2B18;
  --surface-warning: #30290A;
  --surface-danger: #321323;
  --surface-purple: #21152F;
  --border: #222222;
  --border-strong: #4B4B4B;
  --text-primary: #F4F4F0;
  --text-secondary: #B7B7B0;
  --text-subtle: #888882;
  --text-inverse: #0A0A0A;

  --accent-acid-lime: #00FF66;
  --accent-electric-magenta: #FF007F;
  --accent-warning-amber: #FFCC00;
  --accent-hyper-cyan: #00E5FF;
  --accent-brutalist-purple: #8A2BE2;

  --interactive: var(--accent-hyper-cyan);
  --interactive-hover: #8AF4FF;
  --focus-ring: var(--accent-hyper-cyan);
  --state-success: var(--accent-acid-lime);
  --state-warning: var(--accent-warning-amber);
  --state-danger: var(--accent-electric-magenta);
  --state-purple: #C58AFF;
  --on-accent: #0A0A0A;

  --font-ui: "Vazirmatn", sans-serif;
  --font-mono: "Cascadia Code", Consolas, "Courier New", monospace;
  --text-xs: .78rem;
  --text-sm: .9rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.35rem;
  --leading-body: 1.85;
  --leading-heading: 1.35;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --content-width: 1160px;
  --content-width-narrow: 760px;
  --line-width: 1px;
  --line-width-strong: 2px;
  --radius-card: 0;
  --radius-control: 0;
  --shadow-card: none;
  --transition-fast: 140ms ease;

  /* Compatibility names used by existing page styles. */
  --color-text: var(--text-primary);
  --color-muted: var(--text-secondary);
  --color-brand: var(--interactive);
  --color-brand-soft: var(--surface-accent);
  --color-on-brand: var(--on-accent);
  --color-error-text: var(--state-danger);
  --color-error-soft: var(--surface-danger);
  --color-success-text: var(--state-success);
  --color-success-soft: var(--surface-success);
  --color-page: var(--canvas);
  --color-surface: var(--surface);
  --color-border: var(--border);
  --font-family-base: var(--font-ui);
  --font-family-brand: var(--font-mono);
}

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

  --canvas: #F4F4F0;
  --surface: #FFFFFF;
  --surface-raised: #DCDCDC;
  --surface-accent: #DDF9FB;
  --surface-success: #D7FFE4;
  --surface-warning: #FFF2B8;
  --surface-danger: #FFE0EF;
  --surface-purple: #EFE2FF;
  --border: #DCDCDC;
  --border-strong: #777777;
  --text-primary: #0A0A0A;
  --text-secondary: #4C4C4C;
  --text-subtle: #666666;
  --text-inverse: #FFFFFF;

  /* Exact palette accents remain available for fills and markers. Text uses
     darker semantic mappings so each state stays readable on the light canvas. */
  --interactive: #00545D;
  --interactive-hover: #003C43;
  --focus-ring: #00545D;
  --state-success: #00632A;
  --state-warning: #705400;
  --state-danger: #A60052;
  --state-purple: #5C2092;
}