/*
 * KoraSafe Design System
 * Single source of truth for typography, colors, spacing, and effects.
 * Every page and the app import this file. Nothing is defined elsewhere.
 *
 * Usage:
 *   Website pages: <link rel="stylesheet" href="/css/design-system.css">
 *   App:           imported via app.html <link>
 *   Admin pages:   imported via admin-shared.css @import
 *   Components:    JS reads from window.KORASAFE_DS or CSS variables
 */


/* ═══════════════════════════════════════════════════════════════════════
   1. FONTS
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Single font family stack — Inter for both display and body. Geist was
     introduced briefly for the home refresh and rolled back per design call:
     the rest of the site uses Inter and we want it consistent. */
  --ds-font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
}



/* ═══════════════════════════════════════════════════════════════════════
   2. TYPE SCALE
   Sizes, weights, line heights, and letter spacing for every level.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Type scale — Glean-inspired. Lighter weights, tighter tracking, more
     breathing room. Owns every heading size/weight/leading/tracking value
     used on the site. Pages MUST NOT hardcode font-family, font-weight,
     letter-spacing, or line-height on headings; reference the token. */

  /* Title — page hero banners only */
  --ds-title-size: 3.25rem;
  --ds-title-weight: 600;
  --ds-title-leading: 1.1;
  --ds-title-tracking: -0.03em;

  /* H1 — section headings */
  --ds-h1-size: 2.25rem;
  --ds-h1-weight: 500;
  --ds-h1-leading: 1.15;
  --ds-h1-tracking: -0.025em;

  /* H2 — sub-section headings */
  --ds-h2-size: 1.5rem;
  --ds-h2-weight: 500;
  --ds-h2-leading: 1.25;
  --ds-h2-tracking: -0.02em;

  /* H3 — card titles, list headings */
  --ds-h3-size: 1.125rem;
  --ds-h3-weight: 500;
  --ds-h3-leading: 1.35;
  --ds-h3-tracking: -0.015em;

  /* H4 — labels, badges, overlines */
  --ds-h4-size: 0.875rem;
  --ds-h4-weight: 600;
  --ds-h4-leading: 1.4;
  --ds-h4-tracking: -0.005em;

  /* Body */
  --ds-body-size: 1rem;
  --ds-body-weight: 400;
  --ds-body-leading: 1.6;

  /* Small */
  --ds-small-size: 0.875rem;
  --ds-small-weight: 400;
  --ds-small-leading: 1.5;

  /* Caption */
  --ds-caption-size: 0.75rem;
  --ds-caption-weight: 500;
  --ds-caption-leading: 1.4;
  --ds-caption-tracking: 0.02em;

  /* Overline — section labels, badges */
  --ds-overline-size: 0.6875rem;
  --ds-overline-weight: 700;
  --ds-overline-leading: 1.2;
  --ds-overline-tracking: 0.08em;
}


