/* ─── Design tokens ──────────────────────────────────────────────
   :root = light theme (default). :root[data-theme='dark'] = dark theme
   override — same attribute/convention Buzzer's ThemeContext.jsx already
   uses (document.documentElement.setAttribute('data-theme', 'light'|'dark')),
   so a future React consumer needs zero changes to its toggle mechanism,
   only a token-file swap.

   Token names are semantic (--clr-accent, not --clr-indigo) on purpose:
   the light theme below is NOT an indigo/violet/cyan palette (it's built
   around Buzzer's existing warm ivory/teal identity), so a hue-literal
   name would be actively misleading once both themes exist side by side.
   The dark theme's actual colors are an unmodified extraction from
   account-hub/hermes-mail's shared.css — only the variable names changed. */

:root {
  /* ivory/teal, extending Buzzer's existing light palette with a third
     accent (warm terracotta) for gradients/glass that need 3 stops */
  --bg:           #f2ece3;
  --bg-alt:       #ece4d6;
  --bg-card:      rgba(255, 252, 247, 0.75);
  --bg-glass:     rgba(255, 252, 247, 0.55);
  --clr-accent:   #257a6f;
  --clr-accent-2: #e8926b;
  --clr-accent-3: #d9a441;
  --clr-text:     #55504a;
  --clr-muted:    #857c6d;
  --clr-border:   rgba(37, 122, 111, 0.16);
  --clr-border-h: rgba(37, 122, 111, 0.4);
  --gradient:     linear-gradient(135deg, var(--clr-accent), var(--clr-accent-2), var(--clr-accent-3));
  --gradient-btn: linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-accent-2) 100%);
  --shadow-glow:  0 0 40px rgba(37, 122, 111, 0.18);
  --shadow-card:  0 8px 32px rgba(43, 39, 34, 0.14);

  /* theme-invariant — declared once, dark below doesn't redeclare these */
  --radius:       16px;
  --radius-sm:    10px;
  --transition:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font:         'Inter', sans-serif;

  color-scheme: light;
}

:root[data-theme='dark'] {
  /* extracted as-is from account-hub/hermes-mail's shared.css — same
     values, renamed variables only (see file header) */
  --bg:           #05051a;
  --bg-alt:       #080820;
  --bg-card:      rgba(15, 15, 40, 0.7);
  --bg-glass:     rgba(8, 8, 32, 0.6);
  --clr-accent:   #6366f1;
  --clr-accent-2: #8b5cf6;
  --clr-accent-3: #22d3ee;
  --clr-text:     #f1f5f9;
  --clr-muted:    #64748b;
  --clr-border:   rgba(99, 102, 241, 0.18);
  --clr-border-h: rgba(99, 102, 241, 0.45);
  --gradient:     linear-gradient(135deg, var(--clr-accent), var(--clr-accent-2), var(--clr-accent-3));
  --gradient-btn: linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-accent-2) 100%);
  --shadow-glow:  0 0 40px rgba(99, 102, 241, 0.25);
  --shadow-card:  0 8px 32px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}