/* ==========================================================================
   WhatsON - "Signal" design tokens (GLOBAL RULES §6)
   The single source of truth for colour, type, spacing and radii.
   NEVER hardcode a hex value anywhere else - reference these variables.
   Dark mode switches by [data-theme="dark"] on <html> (set before paint).
   Client branding overrides --accent + logo at runtime via an injected
   <style> block, so every colour here is a variable on purpose.

   2024 refresh: richer neutrals, layered soft shadows, larger radii and a
   derived accent gradient. Every new token is built FROM --accent so runtime
   white-label branding keeps working.
   ========================================================================== */

:root {
  /* --- Surfaces --------------------------------------------------------- */
  --bg:        #FFFFFF;
  --surface:   #F7F8FB;
  --surface-2: #EDF1F7;
  --surface-3: #E4EAF3;
  --border:    #E5E9F0;
  --border-strong: #D3DAE6;
  --text:      #0F172A;
  --muted:     #64748B;
  --faint:     #94A3B8;

  /* App canvas tint (subtle cool wash behind the shell) */
  --canvas:    #F4F6FB;

  /* --- Action accent (the ONLY action colour) --------------------------- */
  --accent:      #5B4BFF;
  --accent-fg:   #FFFFFF;   /* readable foreground on --accent (Phase 3 computes) */
  --accent-50:   #EFEDFF;
  --accent-100:  #DBD7FF;
  --accent-200:  #BDB5FF;
  --accent-300:  #9A8DFF;
  --accent-400:  #7A69FF;
  --accent-500:  #5B4BFF;
  --accent-600:  #4B3DDB;
  --accent-700:  #3B30AE;
  --accent-800:  #2C2482;
  --accent-900:  #1E1859;

  /* Derived accent surfaces / gradient - built from --accent so branding sticks. */
  --accent-soft:     color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-softer:   color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-gradient: linear-gradient(135deg,
                       color-mix(in srgb, var(--accent) 82%, #FFFFFF 18%) 0%,
                       var(--accent) 55%,
                       color-mix(in srgb, var(--accent) 78%, #000000 22%) 100%);
  --accent-glow:     0 6px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent);

  /* --- Channel colours (meaning = channel, never decoration) ------------ */
  --ch-whatsapp:  #25D366;
  --ch-instagram: #E1306C;
  --ch-messenger: #0084FF;
  --ch-sms:       #F59E0B;
  --ch-email:     #7C3AED;
  --ch-webchat:   #6366F1;   /* Website live chat / bot */

  /* --- Status ----------------------------------------------------------- */
  --ok:     #16A34A;
  --warn:   #D97706;
  --danger: #DC2626;
  --info:   #0284C7;

  /* --- Radii & controls ------------------------------------------------- */
  --radius:         14px;  /* cards */
  --radius-lg:      18px;  /* large panels / hero */
  --radius-control: 10px;  /* inputs, buttons */
  --radius-pill:    999px;
  --control-h:      38px;
  --control-h-sm:   32px;
  --control-h-lg:   46px;  /* touch target floor on mobile */

  /* --- Spacing (8px grid) ---------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Typography ------------------------------------------------------- */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 40px;
  --lh:     1.55;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Elevation & focus ------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 4px -1px rgba(16, 24, 40, 0.05), 0 12px 24px -6px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 10px 20px -6px rgba(16, 24, 40, 0.10), 0 24px 48px -12px rgba(16, 24, 40, 0.18);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --spine-w: 3px;   /* the channel spine rail */

  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}

/* ==========================================================================
   Dark theme - set by <html data-theme="dark">
   ========================================================================== */
:root[data-theme="dark"] {
  --bg:        #121826;
  --surface:   #182031;
  --surface-2: #1F293C;
  --surface-3: #273249;
  --border:    #29344A;
  --border-strong: #384763;
  --text:      #E8ECF4;
  --muted:     #94A3B8;
  --faint:     #667389;

  --canvas:    #0B0F1A;

  --accent-fg: #FFFFFF;

  --accent-soft:   color-mix(in srgb, var(--accent) 24%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-glow:   0 8px 22px -8px color-mix(in srgb, var(--accent) 70%, transparent);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.40), 0 12px 24px -6px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 10px 20px -6px rgba(0, 0, 0, 0.45), 0 24px 48px -12px rgba(0, 0, 0, 0.60);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);

  color-scheme: dark;
}

/* Respect reduced-motion globally (GLOBAL RULES §6). */
@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms; }
}