/* ═══════════════════════════════════════════════════════════════════════
   3. COLORS
   Text colors NEVER change between themes — only backgrounds do.
   This means text must read well on both dark and light backgrounds.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds — these change with theme */
  --ds-bg: #09122b;
  --ds-bg-card: #111827;
  --ds-bg-hover: #1f2937;
  --ds-bg-elevated: #0b1838;

  /* Text — changes with theme for contrast. Only 3 levels. */
  --ds-text: #f3f4f6;          /* primary: headings, body, card titles */
  --ds-text-muted: #9ca3af;    /* secondary: subtitles, descriptions */
  --ds-text-dim: #6b7280;      /* tertiary: captions, metadata, timestamps */

  /* Borders */
  --ds-border: rgba(148, 163, 184, 0.28);
  --ds-border-strong: rgba(148, 163, 184, 0.4);

  /* Accent — shared gradient, indigo → violet → purple.
     Stays inside the KoraSafe logo family (indigo/violet) but adds a
     lighter purple end stop for visible motion. Same gradient in both
     light and dark mode; mid-saturation so it reads on both backgrounds. */
  --ds-accent: #93c5fd;
  --ds-accent-gradient: linear-gradient(120deg, #6366f1 0%, #8b5cf6 50%, #c084fc 100%);
  /* Keep teal for backward compat (shield accent nodes only) */
  --ds-teal: #67e8f9;
  --ds-teal-light: #67e8f9;
  --ds-teal-gradient: var(--ds-accent-gradient);

  /* Brand — indigo */
  --ds-indigo: #6366f1;
  --ds-indigo-light: #818cf8;
  --ds-purple: #8b5cf6;
  --ds-purple-light: #a78bfa;

  /* Status — only for badges, legends, severity indicators */
  --ds-red: #ef4444;
  --ds-red-muted: #fca5a5;
  --ds-red-bg: rgba(239, 68, 68, 0.15);
  --ds-green: #10b981;
  --ds-green-muted: #6ee7b7;
  --ds-green-bg: rgba(16, 185, 129, 0.15);
  --ds-amber: #f59e0b;
  --ds-amber-muted: #fcd34d;
  --ds-amber-bg: rgba(245, 158, 11, 0.15);

  /* Extended text and surface tokens (used by app) */
  --ds-text-secondary: #d1d5db;  /* between primary and muted */
  --ds-text-body: #e5e7eb;       /* body copy in app */
  --ds-surface: rgba(14, 24, 49, 0.76);

  /* Extended accent/brand tokens */
  --ds-blue-light: #93c5fd;
  --ds-blue-solid: #3b82f6;
  --ds-cyan-solid: #22d3ee;
  --ds-indigo-bg: rgba(99, 102, 241, 0.15);
  --ds-purple-solid: #8b5cf6;
  --ds-green-solid: #10b981;
  --ds-green-alt: #059669;
  --ds-red-solid: #ef4444;
  --ds-yellow: #f59e0b;
  --ds-yellow-solid: #f59e0b;

  /* Muted/pastel accent variants (for badges, highlights on dark bg) */
  --ds-red-muted: #fca5a5;
  --ds-green-muted: #6ee7b7;
  --ds-green-neon: #86efac;
  --ds-amber-muted: #fcd34d;
  --ds-indigo-muted: #a5b4fc;
  --ds-cyan: #67e8f9;

  /* Sidebar (same as shell — always dark) */
  --ds-sidebar-bg: #111827;
  --ds-sidebar-text: #9ca3af;
  --ds-sidebar-text-bright: #f3f4f6;
  --ds-sidebar-text-dim: #6b7280;
  --ds-sidebar-border: #374151;
  --ds-sidebar-accent: #a5b4fc;

  /* Glass morphism */
  --ds-glass-bg: rgba(14, 24, 49, 0.76);
  --ds-glass-blur: 16px;
  --ds-glass-saturate: 130%;
  --ds-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --ds-glass-border: rgba(148, 163, 184, 0.1);
  --ds-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* Shell — header, footer, sidebar. Never changes with theme. */
  --ds-shell-bg: rgba(11, 15, 37, 0.97);
  --ds-shell-bg-solid: #060a14;
  --ds-shell-text: #e2e8f0;
  --ds-shell-text-muted: #94a3b8;
  --ds-shell-text-dim: #64748b;
  --ds-shell-border: rgba(148, 163, 184, 0.2);
  --ds-shell-hover: rgba(255, 255, 255, 0.05);
}


