/* Shared design tokens — warm amber/cream theme, with a real (not inverted)
   dark variant. Both chat.css and admin.css draw exclusively from these. */
:root {
  color-scheme: light;

  --color-bg: #fef6f0;
  --color-surface: #fffcf7;
  --color-surface-soft: #fffdf9;
  --color-surface-alt: #fffbeb;
  --color-border: #fde68a;
  --color-border-strong: #fcd34d;

  --color-text: #2d1f1a;
  --color-text-muted: #8b6f5a;
  --color-text-faint: #b88a6a;
  --color-heading-strong: #78350f;
  --color-accent-strong: #92400e;

  --color-primary: #f59e0b;
  --color-primary-dark: #d97706;
  --color-primary-darker: #b45309;
  --color-primary-disabled: #d4a373;

  --color-success: #059669;
  --color-success-dark: #047857;
  --color-danger: #dc2626;

  --color-overlay: rgba(45, 31, 26, 0.6);
  --color-overlay-soft: rgba(45, 31, 26, 0.5);

  --shadow-sm: 0 2px 6px rgba(180, 83, 9, 0.08);
  --shadow-md: 0 3px 12px rgba(180, 83, 9, 0.25);
  --shadow-lg: 0 8px 40px rgba(180, 83, 9, 0.12);
  --shadow-primary: 0 2px 8px rgba(245, 158, 11, 0.3);
  --shadow-modal: 0 25px 80px rgba(45, 31, 26, 0.35);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --chart-fill: var(--color-primary-dark);
  --chart-fill-hover: var(--color-primary);
  --chart-grid: rgba(120, 83, 15, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --color-bg: #18120d;
    --color-surface: #221810;
    --color-surface-soft: #281c13;
    --color-surface-alt: #2c1f15;
    --color-border: #4a3420;
    --color-border-strong: #5c4023;

    --color-text: #f5ead9;
    --color-text-muted: #c9a883;
    --color-text-faint: #a1815f;
    --color-heading-strong: #fbbf24;
    --color-accent-strong: #fcd34d;

    --color-primary: #f59e0b;
    --color-primary-dark: #fbbf24;
    --color-primary-darker: #fcd34d;
    --color-primary-disabled: #6b4d30;

    --color-success: #34d399;
    --color-success-dark: #10b981;
    --color-danger: #f87171;

    --color-overlay: rgba(0, 0, 0, 0.65);
    --color-overlay-soft: rgba(0, 0, 0, 0.55);

    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 3px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
    --shadow-primary: 0 2px 10px rgba(245, 158, 11, 0.35);
    --shadow-modal: 0 25px 80px rgba(0, 0, 0, 0.55);

    --chart-fill: var(--color-primary);
    --chart-fill-hover: var(--color-primary-dark);
    --chart-grid: rgba(245, 230, 200, 0.1);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}