/* ============================================================
   Dant Upchaar — Design tokens (single source of truth)
   Brand system: ../branding/DantUpchaar_BrandSystem_2026/DESIGN_SYSTEM.md
   Two hues only: Trust Blue #0052CC + Hygiene Teal #00B8D9.
   Teal #00B8D9 is FILL/DECORATION ONLY — teal text uses the ink/bright
   derivatives. Every text pair is AA-verified by
   tests/contrast.py — add new pairs there in the same commit.
   ============================================================ */

/* ---------- Fonts (self-hosted — zero third-party requests) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2");
}

:root {
  /* ---------- Brand constants (theme-independent) ---------- */
  --blue:        #0052CC;  /* Trust Blue — primary buttons/fills, "Dant" */
  --blue-deep:   #003C96;  /* pressed / gradient anchor */
  --teal:        #00B8D9;  /* Hygiene Teal — FILL/DECORATION ONLY, "Upchaar" */
  --teal-bright: #22C9E6;  /* teal text on dark, glows */
  --teal-ink:    #0A7488;  /* teal text on light */
  --navy:        #0B2A4A;  /* dark surface */
  --navy-deep:   #06203B;  /* dark background */
  --white:       #FFFFFF;
  --tint:        #EAF3FA;  /* light plate for the mark on dark */

  /* Gradient stops — decoration only, never text */
  --g1: #0052CC;
  --g2: #0096C7;
  --g3: #00B8D9;
  /* Mid stop that stays AA for white text — use for gradients BEHIND text */
  --g-text: #0077B0;
  /* Halo behind the 3D hero model — brand alphas, same in both themes */
  --stage-glow: radial-gradient(circle, rgba(0, 184, 217, 0.2) 0%, rgba(0, 82, 204, 0.16) 42%, transparent 68%);
  /* Lifted blue — the TOP stop of the primary button gradient (AA for white text) */
  --blue-lift: #0C5CD9;
  /* Bright blue — blue-as-light on dark surfaces (canonical value of dark --link) */
  --blue-bright: #7EB3FF;

  /* ---------- Type ---------- */
  --font-sans: "Plus Jakarta Sans", Manrope, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.45rem, 1.6rem + 3.8vw, 4.35rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem);
  --fs-h2:      clamp(1.6rem, 1.3rem + 1.3vw, 2.15rem);
  --fs-h3:      clamp(1.17rem, 1.05rem + 0.5vw, 1.35rem);
  --fs-title:   1.125rem;
  --fs-body:    1rem;
  --fs-body-lg: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  --fs-label:   0.875rem;
  --fs-eyebrow: 0.78rem;

  /* ---------- Spacing (8-pt scale — nothing arbitrary) ---------- */
  --s1: 4px;  --s2: 8px;   --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px;  --s8: 48px; --s9: 64px; --s10: 96px;

  /* ---------- Radii ---------- */
  --r-card: 20px;
  --r-tile: 16px;
  --r-input: 12px;
  --r-pill: 999px;

  /* ---------- Layout ---------- */
  --container: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --nav-h: 72px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --t-micro: 150ms;
  --t-std: 240ms;
  --t-enter: 420ms;
}