/* ═══════════════════════════════════════════════════════════════════════
   4. LIGHT MODE
   ONLY backgrounds, borders, and glass effects change.
   Text colors, accents, and status colors stay the same.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  /* Backgrounds only */
  --ds-bg: #f8fafc;
  --ds-bg-card: #ffffff;
  --ds-bg-hover: #f1f5f9;
  --ds-bg-elevated: #f1f5f9;

  /* Text swaps for contrast on light bg */
  --ds-text: #111827;
  --ds-text-secondary: #1f2937;
  --ds-text-body: #111827;
  --ds-text-muted: #4b5563;
  --ds-text-dim: #6b7280;
  --ds-surface: rgba(255, 255, 255, 0.82);

  /* Extended accents adapt for light bg */
  --ds-blue-light: #1d4ed8;
  --ds-blue-solid: #2563eb;
  --ds-cyan-solid: #0891b2;
  --ds-indigo-bg: rgba(99, 102, 241, 0.1);
  --ds-green-solid: #059669;
  --ds-green-alt: #047857;
  --ds-red-solid: #dc2626;
  --ds-yellow: #a16207;
  --ds-yellow-solid: #d97706;

  /* All accents shift to deeper purple/indigo for contrast on light bg */
  --ds-accent: #4f46e5;
  /* Same gradient as dark mode — colors are readable on both backgrounds */
  --ds-accent-gradient: linear-gradient(120deg, #6366f1 0%, #8b5cf6 50%, #c084fc 100%);
  --ds-teal: #4f46e5;
  --ds-teal-light: #6366f1;
  --ds-teal-gradient: linear-gradient(90deg, #4f46e5, #7c3aed);
  --ds-indigo: #4338ca;
  --ds-indigo-light: #4f46e5;
  --ds-purple: #6d28d9;
  --ds-purple-light: #7c3aed;

  /* Muted/pastel variants shift darker for contrast on light bg */
  --ds-red-muted: #dc2626;
  --ds-green-muted: #059669;
  --ds-green-neon: #15803d;
  --ds-amber-muted: #b45309;
  --ds-indigo-muted: #4f46e5;
  --ds-cyan: #0891b2;

  /* Sidebar stays dark — never overridden */

  /* Borders adapt for light surface */
  --ds-border: rgba(0, 0, 0, 0.1);
  --ds-border-strong: rgba(0, 0, 0, 0.18);

  /* Glass adapts for light surface */
  --ds-glass-bg: rgba(0, 0, 0, 0.04);
  --ds-glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  --ds-glass-border: rgba(0, 0, 0, 0.08);
  --ds-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Chat panel — swap the dark navy surface for a light surface in light
     mode so the Kora assistant and its input field match the rest of the
     light UI instead of rendering as a dark gray box. */
  --ds-chat-bg: rgba(255, 255, 255, 0.96);
  --ds-chat-border: rgba(99, 102, 241, 0.28);
  --ds-chat-header-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.06));
  --ds-chat-header-border: rgba(99, 102, 241, 0.18);

  /* Shell stays dark — never overridden */
  /* Text colors, accent colors, status colors — all unchanged */
}


/* ═══════════════════════════════════════════════════════════════════════
   5. SPACING SCALE
   Consistent spacing tokens for margins, padding, gaps.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ds-space-1: 0.25rem;   /* 4px */
  --ds-space-2: 0.5rem;    /* 8px */
  --ds-space-3: 0.75rem;   /* 12px */
  --ds-space-4: 1rem;      /* 16px */
  --ds-space-5: 1.25rem;   /* 20px */
  --ds-space-6: 1.5rem;    /* 24px */
  --ds-space-8: 2rem;      /* 32px */
  --ds-space-10: 2.5rem;   /* 40px */
  --ds-space-12: 3rem;     /* 48px */
  --ds-space-16: 4rem;     /* 64px */
  --ds-space-20: 5rem;     /* 80px */
}


/* ═══════════════════════════════════════════════════════════════════════
   6. RADII
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ds-radius-sm: 6px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 16px;
  --ds-radius-full: 9999px;
}


/* ═══════════════════════════════════════════════════════════════════════
   7. MOTION
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ds-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-duration-fast: 0.15s;
  --ds-duration-normal: 0.3s;
  --ds-duration-slow: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-fast: 0s;
    --ds-duration-normal: 0s;
    --ds-duration-slow: 0s;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   8. ELEMENT BASELINES
   Plain h1/h2/h3/h4 tags adopt the type-scale tokens automatically so
   pages don't need to apply utility classes everywhere. Inline overrides
   on font-family / font-weight / letter-spacing / line-height should not
   exist anywhere in pages — the design system owns those values.
   ═══════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ds-font-display);
  color: var(--ds-text);
  margin: 0;
}

body, p, li, td, th, span, div, label, a, input, textarea, select, button {
  font-family: var(--ds-font-body);
}

button, .ds-button {
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
}

code, pre, kbd, samp, .ds-mono {
  font-family: var(--ds-font-mono);
}

/* SVG text elements that should pick up the mono token. SVG can't read CSS
   vars from font-family attributes, so apply via class + style cascade. */
