:root,
:root[data-theme="light"] {
  color-scheme: light;

  --color-cream: #F7F2E9;
  --color-cream-deep: #EFE7D8;
  --color-cream-soft: #FBF8F1;
  --color-white: #FFFFFF;
  --color-ink: #1C1A17;
  --color-ink-muted: #6B6458;
  --color-blue: #2952CC;
  --color-blue-deep: #1C3C99;
  --color-primary: var(--color-blue);
  --color-primary-btn: #2952CC;
  --color-success: #2F7D4F;
  --color-warning: #A66C00;
  --color-danger: #B3261E;
  --color-danger-btn: #B3261E;
  --color-success-soft: #DDF7E5;
  --color-border: #D8CDBA;
  --color-border-hover: #C2B49C;
  --color-panel-border: rgba(216, 205, 186, 0.84);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --border-radius-md: 14px;

  --shadow-fusion: 8px 8px 18px rgba(107, 100, 88, 0.16), -8px -8px 18px rgba(255, 255, 255, 0.72), inset 1px 1px 0 rgba(255, 255, 255, 0.58), inset -1px -1px 0 rgba(107, 100, 88, 0.08), 0 18px 36px rgba(28, 26, 23, 0.08);
  --shadow-fusion-soft: 5px 5px 14px rgba(107, 100, 88, 0.13), -5px -5px 14px rgba(255, 255, 255, 0.78), inset 1px 1px 0 rgba(255, 255, 255, 0.55), inset -1px -1px 0 rgba(107, 100, 88, 0.07);
  --shadow-pressed: inset 5px 5px 12px rgba(107, 100, 88, 0.16), inset -5px -5px 12px rgba(255, 255, 255, 0.72);

  --color-bg-page: var(--color-cream);
  --color-bg-subtle: var(--color-cream-deep);
  --color-surface: #FFFFFF;
  --color-surface-card: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-surface-muted: #E8DDCB;
  --color-surface-soft: var(--color-cream-soft);
  --color-surface-high: var(--color-cream-soft);
  --color-surface-container-low: #FBF8F1;
  --color-surface-container: #EFE7D8;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-input: var(--color-cream-soft);
  --color-surface-input-focus: #FFFFFF;

  --color-text-primary: var(--color-ink);
  --color-text-strong: var(--color-ink);
  --color-text-main: var(--color-ink);
  --color-text-muted: var(--color-ink-muted);

  --color-table-stripe: rgba(239, 231, 216, 0.45);
  --color-table-mobile-divider: rgba(28, 26, 23, 0.06);
  --color-wishlist-bg: rgba(255, 255, 255, 0.92);
  --color-toast-bg: #1C1A17;
  --color-toast-text: #FFFFFF;
  --color-modal-backdrop: rgba(28, 26, 23, 0.46);

  --status-success-bg: #DDF7E5;
  --status-success-text: #137333;
  --status-warning-bg: #FFF4CE;
  --status-warning-text: #8A5A00;
  --status-danger-bg: #FCE8E6;
  --status-danger-text: #B3261E;
  --status-neutral-bg: #EEF1F5;
  --status-neutral-text: #485465;

  --color-amber-50: #FFFBEB;
  --color-amber-200: #FDE68A;
  --color-amber-800: #92400E;

  --shadow-resting: var(--shadow-fusion-soft);
  --shadow-raised: var(--shadow-fusion);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-cream: #0D1017;
    --color-cream-deep: #121620;
    --color-cream-soft: #181D2A;
    --color-white: #FFFFFF;
    --color-ink: #F3F6FA;
    --color-ink-muted: #A3B1C6;
    --color-blue: #689BF7;
    --color-blue-deep: #4B7BE5;
    --color-primary: var(--color-blue);
    --color-primary-btn: #3362E0;
    --color-success: #4ADE80;
    --color-warning: #FBBF24;
    --color-danger: #F87171;
    --color-danger-btn: #DC2626;
    --color-success-soft: rgba(74, 222, 128, 0.16);
    --color-border: #262E42;
    --color-border-hover: #3B4766;
    --color-panel-border: rgba(148, 163, 184, 0.14);

    --shadow-fusion: 0 14px 32px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
    --shadow-fusion-soft: 0 6px 18px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --shadow-pressed: inset 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.03);

    --color-bg-page: #0D1017;
    --color-bg-subtle: #11151F;
    --color-surface: #181D2A;
    --color-surface-card: #151A26;
    --color-surface-elevated: #1E2536;
    --color-surface-muted: #232B3E;
    --color-surface-soft: #1E2434;
    --color-surface-high: #141925;
    --color-surface-container-low: #141824;
    --color-surface-container: #1B2130;
    --color-surface-container-lowest: #181D2A;
    --color-surface-input: #111520;
    --color-surface-input-focus: #151B28;

    --color-text-primary: var(--color-ink);
    --color-text-strong: #FFFFFF;
    --color-text-main: var(--color-ink);
    --color-text-muted: var(--color-ink-muted);

    --color-table-stripe: rgba(255, 255, 255, 0.025);
    --color-table-mobile-divider: rgba(255, 255, 255, 0.07);
    --color-wishlist-bg: rgba(24, 29, 42, 0.88);
    --color-toast-bg: #232B3E;
    --color-toast-text: #FFFFFF;
    --color-modal-backdrop: rgba(4, 6, 12, 0.72);

    --status-success-bg: rgba(74, 222, 128, 0.16);
    --status-success-text: #86EFAC;
    --status-warning-bg: rgba(251, 191, 36, 0.16);
    --status-warning-text: #FDE047;
    --status-danger-bg: rgba(248, 113, 113, 0.16);
    --status-danger-text: #FCA5A5;
    --status-neutral-bg: rgba(163, 177, 198, 0.16);
    --status-neutral-text: #E2E8F0;

    --color-amber-50: rgba(251, 191, 36, 0.1);
    --color-amber-200: rgba(251, 191, 36, 0.28);
    --color-amber-800: #FDE68A;

    --shadow-resting: var(--shadow-fusion-soft);
    --shadow-raised: var(--shadow-fusion);
  }
}

