/* Anellix design tokens v1 (2026-10-13). Light is the default; dark via [data-theme="dark"] or system preference.
   Contrast checked (WCAG AA): ink on bg 15.9, muted on bg 5.8, white on blue 5.1, teal TEXT uses --accent-text (never raw teal on white). */

:root,
:root[data-theme="light"] {
  color-scheme: light;
  /* surfaces and text */
  --bg: #F5F7FC;
  --surface: #FFFFFF;
  --surface-2: #EEF2FA;
  --line: #DCE3F0;
  --text: #0B1B3A;
  --muted: #53617D;
  /* brand */
  --primary: #1F63F0;
  --primary-hover: #1750C8;
  --on-primary: #FFFFFF;
  --accent: #10B3A3;          /* fills, icons, gradients only */
  --accent-text: #0A7468;     /* teal used as text on light surfaces */
  --soft: #E8EFFE;            /* tint behind primary */
  --gradient-link: linear-gradient(135deg, #1F63F0 0%, #10B3A3 100%);
  /* semantic (text colour sits on its own tint) */
  --success: #0A6B3F;  --success-bg: #E4F6EC;
  --warning: #8A5A00;  --warning-bg: #FFF1D6;
  --danger:  #B42318;  --danger-bg:  #FDECEA;
  --focus: #1F63F0;
  /* product accents: equal lightness so a family reads as one. Only ERP is real; others are placeholders. */
  --product-erp: #10B3A3;  --product-erp-text: #0A7468;
  --product-2: #8B5CF6;    --product-3: #F59E0B;   --product-4: #EC4899;   /* legacy placeholders */
  --product-survey: #0EA5E9; --product-retail: #F59E0B; --product-clinic: #EC4899; --product-school: #8B5CF6; --product-hospital: #F97316;
  /* shadows (light mode only; dark uses borders) */
  --shadow-sm: 0 1px 2px rgba(11, 27, 58, .06);
  --shadow-md: 0 6px 20px rgba(11, 27, 58, .08);
  --shadow-lg: 0 18px 48px rgba(11, 27, 58, .12);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09112A;
  --surface: #101B3A;
  --surface-2: #14224A;
  --line: #22305A;
  --text: #EAF0FF;
  --muted: #9DB0D6;
  --primary: #4C86FF;
  --primary-hover: #6B9BFF;
  --on-primary: #09112A;      /* white on this blue is only 3.4:1, so use dark text */
  --accent: #2DD4BF;
  --accent-text: #2DD4BF;
  --soft: #14224A;
  --gradient-link: linear-gradient(135deg, #4C86FF 0%, #2DD4BF 100%);
  --success: #5FD39A;  --success-bg: #0F2A22;
  --warning: #F2B705;  --warning-bg: #2B2208;
  --danger:  #FF8A80;  --danger-bg:  #2E1414;
  --focus: #6B9BFF;
  --product-erp-text: #2DD4BF;
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #09112A; --surface: #101B3A; --surface-2: #14224A; --line: #22305A;
    --text: #EAF0FF; --muted: #9DB0D6;
    --primary: #4C86FF; --primary-hover: #6B9BFF; --on-primary: #09112A;
    --accent: #2DD4BF; --accent-text: #2DD4BF; --soft: #14224A;
    --gradient-link: linear-gradient(135deg, #4C86FF 0%, #2DD4BF 100%);
    --success: #5FD39A; --success-bg: #0F2A22; --warning: #F2B705; --warning-bg: #2B2208;
    --danger: #FF8A80; --danger-bg: #2E1414; --focus: #6B9BFF; --product-erp-text: #2DD4BF;
    --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
  }
}

:root {
  /* type */
  --font-head: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-urdu: "Noto Nastaliq Urdu", serif;       /* Urdu pages later, with dir="rtl" */
  --fs-hero: clamp(2.25rem, 5vw + .5rem, 3.75rem);
  --fs-h1:   clamp(2rem, 4vw + .5rem, 3rem);
  --fs-h2:   clamp(1.5rem, 2.5vw + .5rem, 2.25rem);
  --fs-h3:   1.25rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-caption: .75rem;
  --lh-tight: 1.15;  --lh-body: 1.6;
  --tracking-head: -.02em;
  /* spacing, 4px base */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem;   --sp-7: 3rem;  --sp-8: 4rem;   --sp-9: 6rem; --sp-10: 8rem;
  /* shape */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
  --border: 1px solid var(--line);
  /* layout (breakpoints: 640 / 768 / 1024 / 1280) */
  --container: 1200px; --container-narrow: 760px; --gutter: clamp(1rem, 4vw, 2rem);
  /* motion */
  --dur-fast: 120ms; --dur-base: 240ms; --dur-slow: 480ms; --dur-story: 1200ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  /* stacking */
  --z-header: 50; --z-sticky-cta: 60; --z-modal: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-story: 0ms; }
}