/* =====================================================================
   ContatAi Design Tokens
   Shared across landing + authenticated app (post-redesign).
   Legacy --color-* tokens live in site.css and remain untouched until
   each screen is migrated to --ct-* in its respective sprint.
   ===================================================================== */

:root,
.ct-scope {
  /* === LIGHT MODE DEFAULTS === */

  /* Surfaces */
  --ct-bg:        #fafbff;
  --ct-bg-deep:   #f0f3fa;
  --ct-bg-soft:   #ffffff;
  --ct-surface:   #f8faff;
  --ct-surface-2: #eef2fa;
  --ct-line:      #e4e9f4;
  --ct-line-soft: #eef1f8;
  --ct-line-bold: #cdd5df;

  /* Text */
  --ct-text:      #0a0e1a;
  --ct-text-soft: #4b5273;
  --ct-text-mute: #6b7280;
  --ct-text-dim:  #9aa5b4;

  /* Brand */
  --ct-blue:      #4f6ef7;
  --ct-blue-2:    #3d5eea;
  --ct-blue-soft: rgba(79,110,247,0.10);
  --ct-blue-glow: rgba(79,110,247,0.30);
  --ct-cyan:      #16b8d4;

  /* Semantic */
  --ct-green:     #25d366;
  --ct-green-2:   #0d8a47;
  --ct-green-soft:rgba(37,211,102,0.10);
  --ct-amber:     #f59e0b;
  --ct-amber-soft:rgba(245,158,11,0.12);
  --ct-rose:      #dc2626;
  --ct-rose-soft: rgba(220,38,38,0.08);

  /* WhatsApp mockup palette (light WA theme) */
  --wa-frame:     #ffffff;
  --wa-chat-bg:   #efeae2;
  --wa-bar:       #f0f2f5;
  --wa-in:        #ffffff;
  --wa-in-text:   #111b21;
  --wa-out:       #d9fdd3;
  --wa-out-text:  #111b21;
  --wa-time:      #667781;
  --wa-tag:       rgba(79,110,247,0.12);
  --wa-tag-text:  #3d5eea;

  /* Geometry */
  --ct-radius-sm: 8px;
  --ct-radius:    14px;
  --ct-radius-lg: 22px;
  --ct-radius-xl: 32px;

  /* Elevation */
  --ct-shadow-sm: 0 1px 2px rgba(10,14,26,0.06);
  --ct-shadow:    0 8px 24px -10px rgba(10,14,26,0.18);
  --ct-shadow-lg: 0 24px 60px -24px rgba(10,14,26,0.28);

  /* Motion */
  --ct-ease:      cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out-quart */
  --ct-fast:      120ms var(--ct-ease);
  --ct-base:      240ms var(--ct-ease);
  --ct-slow:      480ms var(--ct-ease);

  /* Typography stacks */
  --ct-font-body:    'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ct-font-display: 'Bricolage Grotesque', 'Manrope', sans-serif;
  --ct-font-mono:    ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* === DARK MODE OVERRIDES === */
body.dark-mode {
  --ct-bg:        #0a0e1a;
  --ct-bg-deep:   #060914;
  --ct-bg-soft:   #11162a;
  --ct-surface:   #161c33;
  --ct-surface-2: #1a2238;
  --ct-line:      rgba(255,255,255,0.08);
  --ct-line-soft: rgba(255,255,255,0.05);
  --ct-line-bold: rgba(255,255,255,0.18);

  --ct-text:      #f4f6ff;
  --ct-text-soft: #c4cadd;
  --ct-text-mute: #8b92a8;
  --ct-text-dim:  #5b6178;

  --ct-blue:      #5b7cfa;
  --ct-blue-2:    #4a6cf0;
  --ct-blue-soft: rgba(91,124,250,0.12);
  --ct-blue-glow: rgba(91,124,250,0.45);

  --ct-green-2:   var(--ct-green);
  --ct-green-soft:rgba(37,211,102,0.12);
  --ct-rose-soft: rgba(255,107,107,0.10);

  --wa-frame:     #0e131e;
  --wa-chat-bg:   #0a121a;
  --wa-bar:       #1f2c33;
  --wa-in:        #1f2c33;
  --wa-in-text:   #e9edef;
  --wa-out:       #005c4b;
  --wa-out-text:  #e9edef;
  --wa-time:      #8696a0;
  --wa-tag:       rgba(91,124,250,0.18);
  --wa-tag-text:  #93acff;

  --ct-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --ct-shadow:    0 8px 24px -8px rgba(0,0,0,.55);
  --ct-shadow-lg: 0 30px 60px -24px rgba(0,0,0,.7);
}

/* Honor reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  :root { --ct-fast: 0ms; --ct-base: 0ms; --ct-slow: 0ms; }
}