/* ============================================================================
   tokens.css — MsgFlow v2 design tokens
   All CSS files load this first. Screen-specific files may add their own
   custom properties but must never redefine the canonical names here.
   ============================================================================ */

:root {
  /* ── Brand (WhatsApp green) ─────────────────────────────────────────────── */
  --primary:        #00A884;
  --primary-dark:   #008069;
  --primary-hover:  #00997A;
  --primary-light:  #E7F8F0;

  /* ── Accent (lavender/purple) ───────────────────────────────────────────── */
  --accent:         #6C63FF;
  --accent-dark:    #5A52D5;
  --accent-light:   #EEEAF5;
  --accent-lighter: #F6F4FB;

  /* ── Surfaces ───────────────────────────────────────────────────────────── */
  --bg-page:   #F0ECF7;   /* lavender page canvas */
  --bg-card:   #FFFFFF;
  --bg-nav:    #FFFFFF;
  --bg-input:  #F6F4FB;

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --text:            #1A1D2E;
  --text-secondary:  #6B7280;
  --text-muted:      #9CA3AF;

  /* ── Borders ────────────────────────────────────────────────────────────── */
  --border:        #E8E5EF;
  --border-light:  #F0EDF6;

  /* ── Feedback ───────────────────────────────────────────────────────────── */
  --success:        #10B981;
  --success-light:  #D1FAE5;
  --success-bg:     #F0FDF4;
  --success-strong: #166534;
  --warning:        #F59E0B;
  --warning-light:  #FEF3C7;
  --danger:         #EF4444;
  --danger-dark:    #DC2626;
  --danger-light:   #FEE2E2;
  --info:           #6366F1;
  --info-light:     #EEF2FF;
  --info-bg:        #E0F2FE;
  --info-text:      #0369A1;
  --bubble-out:     #D9FDD3;

  /* ── Shadows ────────────────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(108,99,255,0.04);
  --shadow:      0 2px 8px rgba(108,99,255,0.06);
  --shadow-card: 0 2px 12px rgba(108,99,255,0.06), 0 0 0 1px rgba(108,99,255,0.04);
  --shadow-md:   0 4px 16px rgba(108,99,255,0.08);
  --shadow-lg:   0 8px 32px rgba(108,99,255,0.1);

  /* ── Shape ──────────────────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Message status ticks ───────────────────────────────────────────────── */
  --status-sent:      #9CA3AF;
  --status-delivered: #6B7280;
  --status-read:      #00A884;
  --status-failed:    #EF4444;

  /* ── Focus ──────────────────────────────────────────────────────────────── */
  --focus-ring: var(--accent);

  /* ── Non-text bright green (status dots only) ───────────────────────────── */
  --accent-online: #25D366;

  /* ── Campaign funnel chart colours ─────────────────────────────────────── */
  --funnel-read:   #9333EA;   /* purple — read bar */
  --funnel-click:  #EA580C;   /* orange — clicked bar */

  /* ── Template variable highlight (violet) ──────────────────────────────── */
  --var-accent: #7C3AED;

  /* =========================================================================
     COMPAT ALIASES — old token names still referenced in screen CSS files.
     These ensure existing CSS compiles without changes during the v2 rollout.
     ========================================================================= */

  /* Surfaces */
  --surface:     var(--bg-card);

  /* Text */
  --text-strong: var(--text);

  /* Borders */
  --divider:      var(--border-light);
  --border-focus: var(--accent);

  /* Feedback expanded */
  --success-fill:   #047857;      /* white-text accessible emerald */
  --success-text:   #059669;
  --success-tint:   var(--success-light);
  --danger-text:    #B91C1C;
  --danger-tint:    var(--danger-light);
  --danger-border:  #FCA5A5;
  --warning-text:   #D97706;
  --warning-tint:   var(--warning-light);
  --info-hover:     var(--accent-dark);

  /* Old sidebar tokens (kept so sidebar.css remnants don't break) */
  --sidebar-bg:    #1E2D3D;
  --sidebar-text:  #8899AA;
  --sidebar-active:#FFFFFF;

  /* Old shorthand aliases */
  --bg:    var(--bg-page);
  --panel: var(--bg-card);
  --muted: var(--text-muted);
  --green:   var(--primary);
  --green-d: var(--primary-dark);
  --gr:      var(--primary);
  --t1:  var(--text);
  --t2:  var(--text);
  --t3:  var(--text-secondary);
  --t4:  var(--text-muted);

  /* Table row hover (campaigns.css uses var(--bg-hover, fallback)) */
  --bg-hover: var(--accent-lighter);

  /* Primary active state */
  --primary-active: var(--primary-dark);
}

/* Global focus ring ──────────────────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}