:root[data-theme="dark"],
.dark {
  color-scheme: dark;

  --color-cream: #0D1017;
  --color-cream-deep: #121620;
  --color-cream-soft: #181D2A;
  --color-white: #FFFFFF;
  --color-ink: #F3F6FA;
  --color-ink-muted: #A3B1C6;
  --color-blue: #689BF7;
  --color-blue-deep: #4B7BE5;
  --color-primary: var(--color-blue);
  --color-primary-btn: #3362E0;
  --color-success: #4ADE80;
  --color-warning: #FBBF24;
  --color-danger: #F87171;
  --color-danger-btn: #DC2626;
  --color-success-soft: rgba(74, 222, 128, 0.16);
  --color-border: #262E42;
  --color-border-hover: #3B4766;
  --color-panel-border: rgba(148, 163, 184, 0.14);

  --shadow-fusion: 0 14px 32px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  --shadow-fusion-soft: 0 6px 18px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-pressed: inset 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.03);

  --color-bg-page: #0D1017;
  --color-bg-subtle: #11151F;
  --color-surface: #181D2A;
  --color-surface-card: #151A26;
  --color-surface-elevated: #1E2536;
  --color-surface-muted: #232B3E;
  --color-surface-soft: #1E2434;
  --color-surface-high: #141925;
  --color-surface-container-low: #141824;
  --color-surface-container: #1B2130;
  --color-surface-container-lowest: #181D2A;
  --color-surface-input: #111520;
  --color-surface-input-focus: #151B28;

  --color-text-primary: var(--color-ink);
  --color-text-strong: #FFFFFF;
  --color-text-main: var(--color-ink);
  --color-text-muted: var(--color-ink-muted);

  --color-table-stripe: rgba(255, 255, 255, 0.025);
  --color-table-mobile-divider: rgba(255, 255, 255, 0.07);
  --color-wishlist-bg: rgba(24, 29, 42, 0.88);
  --color-toast-bg: #232B3E;
  --color-toast-text: #FFFFFF;
  --color-modal-backdrop: rgba(4, 6, 12, 0.72);

  --status-success-bg: rgba(74, 222, 128, 0.16);
  --status-success-text: #86EFAC;
  --status-warning-bg: rgba(251, 191, 36, 0.16);
  --status-warning-text: #FDE047;
  --status-danger-bg: rgba(248, 113, 113, 0.16);
  --status-danger-text: #FCA5A5;
  --status-neutral-bg: rgba(163, 177, 198, 0.16);
  --status-neutral-text: #E2E8F0;

  --color-amber-50: rgba(251, 191, 36, 0.1);
  --color-amber-200: rgba(251, 191, 36, 0.28);
  --color-amber-800: #FDE68A;

  --shadow-resting: var(--shadow-fusion-soft);
  --shadow-raised: var(--shadow-fusion);
}