/* ============================================================
   Context tokens — LIGHT (consumer-warm default)
   Re-declared for dark theme and for .band-navy local contexts,
   so components only ever read the semantic names below.
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg:          #F5F8FC;
  --surface:     #FFFFFF;
  --surface-2:   #EAF3FA;          /* tint plate */
  --text:        #0E2238;          /* Ink */
  --text-2:      #5A6B7B;          /* Slate */
  --accent-text: #0A7488;          /* teal ink — accent words */
  --link:        #0052CC;          /* interactive text */
  --border:      #D6E4F0;
  --border-soft: #E1EAF4;
  --shadow-sm: 0 1px 2px rgba(14, 34, 56, 0.05), 0 2px 8px rgba(14, 34, 56, 0.05);
  --shadow-md: 0 2px 6px rgba(14, 34, 56, 0.06), 0 10px 28px rgba(14, 34, 56, 0.1);
  --shadow-lg: 0 6px 16px rgba(14, 34, 56, 0.1), 0 24px 56px rgba(14, 34, 56, 0.16);
  --glow-a: rgba(0, 82, 204, 0.1);     /* aurora orb tints */
  --glow-b: rgba(0, 184, 217, 0.12);
  --glass-bg: rgba(255, 255, 255, 0.78); /* floating glass cards */
  --tile-hi: rgba(255, 255, 255, 0.65);  /* icon-tile inner highlight */
  --beam-a: #0077B0;                     /* border-beam arc (saturated on light) */
  --beam-b: #00B8D9;
  --page-wash: radial-gradient(1100px 520px at 86% -4%, rgba(0, 184, 217, 0.07), transparent 60%),
               radial-gradient(900px 440px at -8% 8%, rgba(0, 82, 204, 0.06), transparent 55%);
  --nav-bg: rgba(245, 248, 252, 0.82);
  --card-wash: linear-gradient(180deg, rgba(0, 184, 217, 0.05), rgba(0, 82, 204, 0.02));
  --ok-text:   #236B28;
  --warn-text: #8A5C0F;
  --err-text:  #C21F1F;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #051A31;          /* midnight navy */
  --surface:     #0A2746;          /* navy */
  --surface-2:   #103458;          /* navy elevated */
  --text:        #F2F7FC;
  --text-2:      #9FB4CC;          /* Mist */
  --accent-text: #22C9E6;          /* teal bright */
  --link:        #7EB3FF;          /* blue, lifted for AA on navy */
  --border:      rgba(255, 255, 255, 0.14);
  --border-soft: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.32), 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.5);
  --glow-a: rgba(0, 82, 204, 0.3);
  --glow-b: rgba(0, 184, 217, 0.16);
  --glass-bg: rgba(10, 39, 70, 0.72);
  --tile-hi: rgba(255, 255, 255, 0.07);
  --beam-a: #22C9E6;
  --beam-b: #D9F9FF;
  --page-wash: radial-gradient(1100px 520px at 86% -4%, rgba(0, 184, 217, 0.1), transparent 60%),
               radial-gradient(900px 440px at -8% 8%, rgba(0, 82, 204, 0.14), transparent 55%);
  --nav-bg: rgba(5, 26, 49, 0.8);
  --card-wash: linear-gradient(180deg, rgba(34, 201, 230, 0.06), rgba(0, 82, 204, 0.04));
  --ok-text:   #7DD98A;
  --warn-text: #F5C66B;
  --err-text:  #FF9B9B;
}

/* No-JS fallback: honour the OS scheme when theme-boot.js never ran.
   theme-boot.js always sets data-theme, so these only apply JS-less. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:        #051A31;        
    --surface:     #0A2746;        
    --surface-2:   #103458;        
    --text:        #F2F7FC;
    --text-2:      #9FB4CC;
    --accent-text: #22C9E6;
    --link:        #7EB3FF;
    --border:      rgba(255, 255, 255, 0.14);
    --border-soft: rgba(255, 255, 255, 0.08);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.32), 0 10px 28px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.5);
    --glow-a: rgba(0, 82, 204, 0.3);
    --glow-b: rgba(0, 184, 217, 0.16);
    --glass-bg: rgba(10, 39, 70, 0.72);
    --tile-hi: rgba(255, 255, 255, 0.07);
    --beam-a: #22C9E6;
    --beam-b: #D9F9FF;
    --page-wash: radial-gradient(1100px 520px at 86% -4%, rgba(0, 184, 217, 0.1), transparent 60%),
                 radial-gradient(900px 440px at -8% 8%, rgba(0, 82, 204, 0.14), transparent 55%);
    --nav-bg: rgba(5, 26, 49, 0.8);
    --card-wash: linear-gradient(180deg, rgba(34, 201, 230, 0.06), rgba(0, 82, 204, 0.04));
    --ok-text:   #7DD98A;
    --warn-text: #F5C66B;
    --err-text:  #FF9B9B;
  }
}

/* Navy band — a locally-dark context in EITHER theme (Partners voice,
   footer, closing CTA). Components inside read the same semantic names. */
.band-navy {
  color-scheme: dark;
  --bg:          #051A31;          /* midnight navy */
  --surface:     #0A2746;          /* navy */
  --surface-2:   #103458;          /* navy elevated */
  --text:        #F2F7FC;
  --text-2:      #9FB4CC;
  --accent-text: #22C9E6;
  --link:        #7EB3FF;
  --border:      rgba(255, 255, 255, 0.14);
  --border-soft: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.32), 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.5);
  --glow-a: rgba(0, 82, 204, 0.32);
  --glow-b: rgba(0, 184, 217, 0.18);
  --glass-bg: rgba(10, 39, 70, 0.72);
  --tile-hi: rgba(255, 255, 255, 0.07);
  --beam-a: #22C9E6;
  --beam-b: #D9F9FF;
  --page-wash: radial-gradient(1100px 520px at 86% -4%, rgba(0, 184, 217, 0.1), transparent 60%),
               radial-gradient(900px 440px at -8% 8%, rgba(0, 82, 204, 0.14), transparent 55%);
  --card-wash: linear-gradient(180deg, rgba(34, 201, 230, 0.06), rgba(0, 82, 204, 0.04));
  --ok-text:   #7DD98A;
  --warn-text: #F5C66B;
  --err-text:  #FF9B9B;
  background: var(--bg);
  color: var(--text);
}