/*
 * Vairo design tokens — warm neutral palette + Inter typography.
 *
 * Single source of truth for color, typography, spacing, radii.
 * Pages link this file BEFORE their own <style> block; their inline :root
 * declarations are removed during migration.
 *
 * The alias layer at the bottom maps the legacy --color-* names to the new
 * tokens so existing CSS rules across the codebase keep working without a
 * mass find-and-replace.
 */

/* ============================================================================
 * Light mode (default)
 * ========================================================================= */
:root,
[data-theme="light"] {
  /* ---- Surfaces ---- */
  --bg:           #f5f5f4;        /* Page canvas */
  --bg-2:         #fafaf9;        /* Subtle elevated section bg (overview tab inner, YTD card) */
  --surface:      #ffffff;        /* Cards */
  --surface-2:    #fafaf9;        /* Inset surface (compact panels) */

  /* ---- Lines / borders ---- */
  --line:         #e7e5e4;        /* Card + column borders */
  --line-2:       #f0efed;        /* Internal dividers (rows inside cards) */

  /* ---- Ink (text) ---- */
  --ink:          #0c0a09;        /* Primary text */
  --ink-2:        #44403c;        /* Secondary text / icon strokes */
  --ink-3:        #78716c;        /* Tertiary / muted */
  --ink-4:        #a8a29e;        /* Disabled / placeholder / unchecked-box border */

  /* ---- Accent (primary actions, current step) ---- */
  --accent:           #0f172a;    /* Slate 900 — primary buttons, current stepper segment, active timeline dot */
  --accent-hover:     #1e293b;    /* Slate 800 — primary button hover */
  --accent-fg:        #ffffff;    /* Text on accent */
  --accent-subtle:    #f1f5f9;    /* Slate 100 — neutral pill bg, neutral chip bg */
  --accent-subtle-fg: #334155;    /* Slate 700 — neutral pill text */

  /* ---- Info (blue — "New" pill, Chat channel) ---- */
  --info:         #2563eb;
  --info-bg:      #eff6ff;

  /* ---- Good (green — Sent quote, WhatsApp, active timeline dot) ---- */
  --good:         #16a34a;
  --good-bg:      #ecfdf5;

  /* ---- Warn (amber — high priority, free-notes callout) ---- */
  --warn:         #92400e;        /* High-priority pill text */
  --warn-strong:  #78350f;        /* Free-notes ink */
  --warn-bg:      #fefce8;
  --warn-border:  #fde68a;

  /* ---- Bad (red — destructive, errors, rejected status) ---- */
  --bad:          #dc2626;
  --bad-strong:   #991b1b;
  --bad-bg:       #fef2f2;

  /* ---- Channel-specific (comms) ---- */
  --channel-email-bg:    #eff6ff;
  --channel-email:       #2563eb;
  --channel-whatsapp-bg: #ecfdf5;
  --channel-whatsapp:    #16a34a;
  --channel-chat-bg:     #eef2ff;
  --channel-chat:        #4f46e5;
  --channel-teams-bg:    #ede9fe;
  --channel-teams:       #6264a7;

  /* ---- Shadows (mostly flat — design uses 1px borders, not shadows) ---- */
  --shadow-sm:    0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md:    0 2px 4px rgba(28, 25, 23, 0.05), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-lg:    0 4px 12px rgba(28, 25, 23, 0.08), 0 2px 4px rgba(28, 25, 23, 0.04);
  --shadow-focus: 0 0 0 3px rgba(15, 23, 42, 0.15);

  /* ---- Typography ---- */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    17px;
  --text-xl:    20px;
  --text-2xl:   22px;

  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  /* ---- Spacing (4px scale) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- Radii ---- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* ---- Motion ---- */
  --duration-fast:   100ms;
  --duration-normal: 200ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
 * Dark mode (warm-dark — same warm tone, inverted)
 * ========================================================================= */
[data-theme="dark"] {
  --bg:           #1c1917;        /* Stone 900 */
  --bg-2:         #292524;        /* Stone 800 */
  --surface:      #292524;
  --surface-2:    #1c1917;

  --line:         #44403c;        /* Stone 700 */
  --line-2:       #292524;

  --ink:          #fafaf9;        /* Stone 50 */
  --ink-2:        #d6d3d1;        /* Stone 300 */
  --ink-3:        #a8a29e;        /* Stone 400 */
  --ink-4:        #78716c;        /* Stone 500 */

  --accent:           #e2e8f0;    /* Light slate — inverted primary in dark */
  --accent-hover:     #cbd5e1;
  --accent-fg:        #0f172a;
  --accent-subtle:    #334155;
  --accent-subtle-fg: #e2e8f0;

  --info:         #60a5fa;
  --info-bg:      #1e3a8a;

  --good:         #4ade80;
  --good-bg:      #14532d;

  --warn:         #fbbf24;
  --warn-strong:  #fde68a;
  --warn-bg:      #78350f;
  --warn-border:  #92400e;

  --bad:          #f87171;
  --bad-strong:   #fca5a5;
  --bad-bg:       #7f1d1d;

  --channel-email-bg:    #1e3a8a;
  --channel-email:       #93c5fd;
  --channel-whatsapp-bg: #14532d;
  --channel-whatsapp:    #4ade80;
  --channel-chat-bg:     #312e81;
  --channel-chat:        #a5b4fc;
  --channel-teams-bg:    #312e81;
  --channel-teams:       #c4b5fd;

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg:    0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(226, 232, 240, 0.25);
}

/* ============================================================================
 * Backward-compat alias layer
 *
 * Maps legacy --color-* token names used across existing pages to the new
 * tokens above. Removing this layer is a follow-up; for now it keeps the
 * codebase rendering correctly without touching every CSS rule.
 * ========================================================================= */
:root,
[data-theme="light"],
[data-theme="dark"] {
  /* surfaces */
  --color-bg-primary:     var(--surface);
  --color-bg-secondary:   var(--bg);
  --color-bg-tertiary:    var(--bg-2);
  --color-bg-elevated:    var(--surface);

  /* text */
  --color-text-primary:   var(--ink);
  --color-text-secondary: var(--ink-2);
  --color-text-tertiary:  var(--ink-3);

  /* borders */
  --color-border-default: var(--line);
  --color-border-strong:  var(--ink-4);
  --color-border-subtle:  var(--line-2);

  /* accent (legacy used blue; new system uses slate for buttons + blue for info)
     We keep the legacy --color-accent-* pointing at the new accent (slate) to
     match the design's button styling. Pages that semantically wanted "info
     blue" should migrate to --info / --info-bg. */
  --color-accent-primary:         var(--accent);
  --color-accent-primary-hover:   var(--accent-hover);
  --color-accent-primary-subtle:  var(--accent-subtle);

  /* status */
  --color-success:    var(--good);
  --color-success-bg: var(--good-bg);
  --color-warning:    var(--warn);
  --color-warning-bg: var(--warn-bg);
  --color-error:      var(--bad);
  --color-error-bg:   var(--bad-bg);
  --color-info:       var(--info);
  --color-info-bg:    var(--info-bg);

  /* channel (legacy names from communications panel) */
  --color-channel-email:       var(--channel-email);
  --color-channel-email-bg:    var(--channel-email-bg);
  --color-channel-whatsapp:    var(--channel-whatsapp);
  --color-channel-whatsapp-bg: var(--channel-whatsapp-bg);
  --color-channel-teams:       var(--channel-teams);
  --color-channel-teams-bg:    var(--channel-teams-bg);
  --color-channel-chat:        var(--channel-chat);
  --color-channel-chat-bg:     var(--channel-chat-bg);
}