/* ============================================================
   THEMES
   Light and dark theme overrides
   Design tokens are defined in design-system.css
   ============================================================ */

/* Light Theme */
[data-theme="light"]{
  /* Backgrounds */
  --color-bg: #FCF4E3;
  --color-bg-primary: #FCF4E3;
  --color-bg-secondary: #F6E9D1;
  --color-bg-elevated: #FCF4E3;
  --color-bg-card: #FCF4E3;
  --color-bg-hover: #F0DFC1;
  --color-bg-active: #E8D3B1;
  --color-bg-disabled: #F9F0E0;
  
  /* Borders */
  --color-border: #E4D1B0;
  --color-border-hover: #CFB78E;
  --color-border-focus: #7560D9;
  --color-border-disabled: #F0E3CD;
  
  /* Text */
  --color-text-primary: #211A10;
  --color-text-secondary: #62513B;
  --color-text-tertiary: #8A765B;
  --color-text-disabled: #B9A98F;
  --color-text-inverse: #FFFFFF;

  /* Error and surface tokens */
  --color-danger-dark: #B4232D;
  --color-error-bg: #FBE8E5;
  --color-error-border: #D8756C;
  --color-error-primary: #B4232D;
  --color-error-dark: #7F1720;
  --color-error-text: #5C1D1D;
  --color-surface-primary: var(--color-bg-elevated);
  --color-surface-secondary: var(--color-bg-secondary);
  --color-surface-tertiary: var(--color-bg-hover);
  --easing-default: var(--ease-out);
  
  /* Shadows (lighter for light theme) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.18);
  
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-inner-lg: inset 0 2px 4px rgba(0, 0, 0, 0.08);
  
  /* Overlays */
  --overlay-subtle: rgba(0, 0, 0, 0.1);
  --overlay-normal: rgba(0, 0, 0, 0.3);
  --overlay-strong: rgba(0, 0, 0, 0.5);
}

/* Dark Theme */
[data-theme="dark"]{
  /* Backgrounds */
  --color-bg: #000000;
  --color-bg-primary: #000000;
  --color-bg-secondary: #080808;
  --color-bg-elevated: #101010;
  --color-bg-card: #101010;
  --color-bg-hover: #1A1A1A;
  --color-bg-active: #242424;
  --color-bg-disabled: #080808;
  
  /* Borders */
  --color-border: #2A2A2A;
  --color-border-hover: #484848;
  --color-border-focus: #7770DD;
  --color-border-disabled: #2B2B2B;
  
  /* Text */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B6B6B6;
  --color-text-tertiary: #858585;
  --color-text-disabled: #5A5A5A;
  --color-text-inverse: #000000;

  /* Error and surface tokens */
  --color-danger-dark: #B91C1C;
  --color-error-bg: #311315;
  --color-error-border: #8F3035;
  --color-error-primary: #FF7474;
  --color-error-dark: #B91C1C;
  --color-error-text: #FFE1E1;
  --color-surface-primary: var(--color-bg-elevated);
  --color-surface-secondary: var(--color-bg-secondary);
  --color-surface-tertiary: var(--color-bg-hover);
  --easing-default: var(--ease-out);
  
  /* Shadows (darker for dark theme) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.7);
  --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.8);
  
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-inner-lg: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  
  /* Overlays */
  --overlay-subtle: rgba(0, 0, 0, 0.3);
  --overlay-normal: rgba(0, 0, 0, 0.5);
  --overlay-strong: rgba(0, 0, 0, 0.7);
}