:root {
  color-scheme: dark;

  /* Brand (PayAccSys) — Red primary, Black secondary, Slate tertiary */
  --color-primary: #f04d48;
  --color-primary-rgb: 240, 77, 72;
  --color-secondary: #1a1a1a;
  --color-secondary-rgb: 26, 26, 26;
  --color-tertiary: #4a4a4a;
  --color-tertiary-rgb: 74, 74, 74;

  /* Status */
  --color-success: #1ad383;
  --color-success-rgb: 26, 211, 131;
  --color-warning: #f2b84b;
  --color-warning-rgb: 242, 184, 75;
  --color-danger: #ff5b6b;
  --color-danger-rgb: 255, 91, 107;
  --color-info: #3b82f6;
  --color-info-rgb: 59, 130, 246;

  /* Surfaces (dark) — deep black base */
  --color-main-bg: #0d0d0d;
  --color-surface-app: #141414;
  --color-surface-card: #1e1e1e;
  --color-surface-muted: #171717;
  --color-surface-hover: rgba(240, 77, 72, 0.08);
  --color-surface-highlight: color-mix(
    in srgb,
    var(--color-primary) 10%,
    var(--color-surface-card)
  );
  --color-surface-glass: rgba(20, 20, 20, 0.72);
  --color-surface-popover: rgba(30, 30, 30, 0.92);
  --color-surface-overlay: rgba(255, 255, 255, 0.08);

  /* Topbar (dark brand bar) */
  --color-surface-topbar: var(--color-secondary);

  /* Text (dark) */
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #d4d4d4;
  --color-text-tertiary: #a3a3a3;
  --color-text-muted: #737373;
  --color-text-faint: #525252;
  --color-text-inverse: #1a1a1a;
  --color-text-on-accent: #ffffff;

  /* Text/icons on topbar */
  --color-text-on-topbar: #f5f5f5;

  /* 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);

  /* Buttons (dark) */
  --color-button-primary-text: #ffffff;
  --color-button-secondary-text: var(--color-text-primary);
  --color-button-danger-text: #ffffff;

  /* 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);

  /* 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) 20%, 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 grey/white */
  --color-main-bg: #f5f5f5;
  --color-surface-app: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-muted: #ededed;
  --color-surface-hover: rgba(240, 77, 72, 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(26, 26, 26, 0.06);

  /* Topbar (light — dark brand bar) */
  --color-surface-topbar: var(--color-secondary);

  /* Text (light) */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #333333;
  --color-text-tertiary: #4a4a4a;
  --color-text-muted: #6b6b6b;
  --color-text-faint: #8a8a8a;
  --color-text-inverse: #f5f5f5;
  --color-text-on-accent: #ffffff;

  /* Text/icons on topbar */
  --color-text-on-topbar: #f5f5f5;

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

  /* Buttons (light) */
  --color-button-primary-text: #ffffff;
  --color-button-secondary-text: var(--color-text-primary);
  --color-button-danger-text: #ffffff;

  /* 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);

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