/*
 * ArshPress design tokens (single source for admin, login and the base theme).
 * Every foreground/background pair below is verified by tools/contrast.js (WCAG AA).
 * Components use only these variables: no raw colors in component rules.
 */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* color: light */
  --arsh-surface: #ffffff;
  --arsh-surface-2: #f5f6fb;
  --arsh-ink: #14162b;
  --arsh-muted: #575b78;
  --arsh-primary: #3f37c9;
  --arsh-primary-hover: #322ba8;
  --arsh-on-primary: #ffffff;
  --arsh-accent: #f2c14e;
  --arsh-accent-text: #8a5a00;
  --arsh-success: #0f7a55;
  --arsh-danger: #b42318;
  --arsh-warning: #8f5f00;
  --arsh-border: #8a8ea8;          /* controls (3:1 on surface) */
  --arsh-line: #e1e3f0;            /* decorative dividers */
  --arsh-menu: #14162b;
  --arsh-on-menu: #e9eaf7;
  --arsh-menu-muted: #b9bcd8;
  --arsh-menu-active: #3f37c9;
  --arsh-focus-ring: rgba(63, 55, 201, 0.28);
  --arsh-on-menu-strong: #ffffff;
  --arsh-overlay-light: rgba(255, 255, 255, 0.08);
  --arsh-overlay-light-2: rgba(255, 255, 255, 0.1);
  --arsh-overlay-dark: rgba(0, 0, 0, 0.28);
  --arsh-glow: rgba(63, 55, 201, 0.14);

  /* typography */
  --arsh-font: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --arsh-text-xs: 0.75rem;   /* 12 */
  --arsh-text-sm: 0.875rem;  /* 14 */
  --arsh-text-md: 1rem;      /* 16 */
  --arsh-text-lg: 1.125rem;  /* 18 */
  --arsh-text-xl: 1.5rem;    /* 24 */
  --arsh-text-2xl: 2rem;     /* 32 */
  --arsh-leading: 1.75;      /* Persian body text needs more air than Latin */
  --arsh-leading-tight: 1.4;

  /* space: 4/8 rhythm */
  --arsh-space-1: 4px;
  --arsh-space-2: 8px;
  --arsh-space-3: 12px;
  --arsh-space-4: 16px;
  --arsh-space-5: 24px;
  --arsh-space-6: 32px;
  --arsh-space-7: 48px;

  /* shape, elevation, motion */
  --arsh-radius-sm: 8px;
  --arsh-radius-md: 12px;
  --arsh-radius-lg: 16px;
  --arsh-radius-pill: 999px;
  --arsh-shadow-1: 0 1px 2px rgba(20, 22, 43, 0.06), 0 1px 3px rgba(20, 22, 43, 0.08);
  --arsh-shadow-2: 0 4px 12px rgba(20, 22, 43, 0.08), 0 2px 4px rgba(20, 22, 43, 0.06);
  --arsh-shadow-3: 0 12px 32px rgba(20, 22, 43, 0.14);
  --arsh-duration: 160ms;
  --arsh-ease: cubic-bezier(0.2, 0, 0, 1);

  /* touch and layout */
  --arsh-target: 44px;
  --arsh-measure: 68ch;
}

/* Dark tokens: used by the login page and the base theme. The dashboard stays light. */
@media (prefers-color-scheme: dark) {
  :root[data-arsh-scheme="auto"],
  .arsh-login,
  .arsh-scheme-auto {
    --arsh-surface: #0f1020;
    --arsh-surface-2: #171932;
    --arsh-ink: #ecedf9;
    --arsh-muted: #a9acc8;
    --arsh-primary: #a8a5ff;
    --arsh-primary-hover: #c3c1ff;
    --arsh-on-primary: #0f1020;
    --arsh-accent-text: #f2c14e;
    --arsh-success: #4ade9a;
    --arsh-danger: #ff8a80;
    --arsh-warning: #f2c14e;
    --arsh-border: #6d7194;
    --arsh-line: #2a2d4d;
    --arsh-focus-ring: rgba(168, 165, 255, 0.35);
    --arsh-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --arsh-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
    --arsh-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.55);
  }
}

/* v2 admin experience (docs/design/admin-v2, direction B). Additive: existing tokens keep their values. */
:root {
  --arsh-canvas: #eceefb;
  --arsh-primary-ink: #2b2599;
  --arsh-primary-tint: #dddbff;
  --arsh-deep: #161047;
  --arsh-deep-2: #251c7c;
  --arsh-hero-end: #3f37c9;
  --arsh-on-deep: #eeedff;
  --arsh-deep-muted: #c3c1f3;
  --arsh-deep-line: rgba(255, 255, 255, 0.14);
  --arsh-on-accent: #2b1d00;
  --arsh-ok-bg: #d8f3e6;   --arsh-ok-ink: #0a5c40;
  --arsh-warn-bg: #ffebbd; --arsh-warn-ink: #6f4700;
  --arsh-bad-bg: #ffdad5;  --arsh-bad-ink: #8e1409;
  --arsh-neu-bg: #e3e4f6;  --arsh-neu-ink: #3a3e66;
  --arsh-scrim: rgba(18, 17, 58, 0.55);
  --arsh-lift: 0 3px 0 var(--arsh-line);
  --arsh-side-w: 264px;
  --arsh-side-w-folded: 76px;
  --arsh-topbar-h: 60px;
  --arsh-gap: 12px;
  --arsh-icon-w: 1.9;
}

/* v2 dark set (explicit user choice in the dashboard; the dashboard follows body.arsh-dark / data-theme). */
:root[data-theme="dark"],
:root[data-arsh-scheme="dark"],
body.arsh-dark {
  --arsh-canvas: #090820;
  --arsh-surface: #14123a;
  --arsh-surface-2: #1c1a4a;
  --arsh-ink: #efeeff;
  --arsh-muted: #b0b2d6;
  --arsh-primary: #a8a5ff;
  --arsh-primary-hover: #c3c1ff;
  --arsh-primary-ink: #d0cfff;
  --arsh-primary-tint: #2c2a78;
  --arsh-on-primary: #0f0e30;
  --arsh-deep: #1d1766;
  --arsh-deep-2: #120e3f;
  --arsh-hero-end: #2f2aa8;
  --arsh-accent-text: #f2c14e;
  --arsh-success: #4ade9a;
  --arsh-danger: #ff8a80;
  --arsh-warning: #f2c14e;
  --arsh-border: #7075a0;
  --arsh-line: #2e2c6a;
  --arsh-focus-ring: rgba(168, 165, 255, 0.45);
  --arsh-ok-bg: #12382c;   --arsh-ok-ink: #7be9b6;
  --arsh-warn-bg: #3d3010; --arsh-warn-ink: #f2c14e;
  --arsh-bad-bg: #42191b;  --arsh-bad-ink: #ffa39b;
  --arsh-neu-bg: #262452;  --arsh-neu-ink: #c9cbe8;
  --arsh-scrim: rgba(0, 0, 0, 0.65);
  --arsh-shadow-3: 0 18px 44px rgba(0, 0, 0, 0.6);
}

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