/* =====================================================================
   BRAND TOKENS ONLY  · Phase 5 Lock Candidate
   Owner: JD + Kasie  · Selector for dark: html[data-theme="dark"]
   IMPORTANT: Components/styles belong in styles.css (or KasiePass.css)
   ===================================================================== */

/* ========== Base / Light (default) ================================== */
/* ============================
   BRAND TOKENS (Phase 5 lock)
   ============================ */
:root{
  /* typography */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-primary: var(--font-body);
  --scale: 1;

  /* light palette */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --surface-border: rgba(0,0,0,.10);
  --border: #d6dbe6;
  --ink: #111111;
  --ink-muted: rgba(0,0,0,.68);
  --text: var(--ink);
  --text-muted: #47536b;

  /* brand */
  --brand-navy: #233565;
  --brand-gold: #ea9e2d;
  --brand: var(--brand-navy);
  --brand-ink: #ffffff;
  --accent: var(--brand-gold);
  --brand-gold-400: var(--brand-gold);
  --brand-gold-500: #d98b1f;
  --brand-gold-600: #b86f0d;
  --button-primary-bg: #3f5fa8;
  --button-primary-text: #ffffff;
  --button-accent-bg: #ea9e2d;
  --button-accent-text: #111111;

  /* compatibility aliases used by active component styles */
  --bg-elev: var(--surface-2);
  --rule: var(--border);
  --surface-900: var(--surface);
  --surface-700: var(--border);
  --ink-300: var(--text-muted);
  --ink-400: var(--text-muted);
  --ink-500: var(--text-muted);

  /* header */
  --header-bg: #ffffff; /* light header*/
  --header-ink: var(--brand-navy); /* dark test/logo */
  --header-accent: var(--brand-gold);

  /* links */
  --link: var(--brand-navy);
  --link-hover: #0f2458;

  /* misc */
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 10px rgba(0,0,0,.10);
  --focus-ring: #0fa255;
  --focus: var(--focus-ring);
}

/* Dark overrides */
html[data-theme="dark"]{
  --bg: #0b1221;
  --surface: #0e1726;
  --surface-2: #142034;
  --surface-border: rgba(255,255,255,.12);
  --border: #2b3551;
  --ink: #e5e7eb;
  --ink-muted: rgba(229,231,235,.7);
  --text: var(--ink);
  --text-muted: #b9c2d6;

  --link: #ffd18a;
  --link-hover: #ffe2b2;

  --header-bg: var(--brand-navy); /* stays navy in dark */
  --header-ink: #ffffff;
  --header-accent: var(--brand-gold);
  --focus-ring: #4de1a0;
  --brand: #78a0ff;
  --brand-ink: #ffffff;
  --accent: #f2b25a;
  --button-primary-bg: #78a0ff;
  --button-primary-text: #0b1221;
  --button-accent-bg: #f2b25a;
  --button-accent-text: #0b1221;
}

/* High-contrast mode keeps the selected light/dark theme direction. */
html.a11y-contrast{
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f2f2;
  --surface-border: #000000;
  --border: #000000;
  --ink: #000000;
  --ink-muted: #222222;
  --text: #000000;
  --text-muted: #222222;
  --link: #001f5b;
  --link-hover: #000000;
  --focus-ring: #005fcc;
  --focus: var(--focus-ring);
}

html[data-theme="dark"].a11y-contrast{
  color-scheme: dark;
  --bg: #000000;
  --surface: #000000;
  --surface-2: #111111;
  --surface-border: #ffffff;
  --border: #ffffff;
  --ink: #ffffff;
  --ink-muted: #f2f2f2;
  --text: #ffffff;
  --text-muted: #f2f2f2;
  --link: #ffd166;
  --link-hover: #fff0ad;
  --brand: #ffd166;
  --brand-ink: #ffffff;
  --accent: #ffd166;
  --focus-ring: #ffffff;
  --focus: var(--focus-ring);
}

/* === Theme-aware logo swap === */
.logo-mark--light { display: block; }
.logo-mark--dark  { display: none; }

html[data-theme="dark"] .logo-mark--light {
  display: none;
}

html[data-theme="dark"] .logo-mark--dark {
  display: block;
}

/* === Theme-aware logo swap (header) ============================== */

.logo-mark--light,
.logo-mark--dark {
  display: block;
}

/* Default: show light logo, hide dark logo */
.logo-mark--dark {
  display: none !important;
}

/* Dark theme: flip which one is visible */
html[data-theme="dark"] .logo-mark--light,
body[data-theme="dark"] .logo-mark--light {
  display: none !important;
}

html[data-theme="dark"] .logo-mark--dark,
body[data-theme="dark"] .logo-mark--dark {
  display: block !important;
}