@import "../../theme.css";

:root {
  --color-primary: #1d4ed8;
  --color-primary-rgb: 29 78 216;
  --color-primary-hover: #1e40af;
  --color-primary-dark: #1e3a8a;
  --color-primary-dark-rgb: 30 58 138;
  --color-primary-10: rgba(29, 78, 216, 0.12);
  --color-primary-20: rgba(29, 78, 216, 0.24);
  --color-primary-50: rgba(29, 78, 216, 0.5);

  --color-accent: #ea580c;
  --color-accent-rgb: 234 88 12;
  --color-accent-dark: #c2410c;
  --color-accent-dark-rgb: 194 65 12;

  --color-bg: #fff8dc;
  --color-bg-card: #fffdf3;
  --color-surface: #fffdf3;
  --color-text: #0a0a0a;
  --color-text-secondary: #18181b;
  --color-text-muted: #3f3f46;
  --color-border: #0a0a0a;
  --color-border-light: rgba(0, 0, 0, 0.25);
  --color-border-dark: rgba(0, 0, 0, 0.45);

  --radius-sm: 0;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-xl: 6px;

  --border-width: 2px;
  --border-width-2: 3px;

  --shadow-sm: 2px 2px 0 #0a0a0a;
  --shadow-md: 3px 3px 0 #0a0a0a;
  --shadow-lg: 4px 4px 0 #0a0a0a;
  --shadow-xl: 6px 6px 0 #0a0a0a;
  --shadow-glass: var(--shadow-sm);
  --shadow-glass-sm: 1px 1px 0 #0a0a0a;
  --shadow-glow: none;
  --shadow-card: var(--shadow-sm);
  --shadow-modal: 8px 8px 0 #0a0a0a;
  --shadow-focus: 0 0 0 2px #fff8dc, 0 0 0 5px #0a0a0a;

  --button-hover-lift: 0.09375rem;
  --button-active-translate: 0.09375rem;
  --button-hover-shadow: var(--shadow-md);
  --button-active-shadow: var(--shadow-sm);

  --state-loading-bg: rgba(255, 248, 220, 0.9);
  --state-empty-bg: #fff4cc;
  --state-border-subtle: #0a0a0a;
}

html.dark {
  --color-primary: #93c5fd;
  --color-primary-rgb: 147 197 253;
  --color-primary-hover: #bfdbfe;
  --color-primary-dark: #60a5fa;
  --color-primary-dark-rgb: 96 165 250;
  --color-primary-10: rgba(147, 197, 253, 0.16);
  --color-primary-20: rgba(147, 197, 253, 0.3);
  --color-primary-50: rgba(147, 197, 253, 0.55);

  --color-accent: #fb923c;
  --color-accent-rgb: 251 146 60;
  --color-accent-dark: #f97316;
  --color-accent-dark-rgb: 249 115 22;

  --color-bg: #121212;
  --color-bg-card: #1b1b1b;
  --color-surface: #1b1b1b;
  --color-text: #f8fafc;
  --color-text-secondary: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-border: #f8fafc;
  --color-border-light: rgba(248, 250, 252, 0.4);
  --color-border-dark: rgba(0, 0, 0, 0.65);

  --shadow-sm: 2px 2px 0 #f8fafc;
  --shadow-md: 3px 3px 0 #f8fafc;
  --shadow-lg: 4px 4px 0 #f8fafc;
  --shadow-xl: 6px 6px 0 #f8fafc;
  --shadow-glass: var(--shadow-sm);
  --shadow-glass-sm: 1px 1px 0 #f8fafc;
  --shadow-card: var(--shadow-sm);
  --shadow-modal: 8px 8px 0 #f8fafc;
  --shadow-focus: 0 0 0 2px #121212, 0 0 0 5px #f8fafc;

  --state-loading-bg: rgba(18, 18, 18, 0.9);
  --state-empty-bg: #171717;
  --state-border-subtle: #f8fafc;
}