/*
 * ═══════════════════════════════════════════════════════════════
 * Kevron Group — Design Tokens (Single Source of Truth)
 * Theme: Kevron Executive Assurance
 * Palette: Deep Navy · Kevron Blue · Kevron Green · Teal · Safety Gold
 * Theme modes: system | light | dark
 * Accent sets: primary | blue | green | teal | gold | purple
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── Light Mode Defaults ────────────────────────────────────── */
:root {
  /* ── Brand Palette (Kevron Executive Assurance) ─────────────── */
  --brand-navy:         #002D62;
  --brand-cyan:         #0EA5E9;
  --safety-gold:        #D97706;
  --slate:              #0F172A;
  --surface:            #F8FAFC;
  --text-slate:         #4b5563;
  --kg-primary-navy:    #071F3A;
  --kg-primary-blue:    #0B5FA5;
  --kg-primary-green:   #008A5B;
  --kg-accent-teal:     #00A7B5;
  --kg-accent-gold:     #F5B301;

  /* ── Brand Light Backgrounds ────────────────────────────────── */
  --kg-bg-body:         #F7FBFF;
  --kg-bg-soft-blue:    #EAF7FF;
  --kg-bg-soft-mint:    #ECFFF6;
  --kg-bg-soft-gold:    #FFF8E6;
  --kg-bg-white:        #FFFFFF;

  /* ── Brand Text ─────────────────────────────────────────────── */
  --kg-text-main:       #0F172A;
  --kg-text-muted:      #64748B;
  --kg-border:          #D8E3EA;

  /* ── Dark Mode Surfaces ─────────────────────────────────────── */
  --kg-dark-bg:         #07111F;
  --kg-dark-surface:    #0D1B2A;
  --kg-dark-card:       #12263A;
  --kg-dark-text:       #F8FAFC;
  --kg-dark-muted:      #AAB8C5;

  /* ── Brand Gradients ────────────────────────────────────────── */
  --kg-gradient-body:   linear-gradient(135deg, #F7FBFF 0%, #ECFFF6 48%, #FFF8E6 100%);
  --kg-gradient-hero:   linear-gradient(135deg, #071F3A 0%, #0B5FA5 48%, #008A5B 100%);
  --kg-gradient-button: linear-gradient(135deg, #008A5B 0%, #00A7B5 100%);
  --kg-gradient-gold:   linear-gradient(135deg, #F5B301 0%, #FFD76A 100%);
  --kg-gradient-dark:   linear-gradient(135deg, #071F3A 0%, #0D2F4F 55%, #004F3D 100%);

  /* ── Brand (backward-compat aliases used throughout codebase) ── */
  --brand-primary:       #071F3A;
  --brand-primary-light: #0B5FA5;
  --brand-primary-dark:  #041428;
  --brand-accent:        #008A5B;
  --brand-accent-light:  #00A7B5;
  --brand-accent-dark:   #006644;

  /* ── Accent (overridden by data-accent) ────────────────────── */
  --accent:             #071F3A;
  --accent-light:       #0B5FA5;
  --accent-dark:        #041428;
  --accent-rgb:         7, 31, 58;
  --accent-contrast:    #ffffff;
  --accent-hover-bg:    rgba(7, 31, 58, 0.04);
  --accent-focus-ring:  rgba(7, 31, 58, 0.18);

  /* ── Surfaces ──────────────────────────────────────────────── */
  --bg-body:      var(--kg-gradient-body);
  --bg-surface-0: #ffffff;
  --bg-surface-1: #ffffff;
  --bg-surface-2: #EAF7FF;   /* Soft Sky  */
  --bg-surface-3: #ECFFF6;   /* Soft Mint */
  --bg-surface-4: #FFF8E6;   /* Soft Gold */
  --bg-elevated:  #ffffff;

  /* ── Text ──────────────────────────────────────────────────── */
  --text-primary:   #0F172A;
  --text-secondary: #1E3A5F;
  --text-tertiary:  #64748B;
  --text-muted:     #94A3B8;
  --text-inverted:  #ffffff;

  /* ── Borders ───────────────────────────────────────────────── */
  --border-default: #D8E3EA;
  --border-light:   rgba(7, 31, 58, 0.07);
  --border-medium:  rgba(7, 31, 58, 0.12);
  --border-strong:  #B8CCDA;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(7, 31, 58, 0.06);
  --shadow-md:   0 4px 6px -1px rgba(7, 31, 58, 0.08), 0 2px 4px -2px rgba(7, 31, 58, 0.05);
  --shadow-lg:   0 4px 16px rgba(7, 31, 58, 0.08), 0 1px 4px rgba(7, 31, 58, 0.05), 0 0 0 1px rgba(7, 31, 58, 0.04);
  --shadow-xl:   0 20px 40px -8px rgba(7, 31, 58, 0.14), 0 8px 16px -4px rgba(7, 31, 58, 0.08);
  --shadow-mega: 0 25px 60px rgba(7, 31, 58, 0.16), 0 4px 16px rgba(7, 31, 58, 0.08);

  /* ── State Colors ──────────────────────────────────────────── */
  --state-success:    #008A5B;
  --state-success-bg: rgba(0, 138, 91, 0.08);
  --state-warning:    #F5B301;
  --state-warning-bg: rgba(245, 179, 1, 0.08);
  --state-danger:     #dc3545;
  --state-danger-bg:  rgba(220, 53, 69, 0.08);
  --state-info:       #00A7B5;
  --state-info-bg:    rgba(0, 167, 181, 0.08);

  /* ── Buttons ───────────────────────────────────────────────── */
  --btn-primary:        var(--kg-primary-green);
  --btn-primary-hover:  var(--kg-accent-teal);
  --btn-primary-shadow: rgba(0, 138, 91, 0.30);
  --btn-secondary:      var(--kg-primary-navy);
  --btn-success:        var(--kg-primary-green);
  --btn-danger:         #dc3545;
  --btn-warning:        var(--kg-accent-gold);
  --btn-info:           var(--kg-accent-teal);

  /* ── Navigation ────────────────────────────────────────────── */
  --nav-bg:             rgba(7, 31, 58, 0.97);
  --nav-bg-scrolled:    rgba(7, 31, 58, 0.99);
  --nav-border:         rgba(255, 255, 255, 0.08);
  --nav-shadow:         0 4px 30px rgba(0, 0, 0, 0.25);
  --nav-text:           rgba(255, 255, 255, 0.88);
  --nav-text-hover:     #F5B301;
  --nav-active-indicator: #F5B301;

  /* ── Footer ────────────────────────────────────────────────── */
  --footer-bg:          #07111F;
  --footer-text:        #AAB8C5;
  --footer-heading:     #F8FAFC;
  --footer-link-hover:  #00A7B5;
  --footer-social-bg:   rgba(255, 255, 255, 0.07);

  /* ── Forms ─────────────────────────────────────────────────── */
  --input-bg:           #ffffff;
  --input-border:       #D8E3EA;
  --input-text:         #0F172A;
  --input-placeholder:  #94A3B8;
  --input-focus-border: var(--kg-primary-green);
  --input-focus-ring:   rgba(0, 138, 91, 0.15);

  /* ── Cards / Components ────────────────────────────────────── */
  --card-bg:       var(--bg-surface-1);
  --card-bg-hover: #ECFFF6;
  --card-border:   var(--border-light);
  --card-shadow:   var(--shadow-lg);

  /* ── Scrollbar ─────────────────────────────────────────────── */
  --scrollbar-track: #EAF7FF;
  --scrollbar-thumb: var(--kg-primary-navy);

  /* ── Skeleton ──────────────────────────────────────────────── */
  --skeleton-from: #D8E3EA;
  --skeleton-via:  #EAF7FF;

  /* ── Chips / Tags ──────────────────────────────────────────── */
  --chip-bg:   rgba(0, 138, 91, 0.08);
  --chip-text: var(--kg-primary-green);

  /* ── Search ────────────────────────────────────────────────── */
  --search-bg:        #ffffff;
  --search-text:      #0F172A;
  --search-hint-bg:   rgba(0, 138, 91, 0.06);
  --search-hint-text: #64748B;

  /* ── Mega Menu ─────────────────────────────────────────────── */
  --mega-bg:          #ffffff;
  --mega-border:      rgba(7, 31, 58, 0.08);
  --mega-link-hover:  rgba(0, 138, 91, 0.04);
  --mega-card-bg:     linear-gradient(135deg, rgba(7, 31, 58, 0.04) 0%, rgba(0, 138, 91, 0.04) 100%);
  --mega-heading:     #64748B;
  --mega-title:       #0F172A;

  /* ── Mobile Menu ───────────────────────────────────────────── */
  --mobile-bg:           #071F3A;
  --mobile-border:       rgba(255, 255, 255, 0.08);
  --mobile-toggle-text:  #F8FAFC;
  --mobile-link-text:    rgba(255, 255, 255, 0.72);
  --mobile-link-hover:   #F5B301;
  --mobile-shortcut-bg:  rgba(255, 255, 255, 0.05);

  /* ── Pre-footer ────────────────────────────────────────────── */
  --prefooter-bg: linear-gradient(135deg, #071F3A 0%, #0B5FA5 50%, #008A5B 100%);

  /* ── Typography ────────────────────────────────────────────── */
  --kg-font-heading: "Plus Jakarta Sans", "Manrope", Arial, sans-serif;
  --kg-font-body: "Inter", Arial, sans-serif;
  --kg-font-ui: "Inter", Arial, sans-serif;
  --kg-font-technical: "IBM Plex Sans", "Inter", Arial, sans-serif;
  --kg-font-mono: "IBM Plex Mono", "Courier New", monospace;

  --kg-text-xs: 0.70rem;
  --kg-text-sm: 0.78rem;
  --kg-text-base: 0.82rem;
  --kg-text-body: 0.850rem;
  --kg-text-lead: 0.850rem;

  --kg-h1: clamp(1.35rem, 2.5vw, 1.8rem);
  --kg-h2: clamp(1.15rem, 1.8vw, 1.45rem);
  --kg-h3: clamp(1.00rem, 1.4vw, 1.25rem);
  --kg-h4: 1rem;
  --kg-h5: 0.95rem;
  --kg-h6: 0.90rem;

  --kg-line-tight: 1.15;
  --kg-line-heading: 1.2;
  --kg-line-body: 1.65;
  --kg-line-ui: 1.45;

  --kg-letter-heading: -0.025em;
  --kg-letter-ui: -0.005em;

  --font-family:  var(--kg-font-body);
  --font-heading: var(--kg-font-heading);
  --h1-max:  1.8rem;
  --h2-max:  1.45rem;
  --h3-max:  1.25rem;
  --h4-max:  1.05rem;
  --h5-max:  0.9rem;
  --body-max: var(--kg-text-body);
  --small-size: var(--kg-text-sm);

  /* ── KG Design System Aliases ──────────────────────────────── */
  --kg-bg:               var(--bg-body);
  --kg-bg-soft:          var(--bg-surface-2);
  --kg-section-bg:       var(--bg-surface-1);
  --kg-section-alt:      var(--bg-surface-2);
  --kg-text:             var(--text-primary);
  --kg-muted:            var(--text-muted);
  --kg-primary:          var(--kg-primary-navy);
  --kg-secondary:        var(--kg-primary-green);
  --kg-accent:           var(--kg-accent-teal);
  --kg-border:           var(--border-default);
  --kg-card-bg:          var(--bg-surface-1);
  --kg-card-hover:       var(--kg-bg-soft-mint);
  --kg-radius-card:      0.1rem;
  --kg-radius-button:    50px;
  --kg-shadow-card:      var(--shadow-lg);
  --kg-container-desktop: 85%;
  --kg-container-mobile:  95%;
  --kg-h1-max:  1.8rem;
  --kg-body-max: 0.850rem;

  /* ── Layout ────────────────────────────────────────────────── */
  --content-width-desktop: 85%;
  --content-width-mobile:  95%;
  --radius-card: 0.1rem;
  --radius-btn:  50px;
  --nav-height:  72px;
  --utility-height: 36px;
  --nav-total: calc(var(--nav-height) + var(--utility-height));

  /* ── Transitions ───────────────────────────────────────────── */
  --transition-slow:   0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-medium: 0.3s ease;
  --transition-fast:   0.15s ease;
  --mega-transition:   280ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Bouncy / Elastic Transitions (GPU-safe) ────────────── */
  --ease-bounce:        cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-elastic:       cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-bounce:  0.4s var(--ease-bounce);
  --transition-elastic: 0.35s var(--ease-elastic);

  /* ── Scroll Progress ───────────────────────────────────────── */
  --scroll-progress: 0%;

  /* ── Color Scheme (browser hint) ───────────────────────────── */
  color-scheme: light dark;
}

/* ─── Dark Mode ──────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Brand palette stays constant — surfaces adapt */
  --kg-bg-body:      #07111F;
  --kg-bg-soft-blue: #0D1B2A;
  --kg-bg-soft-mint: #0D2A1E;
  --kg-bg-soft-gold: #1F1A08;
  --kg-bg-white:     #12263A;

  --kg-text-main:  #F8FAFC;
  --kg-text-muted: #AAB8C5;
  --kg-border:     rgba(255, 255, 255, 0.12);

  /* Surfaces — layered navy darks, never pure black */
  --bg-body:      linear-gradient(135deg, #07111F 0%, #0D1B2A 55%, #071F12 100%);
  --bg-surface-0: #07111F;
  --bg-surface-1: #0D1B2A;
  --bg-surface-2: #12263A;
  --bg-surface-3: #0D2A1E;
  --bg-surface-4: #1A200C;
  --bg-elevated:  #12263A;

  /* Text */
  --text-primary:   #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-tertiary:  #94A3B8;
  --text-muted:     #64748B;

  /* Borders */
  --border-default: rgba(255, 255, 255, 0.10);
  --border-light:   rgba(0, 167, 181, 0.08);
  --border-medium:  rgba(0, 167, 181, 0.14);
  --border-strong:  rgba(255, 255, 255, 0.18);

  /* Shadows — deeper for dark surfaces */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.40), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
  --shadow-lg:   0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-xl:   0 20px 40px -8px rgba(0, 0, 0, 0.60), 0 8px 16px -4px rgba(0, 0, 0, 0.40);
  --shadow-mega: 0 25px 60px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.35);

  /* States */
  --state-success-bg: rgba(0, 138, 91, 0.18);
  --state-warning-bg: rgba(245, 179, 1, 0.14);
  --state-danger-bg:  rgba(220, 53, 69, 0.18);
  --state-info-bg:    rgba(0, 167, 181, 0.18);

  /* Navigation — stays Deep Navy in dark mode */
  --nav-bg:         rgba(7, 17, 31, 0.98);
  --nav-bg-scrolled: rgba(7, 17, 31, 0.99);
  --nav-border:     rgba(255, 255, 255, 0.06);
  --nav-shadow:     0 4px 30px rgba(0, 0, 0, 0.50);
  --nav-text:       rgba(255, 255, 255, 0.85);
  --nav-text-hover: #F5B301;
  --accent-hover-bg: rgba(0, 138, 91, 0.10);

  /* Footer */
  --footer-bg:        #050D18;
  --footer-text:      #AAB8C5;
  --footer-heading:   #F8FAFC;
  --footer-link-hover: #00A7B5;
  --footer-social-bg: rgba(255, 255, 255, 0.08);

  /* Forms */
  --input-bg:          #12263A;
  --input-border:      rgba(255, 255, 255, 0.12);
  --input-text:        #F8FAFC;
  --input-placeholder: #64748B;
  --input-focus-border: #008A5B;
  --input-focus-ring:   rgba(0, 138, 91, 0.20);

  /* Cards */
  --card-bg:       #12263A;
  --card-bg-hover: #0D2A1E;
  --card-border:   rgba(255, 255, 255, 0.08);

  /* Scrollbar */
  --scrollbar-track: #0D1B2A;

  /* Skeleton */
  --skeleton-from: #12263A;
  --skeleton-via:  #1E3A5F;

  /* Chips */
  --chip-bg:   rgba(0, 167, 181, 0.20);
  --chip-text: #00C8D7;

  /* Search */
  --search-bg:        #0D1B2A;
  --search-text:      #F8FAFC;
  --search-hint-bg:   rgba(0, 138, 91, 0.10);
  --search-hint-text: #AAB8C5;

  /* Mega Menu */
  --mega-bg:         #0D1B2A;
  --mega-border:     rgba(255, 255, 255, 0.08);
  --mega-link-hover: rgba(0, 138, 91, 0.08);
  --mega-card-bg:    linear-gradient(135deg, rgba(7, 31, 58, 0.60) 0%, rgba(0, 138, 91, 0.12) 100%);
  --mega-heading:    #64748B;
  --mega-title:      #F8FAFC;

  /* Mobile Menu */
  --mobile-bg:          #07111F;
  --mobile-border:      rgba(255, 255, 255, 0.08);
  --mobile-toggle-text: #F8FAFC;
  --mobile-link-text:   rgba(255, 255, 255, 0.70);
  --mobile-link-hover:  #F5B301;
  --mobile-shortcut-bg: rgba(255, 255, 255, 0.05);

  /* KG system overrides for dark */
  --kg-card-bg:    #12263A;
  --kg-card-hover: #0D2A1E;

  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════
   ACCENT PRESETS
   Each accent set overrides --accent-*, --chip-*, --accent-hover-bg,
   and --accent-focus-ring. Applied via data-accent="" on <html>.
   ═══════════════════════════════════════════════════════════════ */

/* ── Primary (Kevron Executive — Deep Navy, default) ─────────── */

/* ── Blue Accent (Kevron Blue) ───────────────────────────────── */
[data-accent="blue"] {
  --accent:            #0B5FA5;
  --accent-light:      #1A7CC9;
  --accent-dark:       #084A82;
  --accent-rgb:        11, 95, 165;
  --accent-contrast:   #ffffff;
  --accent-hover-bg:   rgba(11, 95, 165, 0.05);
  --accent-focus-ring: rgba(11, 95, 165, 0.20);
  --chip-text:         #0B5FA5;
}

[data-theme="dark"][data-accent="blue"] {
  --nav-text-hover:  #4DA6E8;
  --accent-hover-bg: rgba(11, 95, 165, 0.12);
  --chip-text:       #4DA6E8;
  --mobile-link-hover: #4DA6E8;
}

/* ── Green Accent (Kevron Green) ─────────────────────────────── */
[data-accent="green"] {
  --accent:            #008A5B;
  --accent-light:      #00A96E;
  --accent-dark:       #006644;
  --accent-rgb:        0, 138, 91;
  --accent-contrast:   #ffffff;
  --accent-hover-bg:   rgba(0, 138, 91, 0.05);
  --accent-focus-ring: rgba(0, 138, 91, 0.20);
  --chip-text:         #008A5B;
}

[data-theme="dark"][data-accent="green"] {
  --nav-text-hover:  #00D48C;
  --accent-hover-bg: rgba(0, 138, 91, 0.12);
  --chip-text:       #00D48C;
  --mobile-link-hover: #00D48C;
}

/* ── Teal Accent ──────────────────────────────────────────────── */
[data-accent="teal"] {
  --accent:            #00A7B5;
  --accent-light:      #00C4D4;
  --accent-dark:       #007E8A;
  --accent-rgb:        0, 167, 181;
  --accent-contrast:   #ffffff;
  --accent-hover-bg:   rgba(0, 167, 181, 0.05);
  --accent-focus-ring: rgba(0, 167, 181, 0.20);
  --chip-text:         #00A7B5;
}

[data-theme="dark"][data-accent="teal"] {
  --nav-text-hover:  #00E5F7;
  --accent-hover-bg: rgba(0, 167, 181, 0.12);
  --chip-text:       #00E5F7;
  --mobile-link-hover: #00E5F7;
}

/* ── Gold Accent (Safety Gold) ───────────────────────────────── */
[data-accent="gold"] {
  --accent:            #B38600;
  --accent-light:      #D4A000;
  --accent-dark:       #8A6700;
  --accent-rgb:        179, 134, 0;
  --accent-contrast:   #ffffff;
  --accent-hover-bg:   rgba(179, 134, 0, 0.05);
  --accent-focus-ring: rgba(179, 134, 0, 0.20);
  --chip-text:         #8A6700;
}

[data-theme="dark"][data-accent="gold"] {
  --nav-text-hover:  #F5B301;
  --accent-hover-bg: rgba(245, 179, 1, 0.10);
  --chip-text:       #F5B301;
  --mobile-link-hover: #F5B301;
}

/* ── Navy Accent (Deep Navy) ─────────────────────────────────── */
[data-accent="navy"] {
  --accent:            #071F3A;
  --accent-light:      #0B5FA5;
  --accent-dark:       #041428;
  --accent-rgb:        7, 31, 58;
  --accent-contrast:   #ffffff;
  --accent-hover-bg:   rgba(7, 31, 58, 0.05);
  --accent-focus-ring: rgba(7, 31, 58, 0.20);
  --chip-text:         #071F3A;
}

/* ── Purple Accent (legacy — keep for switcher compat) ───────── */
[data-accent="purple"] {
  --accent:            #7c3aed;
  --accent-light:      #8b5cf6;
  --accent-dark:       #6d28d9;
  --accent-rgb:        124, 58, 237;
  --accent-contrast:   #ffffff;
  --accent-hover-bg:   rgba(124, 58, 237, 0.04);
  --accent-focus-ring: rgba(124, 58, 237, 0.20);
  --chip-text:         #7c3aed;
}

[data-theme="dark"][data-accent="purple"] {
  --nav-text-hover:  #a78bfa;
  --accent-hover-bg: rgba(124, 58, 237, 0.10);
  --chip-text:       #a78bfa;
  --mobile-link-hover: #a78bfa;
}

/* ═══════════════════════════════════════════════════════════════
   THEME TRANSITIONS
   Smooth color transitions when switching themes.
   Scoped to avoid affecting animations/hover transitions.
   ═══════════════════════════════════════════════════════════════ */
html[data-theme-transitioning] body,
html[data-theme-transitioning] .kv-main-nav,
html[data-theme-transitioning] .kv-mega-inner,
html[data-theme-transitioning] .kv-mobile-panel,
html[data-theme-transitioning] .kv-footer,
html[data-theme-transitioning] .kv-card,
html[data-theme-transitioning] .kv-search-box {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme-transitioning] body,
  html[data-theme-transitioning] .kv-main-nav,
  html[data-theme-transitioning] .kv-mega-inner,
  html[data-theme-transitioning] .kv-mobile-panel,
  html[data-theme-transitioning] .kv-footer,
  html[data-theme-transitioning] .kv-card,
  html[data-theme-transitioning] .kv-search-box {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HIGH CONTRAST OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
[data-contrast="high"] {
  --bg-surface-1:   #ffffff;
  --bg-surface-2:   #f0f0f0;
  --bg-surface-3:   #e0e0e0;
  --text-primary:   #000000;
  --border-default: #000000;
}

[data-contrast="high"][data-theme="dark"] {
  --bg-surface-1:   #000000;
  --bg-surface-2:   #0a0a0a;
  --bg-surface-3:   #141414;
  --text-primary:   #ffffff;
  --border-default: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   FORCED COLORS (Windows High Contrast)
   ═══════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  :root {
    --accent:          ButtonText;
    --accent-contrast: ButtonFace;
    --border-default:  ButtonText;
    --text-primary:    CanvasText;
    --bg-surface-1:    Canvas;
  }
}