/* ==========================================================================
   KHWARAZM - design tokens
   Values are taken verbatim from the approved UI prototype. Nothing in the
   application hard-codes a colour: every rule below is referenced by name.
   Theme is selected by the data-theme attribute on <html>, written by PHP on
   the first paint from the khw_theme cookie, so the page never flashes.
   ========================================================================== */

:root,
[data-theme="light"] {
  /* Surfaces */
  --bg: #F3F5F8;
  --bg-alt: #E9EDF2;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --surface-3: #EEF2F6;

  /* Text and lines */
  --ink: #121A24;
  --ink-2: #3A4756;
  --muted: #697786;
  --border: #DBE1E8;
  --border-2: #C2CBD5;

  /* Brand */
  --navy: #0A2240;
  --navy-2: #123159;
  --blue: #1B5FA8;
  --blue-hover: #164E8B;
  --teal: #0E8F89;
  --on-navy: #E9EFF6;
  --navy-mute: #92A8C4;

  /* Status */
  --success: #166F4A;
  --warning: #8A5D00;
  --error: #AE2318;
  --info: #1B5FA8;
  --success-bg: #E4F2EA;
  --warning-bg: #FBF1DA;
  --error-bg: #FAE8E6;
  --info-bg: #E7F0FA;

  /* Effects */
  --ring: rgba(27, 95, 168, .30);
  --shadow: 0 1px 2px rgba(16, 28, 44, .06), 0 8px 24px rgba(16, 28, 44, .06);
  --shadow-sm: 0 1px 2px rgba(16, 28, 44, .12);
  --grid-line: rgba(18, 26, 36, .06);

  /* Contrast pair used on navy panels */
  --on-navy-border: rgba(255, 255, 255, .13);
  --on-navy-border-2: rgba(255, 255, 255, .30);
  --on-navy-fill: rgba(255, 255, 255, .045);
  --on-navy-fill-2: rgba(255, 255, 255, .07);

  /* Type */
  --font: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0A1016;
  --bg-alt: #0E161E;
  --surface: #111A23;
  --surface-2: #16212C;
  --surface-3: #1B2935;

  --ink: #E6EDF4;
  --ink-2: #C3CFDA;
  --muted: #8A98A7;
  --border: #22303D;
  --border-2: #31424F;

  --navy: #08121D;
  --navy-2: #102131;
  --blue: #4E9BE6;
  --blue-hover: #78B4EF;
  --teal: #2FBDB5;
  --on-navy: #E6EDF4;
  --navy-mute: #7E93AB;

  --success: #4CC38A;
  --warning: #E0B252;
  --error: #F2776B;
  --info: #4E9BE6;
  --success-bg: #10231B;
  --warning-bg: #241D0E;
  --error-bg: #2A1513;
  --info-bg: #0F1F2E;

  --ring: rgba(78, 155, 230, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --grid-line: rgba(230, 237, 244, .07);
  color-scheme: dark;
}

/* Persian and Arabic switch the family only. Sizes, weights and rhythm are
   identical in all three languages. Font files are not shipped; see
   assets/fonts/README.txt to add Vazirmatn locally. */
[lang="fa"],
[lang="ar"],
[data-lang="fa"],
[data-lang="ar"] {
  --font: "Vazirmatn", "IRANSans", "Noto Naskh Arabic", Tahoma, "Segoe UI", sans-serif;
}

/* Spacing scale - 4px base, as documented in the prototype handoff screen. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii: the design uses a very small, deliberate range. */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius: 4px;
  --radius-md: 5px;
  --radius-lg: 6px;

  /* Layout */
  --container: 1280px;
  --container-narrow: 1180px;
  --page-pad: clamp(16px, 3vw, 32px);
  --header-h: 72px;
  --admin-header-h: 64px;
  --admin-side-w: 250px;

  /* Type scale */
  --fs-display: clamp(34px, 4.6vw, 58px);
  --fs-h1: clamp(28px, 3.4vw, 40px);
  --fs-h2: clamp(24px, 2.6vw, 34px);
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-sm: 14.5px;
  --fs-xs: 13px;
  --fs-mono-label: 11px;
  --lh-body: 1.6;
}

/* Motion is limited to four short, purposeful animations. */
@keyframes khwSpin { to { transform: rotate(360deg); } }
@keyframes khwPulse { 0%, 100% { opacity: .30; } 50% { opacity: 1; } }
@keyframes khwRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes khwFade { from { opacity: 0; } to { opacity: 1; } }

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