.ds-svg-mono { font-family: var(--ds-font-mono); }
.ds-svg-display { font-family: var(--ds-font-display); }

h1 {
  font-size: var(--ds-h1-size);
  font-weight: var(--ds-h1-weight);
  line-height: var(--ds-h1-leading);
  letter-spacing: var(--ds-h1-tracking);
}

h2 {
  font-size: var(--ds-h2-size);
  font-weight: var(--ds-h2-weight);
  line-height: var(--ds-h2-leading);
  letter-spacing: var(--ds-h2-tracking);
}

h3 {
  font-size: var(--ds-h3-size);
  font-weight: var(--ds-h3-weight);
  line-height: var(--ds-h3-leading);
  letter-spacing: var(--ds-h3-tracking);
}

h4 {
  font-size: var(--ds-h4-size);
  font-weight: var(--ds-h4-weight);
  line-height: var(--ds-h4-leading);
  letter-spacing: var(--ds-h4-tracking);
}


/* ═══════════════════════════════════════════════════════════════════════
   9. UTILITY CLASSES
   Apply the type scale and colors via classes.
   ═══════════════════════════════════════════════════════════════════════ */

/* Type */
.ds-title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-title-size);
  font-weight: var(--ds-title-weight);
  line-height: var(--ds-title-leading);
  letter-spacing: var(--ds-title-tracking);
  color: var(--ds-text);
}

.ds-h1 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-h1-size);
  font-weight: var(--ds-h1-weight);
  line-height: var(--ds-h1-leading);
  letter-spacing: var(--ds-h1-tracking);
  color: var(--ds-text);
}

.ds-h2 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-h2-size);
  font-weight: var(--ds-h2-weight);
  line-height: var(--ds-h2-leading);
  letter-spacing: var(--ds-h2-tracking);
  color: var(--ds-text);
}

.ds-h3 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-h3-size);
  font-weight: var(--ds-h3-weight);
  line-height: var(--ds-h3-leading);
  letter-spacing: var(--ds-h3-tracking);
  color: var(--ds-text);
}

.ds-h4 {
  font-family: var(--ds-font-display);
  font-size: var(--ds-h4-size);
  font-weight: var(--ds-h4-weight);
  line-height: var(--ds-h4-leading);
  letter-spacing: var(--ds-h4-tracking);
  color: var(--ds-text);
}

.ds-body {
  font-family: var(--ds-font-body);
  font-size: var(--ds-body-size);
  font-weight: var(--ds-body-weight);
  line-height: var(--ds-body-leading);
  color: var(--ds-text);
}

.ds-small {
  font-family: var(--ds-font-body);
  font-size: var(--ds-small-size);
  font-weight: var(--ds-small-weight);
  line-height: var(--ds-small-leading);
  color: var(--ds-text-muted);
}

.ds-caption {
  font-family: var(--ds-font-body);
  font-size: var(--ds-caption-size);
  font-weight: var(--ds-caption-weight);
  line-height: var(--ds-caption-leading);
  letter-spacing: var(--ds-caption-tracking);
  color: var(--ds-text-dim);
}

.ds-overline {
  font-family: var(--ds-font-body);
  font-size: var(--ds-overline-size);
  font-weight: var(--ds-overline-weight);
  line-height: var(--ds-overline-leading);
  letter-spacing: var(--ds-overline-tracking);
  text-transform: uppercase;
  color: var(--ds-text-dim);
}

