:root {
  color-scheme: dark;

  /* Brand */
  --color-primary: #004bac;
  --color-primary-rgb: 0 75 172;
  --color-secondary: #00bf63;
  --color-secondary-rgb: 104 144 161;
  --color-tertiary: #4b74a3;
  --color-tertiary-rgb: 75 116 163;

  /* Status */
  --color-success: #1ad383;
  --color-success-rgb: 26 211 131;
  --color-warning: #db7f67;
  --color-warning-rgb: 219 127 103;
  --color-danger: #a42860;
  --color-danger-rgb: 164 40 96;
  --color-info: #3777ff;
  --color-info-rgb: 55 119 255;

  /* Surfaces (dark) */
  --color-surface-ink: #111a24;
  --color-main-bg: #142231;
  /* Used by desktop sidebar + sticky desktop top bar (see default.layout.vue) */
  --color-dark-grey: #172a3f;

  --color-surface-app: #19314b;
  --color-surface-card: #1b3654;
  --color-surface-muted: #172f46;
  --color-surface-hover: #214163;
  --color-surface-highlight: #26496e;
  --color-surface-glass: rgba(25, 49, 75, 0.72);
  --color-surface-popover: rgba(27, 54, 84, 0.92);
  --color-surface-overlay: rgba(0, 191, 99, 0.1);

  /* Text (dark) */
  --color-text-primary: #f3f7ff;
  --color-text-secondary: #c8d6ea;
  --color-text-tertiary: #9fb2cc;
  --color-text-muted: #7f95b0;
  --color-text-faint: #647b94;
  --color-text-inverse: #0b1117;
  --color-text-on-accent: #f3f7ff;

  /* Navigation: Sidebar item */
  --color-sidebar-item-active-icon: var(--color-text-on-accent);
  --color-sidebar-item-active-text: var(--color-text-on-accent);
  --color-sidebar-item-active-bg: rgba(255, 255, 255, 0.281);
  --color-sidebar-item-inactive-icon: var(--color-text-80);
  --color-sidebar-item-inactive-text: var(--color-text-80);
  --color-sidebar-item-hover-bg: color-mix(
    in srgb,
    rgba(255, 255, 255, 0.1) 60%,
    transparent
  );

  /* Navigation: TabBar item */
  --color-tabbar-item-active-icon: var(--color-primary);
  --color-tabbar-item-active-text: var(--color-primary);
  --color-tabbar-item-inactive-icon: var(--color-secondary);
  --color-tabbar-item-inactive-text: var(--color-text-60);

  /* Borders (dark) */
  --color-border-subtle: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-border-focus: rgba(0, 75, 172, 0.55);
  /* Tour tooltip (invert for contrast) */
  --color-tour-tooltip-bg: #ffffff;
  --color-tour-tooltip-border: rgba(7, 24, 17, 0.08);
  --color-tour-tooltip-title-text: #1c3025;
  --color-tour-tooltip-body-text: #031009;
  --color-tour-tooltip-button-primary-bg: #1ad383;
  --color-tour-tooltip-button-primary-text: #0b130f;
  --color-tour-tooltip-button-primary-hover: color-mix(
    in srgb,
    var(--color-tour-tooltip-button-primary-bg) 80%,
    #000
  );
  --color-tour-tooltip-button-secondary-border: rgba(7, 24, 17, 0.08);
  --color-tour-tooltip-button-secondary-hover: var(--color-primary);
  --color-tour-tooltip-button-secondary-text: #031009;
  --color-tour-tooltip-button-skip-text: #1c3025;
  --color-tour-tooltip-button-skip-hover: var(--color-primary);
  /* Gradients & shadows */
  --gradient-hero:
    radial-gradient(
      60% 60% at 70% 10%,
      color-mix(in srgb, var(--color-primary) 35%, transparent),
      transparent 65%
    ),
    radial-gradient(
      55% 55% at 20% 20%,
      color-mix(in srgb, var(--color-secondary) 32%, transparent),
      transparent 60%
    );
  --gradient-accent: linear-gradient(
    135deg,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 65%, var(--color-secondary))
  );
  --shadow-soft: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.42);
}

.light {
  color-scheme: light;

  /* Core surfaces (light) */
  --color-main-bg: #f4f7fb;
  --color-dark-grey: #eef3fa;
  --color-surface-app: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-muted: #eaf0f8;
  --color-surface-hover: #e3ecf8;
  --color-surface-highlight: #d9e7fb;
  --color-surface-glass: rgba(255, 255, 255, 0.78);
  --color-surface-popover: rgba(255, 255, 255, 0.95);
  --color-surface-overlay: rgba(0, 191, 99, 0.08);

  /* Text (light) */
  --color-text-primary: #ffffff;
  --color-text-secondary: #ffffff;
  --color-text-tertiary: #3a516b;
  --color-text-muted: #5c728c;
  --color-text-faint: #768aa2;
  --color-text-inverse: #f6f9ff;
  --color-text-on-accent: #ffffff;

  /* Navigation: Sidebar item */
  --color-sidebar-item-active-icon: var(--color-primary);
  --color-sidebar-item-active-text: var(--color-text-on-accent);
  --color-sidebar-item-active-bg: rgba(0, 75, 172, 0.281);
  --color-sidebar-item-inactive-icon: var(--color-text-80);
  --color-sidebar-item-inactive-text: var(--color-text-80);
  --color-sidebar-item-hover-bg: color-mix(
    in srgb,
    rgba(0, 75, 172, 0.1) 60%,
    transparent
  );

  /* Navigation: TabBar item */
  --color-tabbar-item-active-icon: var(--color-primary);
  --color-tabbar-item-active-text: var(--color-primary);
  --color-tabbar-item-inactive-icon: var(--color-secondary);
  --color-tabbar-item-inactive-text: var(--color-text-60);

  /* Borders (light) */
  --color-border-subtle: rgba(15, 27, 42, 0.1);
  --color-border-strong: rgba(15, 27, 42, 0.18);
  --color-border-focus: rgba(0, 75, 172, 0.55);
  /* Tour tooltip (dark version for light mode) */
  --color-tour-tooltip-bg: #0e171c;
  --color-tour-tooltip-border: rgba(255, 255, 255, 0.08);
  --color-tour-tooltip-title-text: #f6f9fb;
  --color-tour-tooltip-body-text: #c8d6de;
  --color-tour-tooltip-button-primary-bg: #aac5d3;
  --color-tour-tooltip-button-primary-text: #0e171c;
  --color-tour-tooltip-button-primary-hover: color-mix(
    in srgb,
    #aac5d3 80%,
    #000
  );
  --color-tour-tooltip-button-secondary-border: rgba(255, 255, 255, 0.08);
  --color-tour-tooltip-button-secondary-hover: #aac5d3;
  --color-tour-tooltip-button-secondary-text: #f6f9fb;
  --color-tour-tooltip-button-skip-text: #c8d6de;
  --color-tour-tooltip-button-skip-hover: #aac5d3;
  /* Status soft (light) */
  --color-success-soft: rgba(140, 209, 226, 0.18);
  --color-warning-soft: rgba(220, 143, 109, 0.18);
  --color-danger-soft: rgba(166, 77, 114, 0.18);
  --color-info-soft: rgba(75, 116, 163, 0.18);
}

/* Light mode: ensure readable text on brand primary backgrounds */
.light .bg-primary {
  color: var(--color-text-on-accent);
}

.light .bg-primary svg {
  fill: currentColor;
  stroke: currentColor;
}