:root {
  color-scheme: dark;

  /* Brand (Spendl) */
  --color-primary: #1ad383;
  --color-primary-rgb: 26, 211, 131;
  --color-secondary: #058a4a;
  --color-secondary-rgb: 5, 138, 74;
  --color-tertiary: #3777ff;
  --color-tertiary-rgb: 55, 119, 255;

  /* Status */
  --color-success: var(--color-primary);
  --color-success-rgb: var(--color-primary-rgb);
  --color-warning: #f2b84b;
  --color-warning-rgb: 242, 184, 75;
  --color-danger: #ff5b6b;
  --color-danger-rgb: 255, 91, 107;
  --color-info: var(--color-tertiary);
  --color-info-rgb: var(--color-tertiary-rgb);

  /* Surfaces (dark) — neutral dark greys with green accents */
  --color-main-bg: #222222;
  --color-surface-app: #272b28;
  --color-surface-card: #272b28;
  --color-surface-muted: #171e21;
  --color-surface-hover: rgba(255, 255, 255, 0.06);
  --color-surface-highlight: color-mix(
    in srgb,
    var(--color-primary) 10%,
    var(--color-surface-card)
  );
  --color-surface-glass: rgba(27, 34, 38, 0.72);
  --color-surface-popover: rgba(27, 34, 38, 0.92);
  --color-surface-overlay: rgba(255, 255, 255, 0.08);

  /* Topbar (brand-forward) */
  --color-surface-topbar: var(--color-primary);

  /* Text (dark) */
  --color-text-primary: #eef6f2;
  --color-text-secondary: #c7d6cf;
  --color-text-tertiary: #a4b6ae;
  --color-text-muted: #7f948b;
  --color-text-faint: #5e726b;
  --color-text-inverse: #07100c;
  --color-text-on-accent: #07100c;

  /* Text/icons on primary-green topbar (dark text for contrast) */
  --color-text-on-topbar: #06150f;
  --color-icon-topbar: var(--color-text-on-topbar);
  --color-text-topbar-breadcrumb: color-mix(in srgb, var(--color-text-on-topbar) 82%, transparent);
  --color-text-topbar-breadcrumb-current: var(--color-text-on-topbar);
  --color-text-topbar-breadcrumb-separator: color-mix(
    in srgb,
    var(--color-text-on-topbar) 42%,
    transparent
  );

  /* Borders (dark) */
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-border-focus: color-mix(in srgb, var(--color-primary) 55%, transparent);

  /* Sidebar (dark) */
  --color-surface-sidebar: var(--color-surface-app);
  --color-surface-sidebar-drawer: var(--color-surface-popover);
  --color-surface-sidebar-footer: var(--color-surface-muted);
  --color-text-sidebar-item: var(--color-text-secondary);
  --color-text-sidebar-item-hover: var(--color-text-primary);
  --color-text-sidebar-item-active: var(--color-primary);
  --color-icon-sidebar-item: var(--color-text-muted);
  --color-icon-sidebar-item-hover: var(--color-text-secondary);
  --color-icon-sidebar-item-active: var(--color-primary);
  --color-icon-sidebar-chevron: var(--color-text-muted);

  /* Profile dropdown (dark) */
  --color-surface-profile-trigger: var(--color-surface-card);
  --color-border-profile-trigger: var(--color-border-subtle);
  --color-text-profile-trigger: var(--color-text-primary);
  --color-surface-profile-menu: var(--color-surface-popover);
  --color-surface-profile-menu-hover: var(--color-surface-hover);
  --color-text-profile-menu: var(--color-text-secondary);
  --color-text-profile-menu-muted: var(--color-text-muted);

  /* Gradients & shadows */
  --gradient-hero:
    radial-gradient(
      60% 60% at 70% 10%,
      color-mix(in srgb, var(--color-primary) 28%, transparent),
      transparent 65%
    ),
    radial-gradient(
      55% 55% at 20% 20%,
      color-mix(in srgb, var(--color-secondary) 24%, 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.55);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.48);
  --shadow-card: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.light {
  color-scheme: light;

  /* Surfaces (light) — crisp neutrals */
  --color-main-bg: #f8fbf9;
  --color-surface-app: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-muted: #f2f5f3;
  --color-surface-hover: rgba(3, 16, 9, 0.04);
  --color-surface-highlight: color-mix(in srgb, var(--color-primary) 10%, #ffffff 90%);
  --color-surface-glass: rgba(255, 255, 255, 0.82);
  --color-surface-popover: rgba(255, 255, 255, 0.96);
  --color-surface-overlay: rgba(3, 16, 9, 0.06);

  /* Topbar (brand-forward) */
  --color-surface-topbar: var(--color-primary);

  /* Text (light) */
  --color-text-primary: #031009;
  --color-text-secondary: #1b2e25;
  --color-text-tertiary: #2f463b;
  --color-text-muted: #55685f;
  --color-text-faint: #7a8b84;
  --color-text-inverse: #f5faf8;
  --color-text-on-accent: #04130c;

  /* Text/icons on primary-green topbar */
  --color-text-on-topbar: #f5faf8;
  --color-icon-topbar: var(--color-text-on-topbar);
  --color-text-topbar-breadcrumb: color-mix(in srgb, var(--color-text-on-topbar) 82%, transparent);
  --color-text-topbar-breadcrumb-current: var(--color-text-on-topbar);
  --color-text-topbar-breadcrumb-separator: color-mix(
    in srgb,
    var(--color-text-on-topbar) 42%,
    transparent
  );

  /* Borders (light) */
  --color-border-subtle: rgba(3, 16, 9, 0.08);
  --color-border-strong: rgba(3, 16, 9, 0.16);
  --color-border-focus: color-mix(in srgb, var(--color-primary) 55%, transparent);

  /* Status soft (light) */
  --color-success-soft: rgba(26, 211, 131, 0.16);
  --color-warning-soft: rgba(242, 184, 75, 0.18);
  --color-danger-soft: rgba(255, 91, 107, 0.18);
  --color-info-soft: rgba(55, 119, 255, 0.18);

  /* Sidebar (light) */
  --color-surface-sidebar: var(--color-surface-app);
  --color-surface-sidebar-drawer: var(--color-surface-popover);
  --color-surface-sidebar-footer: var(--color-surface-muted);
  --color-text-sidebar-item: var(--color-text-secondary);
  --color-text-sidebar-item-hover: var(--color-text-primary);
  --color-text-sidebar-item-active: var(--color-primary);
  --color-icon-sidebar-item: var(--color-text-muted);
  --color-icon-sidebar-item-hover: var(--color-text-secondary);
  --color-icon-sidebar-item-active: var(--color-primary);
  --color-icon-sidebar-chevron: var(--color-text-muted);

  /* Profile dropdown (light) */
  --color-surface-profile-trigger: var(--color-surface-card);
  --color-border-profile-trigger: var(--color-border-subtle);
  --color-text-profile-trigger: var(--color-text-primary);
  --color-surface-profile-menu: var(--color-surface-popover);
  --color-surface-profile-menu-hover: var(--color-surface-hover);
  --color-text-profile-menu: var(--color-text-secondary);
  --color-text-profile-menu-muted: var(--color-text-muted);
}