/* Brand accent gradient — apply to a <span> wrapping highlighted word(s) */
.ds-accent, .ds-teal {
  background: var(--ds-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* CTA gradients + elevation tokens — referenced from inline JSX styles in
   app.html, header.js, footer.js, and the marketing pages. Centralized
   here so the brand palette can shift in one place. */
:root {
  --ds-cta-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
  --ds-cta-gradient-purple: linear-gradient(135deg, #8b5cf6, #6366f1);
  --ds-cta-gradient-success: linear-gradient(135deg, #10b981, #059669);
  --ds-cta-gradient-text: linear-gradient(120deg, #818cf8, #a78bfa);
  --ds-cta-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
  --ds-cta-shadow-success: 0 4px 14px rgba(16, 185, 129, 0.25);
  --ds-cta-shadow-purple: 0 4px 20px rgba(139, 92, 246, 0.4);

  --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --ds-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.25);
  --ds-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);

  --ds-scrollbar-thumb: #374151;

  --ds-chat-bg: rgba(17, 24, 39, 0.92);
  --ds-chat-border: rgba(139, 92, 246, 0.25);
  --ds-chat-header-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.1));
  --ds-chat-header-border: rgba(139, 92, 246, 0.2);
}

/* Text colors */
.ds-text         { color: var(--ds-text); }
.ds-text-muted   { color: var(--ds-text-muted); }
.ds-text-dim     { color: var(--ds-text-dim); }
.ds-text-indigo  { color: var(--ds-indigo-light); }
.ds-text-red     { color: var(--ds-red); }
.ds-text-green   { color: var(--ds-green); }
.ds-text-amber   { color: var(--ds-amber); }

/* Backgrounds */
.ds-bg       { background: var(--ds-bg); }
.ds-bg-card  { background: var(--ds-bg-card); }

/* Glass card */
.ds-glass {
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  background: var(--ds-glass-bg);
  border: 1px solid var(--ds-glass-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-glass-shadow), var(--ds-glass-inset);
}

.ds-glass-card {
  backdrop-filter: blur(var(--ds-glass-blur)) saturate(var(--ds-glass-saturate));
  background: var(--ds-bg-card);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-glass-shadow), var(--ds-glass-inset);
  padding: var(--ds-space-6);
}


/* ═══════════════════════════════════════════════════════════════════════
   9. BASE RESET
   Applied globally when this file is imported.
   ═══════════════════════════════════════════════════════════════════════ */

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--ds-font-body);
  font-size: var(--ds-body-size);
  line-height: var(--ds-body-leading);
  color: var(--ds-text);
  background: var(--ds-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ═══════════════════════════════════════════════════════════════════════
   BACKWARD COMPATIBILITY — alias old --g-* vars to --ds-* so existing
   pages that use --g-text, --g-bg-0, etc. automatically get theming.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --g-bg-0: var(--ds-bg);
  --g-bg-1: var(--ds-bg-elevated);
  --g-bg-2: var(--ds-bg-hover);
  --g-surface: var(--ds-glass-bg);
  --g-surface-2: var(--ds-bg-hover);
  --g-border: var(--ds-border);
  --g-border-strong: var(--ds-border-strong);
  --g-text: var(--ds-text);
  --g-muted: var(--ds-text-muted);
  --g-accent: var(--ds-teal-light);
  --g-accent-indigo: var(--ds-indigo);
  --g-accent-purple: var(--ds-purple);
  --g-accent-cyan: var(--ds-teal);
  --g-accent-soft: var(--ds-indigo-bg);
  --g-indigo: var(--ds-indigo-light);
  --g-purple: var(--ds-purple-light);
}


/* ═══════════════════════════════════════════════════════════════════════
   10. DIAGRAM CONTAINERS — stay dark in both themes
   ═══════════════════════════════════════════════════════════════════════ */

.ds-diagram {
  background: var(--ds-shell-bg-solid);
  border-radius: var(--ds-radius-xl);
  padding: var(--ds-space-6);
  border: 1px solid var(--ds-shell-border);
}

/* Ensure diagram containers stay dark in light mode */
[data-theme="light"] .ds-diagram {
  background: var(--ds-shell-bg-solid) !important;
  border-color: var(--ds-shell-border) !important;
}
[data-theme="light"] .ds-diagram * {
  color: inherit !important;
}

