/* WaTalkers design tokens (brand direction E: Aurora + Gold). One source for the app, website and marketing.
   Light is the default inside GHL; dark follows the system or the [data-theme=dark] switch;
   [data-theme=whitelabel] is the neutral theme for reseller/partner branding. */

:root {
  /* Brand */
  --wt-accent: #050E16;        /* midnight: buttons, links, focus (19:1 on white). No cyan in the UI. */
  --wt-accent-hover: #1A2430;
  --wt-accent-soft: #FBF1DC;   /* gold tint behind accent elements */
  --wt-gold: #D9A441;          /* premium only: agency tier, highlights */
  --wt-gold-ink: #7A5410;      /* gold text on light (6:1) */
  --wt-gold-soft: #FBF1DC;
  --wt-aurora: linear-gradient(90deg, #B8862E, #E8C47A); /* gold: progress and highlights */
  --wt-gold-gradient: linear-gradient(90deg, #D9A441, #F6E3B4);

  /* Surfaces and text (light) */
  --wt-canvas: #F7F8FA;
  --wt-surface: #FFFFFF;
  --wt-sunken: #EEF1F4;
  --wt-ink: #08141C;
  --wt-ink-2: #34424C;
  --wt-muted: #5B6873;
  --wt-line: #E4E7EC;
  --wt-line-strong: #C8CED6;
  --wt-night: #050E16;         /* dark surfaces, marketing */

  /* Status */
  --wt-ok: #15803D;   --wt-ok-soft: #DCFCE7;
  --wt-warn: #A15C07; --wt-warn-soft: #FEF3C7;
  --wt-bad: #B91C1C;  --wt-bad-soft: #FEE2E2;

  /* Glass (headers, heroes, marketing; never tables) */

  /* Type */
  --wt-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --wt-font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wt-font-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  /* Shape and depth */
  --wt-radius-sm: 8px;
  --wt-radius: 12px;
  --wt-radius-lg: 18px;
  --wt-radius-xl: 24px;
  --wt-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --wt-glow: 0 6px 24px rgba(124, 92, 255, 0.28);
  --wt-on-accent: #FFFFFF;
  --wt-wordmark: #050E16;       /* WaTalkers name: the icon's midnight, solid */
}

/* Dark: midnight surfaces, brighter accent for contrast, glass shows depth. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="whitelabel"]) {
    --wt-accent: #D9A441; --wt-accent-hover: #E8C47A; --wt-on-accent: #050E16; --wt-wordmark: #FFFFFF; --wt-accent-soft: rgba(217, 164, 65, 0.14);
    --wt-gold-ink: #E8C47A; --wt-gold-soft: rgba(217, 164, 65, 0.14);
    --wt-canvas: #121821; --wt-surface: #1A222D; --wt-sunken: #222C38;
    --wt-ink: #E8EDF2; --wt-ink-2: #C2CBD4; --wt-muted: #94A0AC; --wt-line: #2A3441; --wt-line-strong: #3A4656;
    --wt-ok: #4ADE80; --wt-ok-soft: rgba(74, 222, 128, 0.12); --wt-warn: #FBBF24; --wt-warn-soft: rgba(251, 191, 36, 0.12);
    --wt-bad: #F87171; --wt-bad-soft: rgba(248, 113, 113, 0.12);
    --wt-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --wt-accent: #D9A441; --wt-accent-hover: #E8C47A; --wt-on-accent: #050E16; --wt-wordmark: #FFFFFF; --wt-accent-soft: rgba(217, 164, 65, 0.14);
  --wt-gold-ink: #E8C47A; --wt-gold-soft: rgba(217, 164, 65, 0.14);
  --wt-canvas: #121821; --wt-surface: #1A222D; --wt-sunken: #222C38;
  --wt-ink: #E8EDF2; --wt-ink-2: #C2CBD4; --wt-muted: #94A0AC; --wt-line: #2A3441; --wt-line-strong: #3A4656;
  --wt-ok: #4ADE80; --wt-ok-soft: rgba(74, 222, 128, 0.12); --wt-warn: #FBBF24; --wt-warn-soft: rgba(251, 191, 36, 0.12);
  --wt-bad: #F87171; --wt-bad-soft: rgba(248, 113, 113, 0.12);
  --wt-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* White-label: neutral, no aurora or gold, so a partner's logo and color can take over (set --wt-accent). */
:root[data-theme="whitelabel"] {
  --wt-accent: #374151; --wt-accent-hover: #1F2937; --wt-accent-soft: #F1F3F5;
  --wt-gold: #6B7280; --wt-gold-ink: #374151; --wt-gold-soft: #F1F3F5;
  --wt-aurora: linear-gradient(90deg, var(--wt-accent), var(--wt-accent));
  --wt-glow: none;
}