/* ==========================================================
   Design tokens — Sevaa Manav
   Brand: white · light blue #7AD1F2 · dark blue #253691
   ========================================================== */

:root {
  color-scheme: light;

  /* Brand */
  --brand-navy: #253691;
  --brand-navy-deep: #1b2872;
  --brand-sky: #7ad1f2;
  --brand-white: #ffffff;

  /* Color — semantic */
  --color-bg: var(--brand-white);
  --color-surface: #f3fafe;
  --color-surface-strong: #e3f5fd;
  --color-text: #141c4a;
  --color-text-muted: #4a557a;
  --color-border: #d4ebf7;
  --color-primary: var(--brand-navy);
  --color-primary-hover: var(--brand-navy-deep);
  --color-on-primary: var(--brand-white);
  --color-accent: var(--brand-sky);
  --color-accent-hover: #a2def6;
  --color-on-accent: var(--brand-navy);
  --color-heading: var(--brand-navy);
  --color-link: var(--brand-navy);
  --color-inverse-bg: var(--brand-navy);
  --color-inverse-text: var(--brand-white);
  --color-inverse-muted: #c9d3f5;
  --color-header-bg: rgb(255 255 255 / 0.9);
  --color-logo-a: var(--brand-navy);
  --color-logo-b: var(--brand-sky);
  --color-success: #13733e;
  --color-danger: #c42b2b;
  --color-whatsapp: #168a45;
  --color-focus: var(--brand-navy);
  --hero-gradient: linear-gradient(160deg, #ffffff 0%, #eef9fe 55%, #d9f2fc 100%);

  /* Typography — fluid */
  --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: clamp(0.78rem, 0.76rem + 0.1vw, 0.82rem);
  --text-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.9rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --text-lg: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
  --text-xl: clamp(1.4rem, 1.25rem + 0.75vw, 1.85rem);
  --text-2xl: clamp(1.8rem, 1.5rem + 1.5vw, 2.75rem);
  --text-3xl: clamp(2.2rem, 1.6rem + 3vw, 3.9rem);
  --leading-tight: 1.15;
  --leading-normal: 1.65;

  /* Spacing — 4px scale */
  --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-24: 6rem;
  --section-space: clamp(3.5rem, 2rem + 6vw, 6.5rem);

  /* Shape & depth */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgb(37 54 145 / 0.08);
  --shadow-md: 0 6px 18px rgb(37 54 145 / 0.1);
  --shadow-lg: 0 18px 40px rgb(37 54 145 / 0.16);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;

  /* Layout */
  --container-max: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 4.5rem;
  --tap: 44px;
}

/* ---------- Dark theme ----------
   Site is locked to the white brand theme via <html data-theme="light">.
   Remove that attribute to follow the visitor's OS dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0b1030;
    --color-surface: #121a45;
    --color-surface-strong: #1a2458;
    --color-text: #e9f1fb;
    --color-text-muted: #aab6d8;
    --color-border: #26316e;
    --color-primary: var(--brand-sky);
    --color-primary-hover: #a2def6;
    --color-on-primary: #0b1030;
    --color-heading: #ffffff;
    --color-link: var(--brand-sky);
    --color-inverse-bg: #152070;
    --color-header-bg: rgb(11 16 48 / 0.88);
    --color-logo-a: #ffffff;
    --color-success: #5fd394;
    --color-danger: #ff8a8a;
    --color-focus: var(--brand-sky);
    --hero-gradient: linear-gradient(160deg, #0b1030 0%, #111a4c 60%, #16255e 100%);
    --shadow-md: 0 6px 18px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 18px 40px rgb(0 0 0 / 0.45);
  }
}

:root[data-theme="dark"] {
  --color-bg: #0b1030;
  --color-surface: #121a45;
  --color-surface-strong: #1a2458;
  --color-text: #e9f1fb;
  --color-text-muted: #aab6d8;
  --color-border: #26316e;
  --color-primary: var(--brand-sky);
  --color-primary-hover: #a2def6;
  --color-on-primary: #0b1030;
  --color-heading: #ffffff;
  --color-link: var(--brand-sky);
  --color-inverse-bg: #152070;
  --color-header-bg: rgb(11 16 48 / 0.88);
  --color-logo-a: #ffffff;
  --color-success: #5fd394;
  --color-danger: #ff8a8a;
  --color-focus: var(--brand-sky);
  --hero-gradient: linear-gradient(160deg, #0b1030 0%, #111a4c 60%, #16255e 100%);
  --shadow-md: 0 6px 18px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 18px 40px rgb(0 0 0 / 0.45);
}