/* Light is the default */
:root {
  color-scheme: light;

  /* 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: #db7f67;
  --color-warning-rgb: 219 127 103;
  --color-danger: #dc2626;
  --color-danger-rgb: 220 38 38;
  --color-info: #3b82f6;
  --color-info-rgb: 59 130 246;

  /* Amount direction (light) */
  --color-amount-in: #16a76a;
  --color-amount-out: #e11d48;

  /* Core surfaces (light) */
  --color-main-bg: #f5f5f5;
  --color-dark-grey: var(--color-main-bg);
  --color-surface-app: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-muted: #ededed;
  --color-surface-hover: color-mix(
    in srgb,
    var(--color-primary) 8%,
    #f5f5f5 92%
  );
  --color-surface-highlight: color-mix(
    in srgb,
    var(--color-primary) 10%,
    #ffffff 90%
  );
  --color-surface-glass: rgba(255, 255, 255, 0.75);
  --color-surface-popover: rgba(255, 255, 255, 0.95);
  --color-surface-overlay: color-mix(
    in srgb,
    var(--color-secondary) 12%,
    rgba(26, 26, 26, 0.06)
  );

  /* 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;
  --accent-icon-invert: 1;

  /* Topbar (light — dark brand bar) */
  --color-surface-topbar: var(--color-secondary);
  --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;

  /* Tour tooltip (dark version for light mode) */
  --color-tour-tooltip-bg: #1a1a1a !important;
  --color-tour-tooltip-border: rgba(26, 26, 26, 0.08) !important;
  --color-tour-tooltip-title-text: #f5f5f5 !important;
  --color-tour-tooltip-body-text: #d4d4d4 !important;
  --color-tour-tooltip-button-primary-bg: var(--color-primary) !important;
  --color-tour-tooltip-button-primary-text: #ffffff !important;
  --color-tour-tooltip-button-primary-hover: color-mix(
    in srgb,
    var(--color-tour-tooltip-button-primary-bg) 80%,
    #000 !important
  );
  --color-tour-tooltip-button-secondary-border: rgba(
    26,
    26,
    26,
    0.08
  ) !important;
  --color-tour-tooltip-button-secondary-hover: var(--color-primary) !important;
  --color-tour-tooltip-button-secondary-text: #f5f5f5 !important;
  --color-tour-tooltip-button-skip-text: #d4d4d4 !important;
  --color-tour-tooltip-button-skip-hover: var(--color-primary) !important;

  /* Status soft (light) */
  --color-success-soft: rgba(26, 211, 131, 0.16);
  --color-warning-soft: rgba(219, 127, 103, 0.18);
  --color-danger-soft: rgba(220, 38, 38, 0.18);
  --color-info-soft: rgba(59, 130, 246, 0.18);
}

.dark {
  color-scheme: dark;

  /* Brand */
  --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: #db7f67;
  --color-warning-rgb: 219 127 103;
  --color-danger: #dc2626;
  --color-danger-rgb: 220 38 38;
  --color-info: #3b82f6;
  --color-info-rgb: 59 130 246;

  /* Amount direction */
  --color-amount-in: #1ad383;
  --color-amount-out: #fb7185;

  /* Surfaces (dark) — deep black */
  --color-surface-ink: #0d0d0d;
  --color-main-bg: #0d0d0d;
  --color-dark-grey: color-mix(
    in srgb,
    var(--color-primary) 8%,
    var(--color-surface-ink)
  );

  --color-surface-app: #141414;
  --color-surface-card: #1e1e1e;
  --color-surface-muted: #171717;
  --color-surface-hover: color-mix(
    in srgb,
    var(--color-primary) 10%,
    rgba(255, 255, 255, 0.04)
  );
  --color-surface-highlight: color-mix(
    in srgb,
    var(--color-primary) 16%,
    var(--color-surface-card)
  );
  --color-surface-glass: color-mix(
    in srgb,
    var(--color-surface-app) 78%,
    transparent
  );
  --color-surface-popover: color-mix(
    in srgb,
    var(--color-surface-card) 95%,
    transparent
  );
  --color-surface-overlay: color-mix(
    in srgb,
    var(--color-secondary) 28%,
    rgba(255, 255, 255, 0.06)
  );

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

  /* Topbar (dark — black brand) */
  --color-surface-topbar: var(--color-secondary);
  --color-text-on-topbar: #f5f5f5;

  /* Sidebar */
  --color-icon-sidebar-item-active: var(--color-primary);
  --color-text-sidebar-item-active: var(--color-primary);
  --color-surface-sidebar-item-active: color-mix(
    in srgb,
    var(--color-primary) 18%,
    transparent
  );
  --color-icon-sidebar-item: var(--color-text-secondary);
  --color-text-sidebar-item: var(--color-text-secondary);
  --color-surface-sidebar-item-hover: color-mix(
    in srgb,
    var(--color-primary) 18%,
    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-text-muted);
  --color-tabbar-item-inactive-text: var(--color-text-tertiary);

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

  /* Tour tooltip (invert for contrast) */
  --color-tour-tooltip-bg: #ffffff;
  --color-tour-tooltip-border: rgba(26, 26, 26, 0.08);
  --color-tour-tooltip-title-text: #333333;
  --color-tour-tooltip-body-text: #1a1a1a;
  --color-tour-tooltip-button-primary-bg: #f04d48;
  --color-tour-tooltip-button-primary-text: #ffffff;
  --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(26, 26, 26, 0.08);
  --color-tour-tooltip-button-secondary-hover: var(--color-primary);
  --color-tour-tooltip-button-secondary-text: #1a1a1a;
  --color-tour-tooltip-button-skip-text: #333333;
  --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) 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);
}