/* Visual placeholders that contain SVG diagrams */
.visual-placeholder {
  background: var(--ds-shell-bg-solid);
  border-radius: var(--ds-radius-xl);
  border: 1px solid var(--ds-shell-border);
}
[data-theme="light"] .visual-placeholder {
  background: var(--ds-shell-bg-solid) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   11. GLOBAL LIGHT MODE OVERRIDES
   Force all text/bg to use design system tokens regardless of inline styles.
   Scoped to exclude #ks-header and #ks-footer (shell stays dark).
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="light"] body {
  background: var(--ds-bg) !important;
  background-image: none !important;
}

[data-theme="light"] h1:not(#ks-header h1):not(#ks-footer h1),
[data-theme="light"] h2:not(#ks-header h2):not(#ks-footer h2),
[data-theme="light"] h3:not(#ks-header h3):not(#ks-footer h3),
[data-theme="light"] h4:not(#ks-header h4):not(#ks-footer h4) {
  color: var(--ds-text) !important;
}

[data-theme="light"] p:not(#ks-header p):not(#ks-footer p),
[data-theme="light"] li:not(#ks-header li):not(#ks-footer li),
[data-theme="light"] td:not(#ks-header td):not(#ks-footer td),
[data-theme="light"] th:not(#ks-header th):not(#ks-footer th) {
  color: var(--ds-text-muted) !important;
}

[data-theme="light"] span:not(#ks-header span):not(#ks-footer span):not(.ds-diagram span):not(.visual-placeholder span):not(.ds-teal):not(.gradient-text):not(.kora-title-accent):not([class*="gradient"]) {
  color: var(--ds-text) !important;
}

/* Diagram containers: override EVERYTHING to keep dark */
[data-theme="light"] .ds-diagram,
[data-theme="light"] .ds-diagram *,
[data-theme="light"] .visual-placeholder,
[data-theme="light"] .visual-placeholder * {
  color: #e2e8f0 !important;
  background-color: transparent !important;
}
[data-theme="light"] .ds-diagram,
[data-theme="light"] .visual-placeholder {
  background-color: var(--ds-shell-bg-solid) !important;
  background: var(--ds-shell-bg-solid) !important;
}

/* Keep gradient text transparent so gradients show */
[data-theme="light"] .ds-teal,
[data-theme="light"] .gradient-text,
[data-theme="light"] .kora-title-accent,
[data-theme="light"] [class*="gradient-text"] {
  -webkit-text-fill-color: transparent !important;
}

/* Hero gradient text on light bg: force darker indigo/violet gradient so it
   reads instead of looking like faded lavender. Covers all pages since it's
   keyed off the class, not a specific selector. Also targets bare h1 em
   elements (used by trust-security, platform, mcp, architecture heroes). */
[data-theme="light"] .gradient-text-accent,
[data-theme="light"] .gradient-text-rose,
[data-theme="light"] .gradient-text-primary,
[data-theme="light"] .gradient-text-purple,
[data-theme="light"] .kora-title-accent,
[data-theme="light"] .gradient-text:not(.gradient-text-preserve),
[data-theme="light"] h1 em,
[data-theme="light"] .hero h1 em {
  background: linear-gradient(120deg, #6366f1 0%, #8b5cf6 50%, #c084fc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Hero accent sweeps gently — 180% size keeps the full blue → purple →
   pink range mostly visible throughout the animation. Short text like
   stat numbers needs 100% so all three stops land inside the character. */
[data-theme="light"] .kora-title-accent,
[data-theme="light"] .hero h1 em {
  background-size: 180% auto !important;
}
[data-theme="light"] .gradient-text:not(.kora-title-accent):not(.gradient-text-preserve) {
  background-size: 100% auto !important;
}

/* Glass cards adapt */
[data-theme="light"] .glass:not(#ks-header .glass):not(header.glass),
[data-theme="light"] .glass-deep,
[data-theme="light"] .glass-card,
[data-theme="light"] .ds-glass,
[data-theme="light"] .ds-glass-card {
  background: var(--ds-bg-card) !important;
  border-color: var(--ds-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* Buttons and CTAs: always readable in light mode */
[data-theme="light"] [style*="background: linear-gradient"],
[data-theme="light"] [style*="background:linear-gradient"],
[data-theme="light"] .btn-primary,
[data-theme="light"] .alpha-cta-btn,
[data-theme="light"] .cta-btn,
[data-theme="light"] .tier-cta {
  color: #fff !important;
}

/* Outline / ghost CTAs: transparent-bg buttons need dark text, not white */
[data-theme="light"] .cta-btn.cta-btn-secondary,
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-outline,
[data-theme="light"] a.cta-btn[style*="background: transparent"],
[data-theme="light"] a.cta-btn[style*="background:transparent"] {
  color: var(--ds-indigo) !important;
  background: transparent !important;
  border-color: var(--ds-indigo) !important;
}

/* CTA sections: gradient text needs to stay visible */
[data-theme="light"] .cta-section h2,
[data-theme="light"] .cta-bar h2 {
  color: var(--ds-indigo) !important;
}

/* Glass buttons on light bg need visible borders and text */
[data-theme="light"] a[style*="border-radius:999px"],
[data-theme="light"] a[style*="border-radius: 999px"],
[data-theme="light"] button[style*="border-radius:999px"] {
  border-color: var(--ds-indigo) !important;
  color: var(--ds-indigo) !important;
}
[data-theme="light"] a[style*="border-radius:999px"][style*="background: linear-gradient"],
[data-theme="light"] a[style*="border-radius:999px"][style*="background:linear-gradient"] {
  color: #fff !important;
}

/* Stat boxes in light mode */
[data-theme="light"] .stat-item,
[data-theme="light"] [class*="stat-box"],
[data-theme="light"] [class*="stat-card"] {
  background: var(--ds-bg-card) !important;
  border-color: var(--ds-border) !important;
}
[data-theme="light"] .stat-item .stat-number,
[data-theme="light"] .stat-item .stat-value {
  color: var(--ds-indigo) !important;
}

/* Background orbs fade */
[data-theme="light"] .bg-orbs .orb {
  opacity: 0.04 !important;
}

/* Section dividers */
[data-theme="light"] .section-divider {
  background: linear-gradient(90deg, transparent, var(--ds-border-strong), transparent) !important;
}

/* Breadcrumb consistency: always left-aligned above the hero, never centered
   even when placed inside a text-align: center container. */
.breadcrumb {
  text-align: left !important;
}

/* Product preview mockups: white UI cards designed to look like screenshots.
   In light mode they blend into the page bg, so we add a visible border. */
[data-theme="light"] .mockup-card,
[data-theme="light"] .guardian-card,
[data-theme="light"] [class*="-mockup"] .mockup-card {
  border: 1px solid var(--ds-border-strong) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   11. COMPARE + LEGACY PAGE VARIABLE OVERRIDES
   Compare pages define their own :root variables (--bg, --surface, --indigo,
   --g100..g600, etc.) with dark-only values. This block re-maps those names
   to theme-adaptive values in light mode. Uses html[data-theme="light"] for
   higher specificity than the page's local :root block.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
  /* Background variants */
  --bg: #f8fafc;
  --bg-light: #f1f5f9;
  --bg-lighter: #e2e8f0;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-light: #f1f5f9;

  /* Legacy KS tokens */
  --ks-bg: #f8fafc;
  --ks-bg-card: #ffffff;
  --ks-border: rgba(0, 0, 0, 0.1);
  --ks-text: #111827;
  --ks-text-muted: #4b5563;
  --ks-text-dim: #6b7280;

  /* Text */
  --text: #111827;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --muted: #4b5563;
  --dim: #6b7280;
  --white: #111827;
  --g100: #111827;
  --g200: #1f2937;
  --g300: #374151;
  --g400: #4b5563;
  --g500: #6b7280;
  --g600: #9ca3af;

  /* Accents — shift to darker indigo/purple for contrast on light bg */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-light: #4f46e5;
  --accent-primary: #4f46e5;
  --accent-secondary: #4338ca;
  --accent-dark: #4338ca;
  --accent-blue: #2563eb;
  --accent-green: #059669;
  --accent-purple: #7c3aed;
  --indigo: #4338ca;
  --indigo-dark: #3730a3;
  --violet: #4f46e5;
  --lavender: #7c3aed;
  --cyan: #0891b2;
  --green: #059669;
  --amber: #b45309;
  --emerald: #059669;
  --rose: #be185d;

  /* Status */
  --success: #059669;
  --warning: #b45309;
  --error: #dc2626;

  /* Borders */
  --border: rgba(0, 0, 0, 0.12);
  --border-h: rgba(0, 0, 0, 0.22);
  --border-strong: rgba(0, 0, 0, 0.2);
  --surface-hover: rgba(0, 0, 0, 0.04);

  /* Glass */
  --glass: rgba(0, 0, 0, 0.04);
  --glass-bg: rgba(0, 0, 0, 0.04);
  --glass-hover: rgba(0, 0, 0, 0.08);
  --glass-border: rgba(0, 0, 0, 0.1);

  /* Legacy --g-* aliases — ensure these flip in light mode even when
     pages locally redefine them with dark hardcoded values. */
  --g-bg-0: #f8fafc;
  --g-bg-1: #f1f5f9;
  --g-bg-2: #e2e8f0;
  --g-surface: rgba(0, 0, 0, 0.04);
  --g-surface-2: rgba(0, 0, 0, 0.06);
  --g-border: rgba(0, 0, 0, 0.1);
  --g-border-strong: rgba(0, 0, 0, 0.2);
  --g-text: #111827;
  --g-muted: #4b5563;
  --g-accent: #4f46e5;
  --g-accent-indigo: #4338ca;
  --g-accent-purple: #6d28d9;
  --g-accent-cyan: #0891b2;
  --g-accent-soft: rgba(99, 102, 241, 0.1);
  --g-indigo: #4338ca;
  --g-purple: #6d28d9;
}


/* ═══════════════════════════════════════════════════════════════════════
   12. RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --ds-title-size: 2.25rem;
    --ds-h1-size: 1.75rem;
    --ds-h2-size: 1.25rem;
    --ds-h3-size: 1rem;
  }
}

@media (max-width: 480px) {
  :root {
    --ds-title-size: 1.75rem;
    --ds-h1-size: 1.5rem;
    --ds-h2-size: 1.125rem;
  }
}

.ks-auth-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--ds-glass-bg);
  border: 1.5px solid rgba(148, 163, 184, 0.38);
  border-radius: 8px;
  color: var(--ds-text-body);
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ks-auth-input::placeholder {
  color: var(--ds-text-dim);
}
.ks-auth-input:hover {
  border-color: rgba(148, 163, 184, 0.55);
}
.ks-auth-input:focus {
  outline: none;
  border-color: var(--ds-indigo, #6366f1);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
html[data-theme="light"] .ks-auth-input {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
}
html[data-theme="light"] .ks-auth-input:hover {
  border-color: rgba(15, 23, 42, 0.32);
}
html[data-theme="light"] .ks-auth-input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.ks-auth-provider-btn {
  width: 100%;
  padding: 0.7rem;
  background: var(--ds-glass-bg);
  border: 1.5px solid rgba(148, 163, 184, 0.38);
  border-radius: 8px;
  color: var(--ds-text-body);
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ks-auth-provider-btn:hover:not(:disabled) {
  border-color: rgba(148, 163, 184, 0.6);
  background: rgba(148, 163, 184, 0.08);
}
.ks-auth-provider-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
html[data-theme="light"] .ks-auth-provider-btn {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.14);
  color: #0f172a;
}
html[data-theme="light"] .ks-auth-provider-btn:hover:not(:disabled) {
  border-color: rgba(15, 23, 42, 0.28);
  background: #f8fafc;
}