/* ===========================================================================
   IDLife IDN Assessment — DESIGN TOKENS  (v2 · $10B aesthetic)
   Core Visual System (handoff PART IV §P4.M): Blue · Cyan · Violet on deep navy.
   Mirrors the DNA portal palette so the products feel like siblings.
   Space Grotesk (display) + Inter (body).
   =========================================================================== */

:root {  color-scheme: dark;
  /* ── Surfaces (layered depth) ─────────────────────────────────────────── */
  --bg:            #03060f;   /* deepest base */
  --bg-1:          #04091a;   /* primary navy — REQUIRED */
  --bg-2:          #060d20;
  --surface:       #0a1228;   /* card base */
  --surface-2:     #0d1730;
  --surface-3:     #111d3f;
  --surface-hi:    #16234d;

  /* ── Brand accents (Cyan / Blue / Violet) ─────────────────────────────── */
  --teal:          #14e0cb;
  --teal-2:        #0dd9c4;
  --teal-soft:     rgba(20, 224, 203, 0.12);
  --teal-glow:     rgba(20, 224, 203, 0.45);
  --blue:          #5b95ff;
  --blue-2:        #4f8ef7;
  --blue-soft:     rgba(91, 149, 255, 0.12);
  --violet:        #b56cff;
  --violet-2:      #a855f7;
  --violet-soft:   rgba(181, 108, 255, 0.12);

  /* ── Shield (the hero) ────────────────────────────────────────────────── */
  --shield:        #3aebb5;
  --shield-2:      #34e3b0;
  --shield-glow:   rgba(58, 235, 181, 0.40);
  --shield-soft:   rgba(58, 235, 181, 0.08);

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text:          #f4f8ff;
  --text-2:        #c5d0e6;
  --muted:         #8493ad;
  --muted-2:       #5c6987;  --ink-on-brand:  #03081a;   /* ink ON brand gradients (checks, primary btns) */
  /* ── States ───────────────────────────────────────────────────────────── */
  --danger:        #ff6173;
  --danger-soft:   rgba(255, 97, 115, 0.10);
  --warning:       #ffb547;
  --success:       #3aebb5;

  /* ── Borders & lines ──────────────────────────────────────────────────── */
  --border:        rgba(120, 180, 220, 0.12);
  --border-soft:   rgba(255, 255, 255, 0.06);
  --border-hi:     rgba(20, 224, 203, 0.55);
  --hairline:      rgba(255, 255, 255, 0.05);

  /* ── Gradients ────────────────────────────────────────────────────────── */
  --grad-brand:    linear-gradient(135deg, #14e0cb 0%, #4f8ef7 100%);
  --grad-brand-3:  linear-gradient(120deg, #14e0cb 0%, #4f8ef7 52%, #b56cff 100%);
  --grad-text:     linear-gradient(120deg, #ffffff 0%, #9fffef 38%, #8fb8ff 70%, #c9a6ff 100%);
  --grad-shield:   linear-gradient(135deg, #3aebb5 0%, #14e0cb 100%);
  --grad-card:     linear-gradient(180deg, rgba(22,35,77,0.55) 0%, rgba(10,18,40,0.78) 100%);
  --grad-sheen:    linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.10) 55%, transparent 100%);

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-display:  'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ── Spacing scale ────────────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ── Shadows / glows ──────────────────────────────────────────────────── */
  --glow-teal:   0 0 50px rgba(20, 224, 203, 0.30);
  --glow-blue:   0 0 50px rgba(79, 142, 247, 0.26);
  --glow-violet: 0 0 50px rgba(181, 108, 255, 0.24);
  --shadow-sm:   0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-md:   0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 40px 100px rgba(0, 0, 0, 0.55);
  --shadow-float:0 30px 80px rgba(3, 8, 24, 0.65);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  --ease-lux:  cubic-bezier(0.42, 0, 0.12, 1);   /* slow, gradual float — gentle start, soft settle, NO overshoot */
  /* ── Glass ────────────────────────────────────────────────────────────── */
  --glass-bg:   rgba(10, 18, 40, 0.62);
  --glass-blur: blur(40px) saturate(140%);

  /* Semantic fills / lines (theme-swappable) */
  --fill-1:        rgba(255, 255, 255, 0.028);
  --fill-2:        rgba(255, 255, 255, 0.05);
  --fill-hover:    rgba(255, 255, 255, 0.09);
  --track:         rgba(255, 255, 255, 0.07);
  --grid-line:     rgba(255, 255, 255, 0.06);
  --axis-line:     rgba(255, 255, 255, 0.08);
  --well:          rgba(0, 0, 0, 0.30);
  --dot-color:     rgba(255, 255, 255, 0.045);
  --topbar-bg:     linear-gradient(180deg, rgba(4,9,26,0.92), rgba(4,9,26,0.55));
  --tiers-band-bg: linear-gradient(180deg, rgba(8,15,35,0), rgba(8,15,35,0.5));
  --tier-rec-bg:   linear-gradient(180deg, rgba(20,224,203,0.07), rgba(10,18,40,0.82));
  --scrollbar-thumb: rgba(120, 160, 210, 0.28);
  --scrollbar-thumb-hover: rgba(20, 224, 203, 0.55);
  --selection-bg:  rgba(20, 224, 203, 0.28);
  --selection-fg:  #ffffff;

  /* ── Layout widths ────────────────────────────────────────────────────── */
  --w-flow:     720px;    /* one-question-at-a-time + landing/reveal */
  --w-results:  1640px;   /* full-bleed results dashboard cap */
}

/* ===========================================================================
   LIGHT THEME — the IDLife "Core Visual System" (Navy · Blue · Cyan · Violet)
   Airy white→soft-blue canvas, navy ink, saturated brand. Dark stays default.
   =========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --bg:            #f5f9ff;
  --bg-1:          #eef4fd;
  --bg-2:          #e7f0fb;
  --surface:       #ffffff;
  --surface-2:     #f6f9ff;
  --surface-3:     #eef4fd;
  --surface-hi:    #ffffff;

  --teal:          #0fb6c6;
  --teal-2:        #0aa6b6;
  --teal-soft:     rgba(27, 197, 212, 0.12);
  --teal-glow:     rgba(27, 197, 212, 0.30);
  --blue:          #1652f0;
  --blue-2:        #1346d8;
  --blue-soft:     rgba(22, 82, 240, 0.10);
  --violet:        #7c4dff;
  --violet-2:      #6a3df0;
  --violet-soft:   rgba(124, 77, 255, 0.10);

  --shield:        #0bb39a;
  --shield-2:      #09a78f;
  --shield-glow:   rgba(16, 184, 160, 0.28);
  --shield-soft:   rgba(16, 184, 160, 0.10);

  --text:          #0c1736;
  --text-2:        #41506f;
  --muted:         #6c7a98;
  --muted-2:       #9aa6c0;
  --ink-on-brand:  #ffffff;   /* white ink on the saturated blue-led gradient */

  --danger:        #e5484d;
  --danger-soft:   rgba(229, 72, 77, 0.08);
  --warning:       #d98300;
  --success:       #0bb39a;

  --border:        rgba(16, 42, 98, 0.12);
  --border-soft:   rgba(16, 42, 98, 0.08);
  --border-hi:     rgba(22, 82, 240, 0.45);
  --hairline:      rgba(16, 42, 98, 0.08);

  --grad-brand:    linear-gradient(135deg, #1BC5D4 0%, #1652F0 100%);
  --grad-brand-3:  linear-gradient(120deg, #1BC5D4 0%, #1652F0 52%, #7C4DFF 100%);
  --grad-text:     linear-gradient(120deg, #1652F0 0%, #12aecf 48%, #7C4DFF 100%);
  --grad-shield:   linear-gradient(135deg, #14c4b2 0%, #1652F0 100%);
  --grad-card:     linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(244,249,255,0.9) 100%);
  --grad-sheen:    linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);

  --glow-teal:     0 14px 40px rgba(27, 197, 212, 0.22);
  --glow-blue:     0 14px 40px rgba(22, 82, 240, 0.18);
  --glow-violet:   0 14px 40px rgba(124, 77, 255, 0.16);
  --shadow-sm:     0 6px 18px rgba(20, 50, 120, 0.08);
  --shadow-md:     0 16px 44px rgba(20, 50, 120, 0.10);
  --shadow-lg:     0 36px 90px rgba(20, 50, 120, 0.14);
  --shadow-float:  0 24px 70px rgba(20, 50, 120, 0.12);

  --glass-bg:      rgba(255, 255, 255, 0.72);
  --glass-blur:    blur(30px) saturate(150%);

  --fill-1:        rgba(16, 42, 98, 0.04);
  --fill-2:        rgba(16, 42, 98, 0.07);
  --fill-hover:    rgba(16, 42, 98, 0.10);
  --track:         rgba(16, 42, 98, 0.10);
  --grid-line:     rgba(16, 42, 98, 0.10);
  --axis-line:     rgba(16, 42, 98, 0.12);
  --well:          rgba(16, 42, 98, 0.04);
  --dot-color:     rgba(16, 42, 98, 0.05);
  --topbar-bg:     linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.55));
  --tiers-band-bg: linear-gradient(180deg, rgba(255,255,255,0), rgba(231,240,251,0.6));
  --tier-rec-bg:   linear-gradient(180deg, rgba(27,197,212,0.08), rgba(255,255,255,0.92));
  --scrollbar-thumb: rgba(16, 42, 98, 0.22);
  --scrollbar-thumb-hover: rgba(22, 82, 240, 0.45);
  --selection-bg:  rgba(22, 82, 240, 0.18);
  --selection-fg:  #0c1736;
}