/* Keep .light identical to :root for any existing references */
.light {
  color-scheme: light;

  /* 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: #db7f67;
  --color-warning-rgb: 219 127 103;
  --color-danger: #dc2626;
  --color-danger-rgb: 220 38 38;
  --color-info: #3b82f6;
  --color-info-rgb: 59 130 246;

  /* Amount direction (light) */
  --color-amount-in: #16a76a;
  --color-amount-out: #e11d48;

  /* Core surfaces (light) */
  --color-main-bg: #f5f5f5;
  --color-dark-grey: var(--color-main-bg);
  --color-surface-app: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-muted: #ededed;
  --color-surface-hover: color-mix(
    in srgb,
    var(--color-primary) 8%,
    #f5f5f5 92%
  );
  --color-surface-highlight: color-mix(
    in srgb,
    var(--color-primary) 10%,
    #ffffff 90%
  );
  --color-surface-glass: rgba(255, 255, 255, 0.75);
  --color-surface-popover: rgba(255, 255, 255, 0.95);
  --color-surface-overlay: color-mix(
    in srgb,
    var(--color-secondary) 12%,
    rgba(26, 26, 26, 0.06)
  );

  /* 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;
  --accent-icon-invert: 1;

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

  /* Sidebar */
  --color-icon-sidebar-item-active: var(--color-primary);
  --color-text-sidebar-item-active: var(--color-primary);
  --color-surface-sidebar-item-active: color-mix(
    in srgb,
    var(--color-primary) 14%,
    transparent
  );
  --color-icon-sidebar-item: var(--color-text-secondary);
  --color-text-sidebar-item: var(--color-text-secondary);
  --color-surface-sidebar-item-hover: color-mix(
    in srgb,
    var(--color-primary) 10%,
    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-text-muted);
  --color-tabbar-item-inactive-text: var(--color-text-tertiary);

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

  /* Tour tooltip (dark version for light mode) */
  --color-tour-tooltip-bg: #1a1a1a !important;
  --color-tour-tooltip-border: rgba(26, 26, 26, 0.08) !important;
  --color-tour-tooltip-title-text: #f5f5f5 !important;
  --color-tour-tooltip-body-text: #d4d4d4 !important;
  --color-tour-tooltip-button-primary-bg: var(--color-primary) !important;
  --color-tour-tooltip-button-primary-text: #ffffff !important;
  --color-tour-tooltip-button-primary-hover: color-mix(
    in srgb,
    var(--color-tour-tooltip-button-primary-bg) 80%,
    #000 !important
  );
  --color-tour-tooltip-button-secondary-border: rgba(
    26,
    26,
    26,
    0.08
  ) !important;
  --color-tour-tooltip-button-secondary-hover: var(--color-primary) !important;
  --color-tour-tooltip-button-secondary-text: #f5f5f5 !important;
  --color-tour-tooltip-button-skip-text: #d4d4d4 !important;
  --color-tour-tooltip-button-skip-hover: var(--color-primary) !important;

  /* Status soft (light) */
  --color-success-soft: rgba(26, 211, 131, 0.16);
  --color-warning-soft: rgba(219, 127, 103, 0.18);
  --color-danger-soft: rgba(220, 38, 38, 0.18);
  --color-info-soft: rgba(59, 130, 246, 0.18);
}