/* ═══════════════════════════════════════════════════════════════════
   OLEK AI STUDIO — DESIGN TOKEN SYSTEM v3.0
   ═══════════════════════════════════════════════════════════════════
   Single source of truth. Every color in the application must trace
   back to a token defined here. No raw hex or rgba anywhere else.

   Brand: #c2c3f9 (Lavender) — extracted from logo
   Theme: Dark  —  bg #08080d (luminance 0.0025)
   WCAG:  AA verified — see contrast annotations

   TOKEN TIERS:
   ┌─ Tier 1: Primitives   — Raw brand scale, never used directly
   ├─ Tier 2: Semantic      — Meaning-based (primary, danger, text-*)
   ├─ Tier 3: Component     — Surface, glass, shadow systems
   └─ Tier 4: Aliases       — Backward compat (--acc, --t1, --grn)
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ╔═══════════════════════════════════════════════════════════════╗
     ║  TIER 1 — PRIMITIVES                                        ║
     ║  Raw brand scale. NEVER reference directly in components.    ║
     ║  H239° Lavender derived from logo mark #c2c3f9              ║
     ╚═══════════════════════════════════════════════════════════════╝ */

  /* ── Brand Lavender Scale ── */
  --brand-50:  #f0f0fb;
  --brand-100: #d8d9fc;
  --brand-200: #c2c3f9;  /* ← logo exact                           */
  --brand-300: #a8a9f0;
  --brand-400: #8b8ef5;
  --brand-500: #6b6eea;
  --brand-600: #6366db;
  --brand-700: #5558cc;
  --brand-800: #4547b0;
  --brand-900: #353793;
  --brand-950: #1e1f5c;

  /* ── Neutral Scale (blue-tinted grays for dark UI) ── */
  --neutral-0:   #08080d;
  --neutral-50:  #10101a;
  --neutral-100: #18182c;
  --neutral-150: #1c1c2e;
  --neutral-200: #282840;
  --neutral-300: #383850;
  --neutral-400: #5c5c74;
  --neutral-500: #6a6a84;
  --neutral-600: #9898b0;
  --neutral-700: #b8b8cc;
  --neutral-800: #d0d0e0;
  --neutral-900: #ededf4;
  --neutral-950: #f8f8fc;

  /* ── Status Primitives ── */
  --green-300:  #6ee7b7;
  --green-400:  #34d399;
  --green-500:  #10b981;
  --green-600:  #15803d;
  --red-300:    #fca5a5;
  --red-400:    #f87171;
  --red-500:    #ef4444;
  --red-600:    #dc2626;
  --yellow-300: #fcd34d;
  --yellow-400: #fbbf24;
  --yellow-500: #f59e0b;
  --blue-300:   #93c5fd;
  --blue-400:   #60a5fa;
  --blue-500:   #3b82f6;
  --blue-600:   #2563eb;
  --orange-400: #fb923c;
  --orange-500: #ea580c;
  --pink-400:   #f472b6;


  /* ╔═══════════════════════════════════════════════════════════════╗
     ║  TIER 2 — SEMANTIC TOKENS                                   ║
     ║  Meaning-based. This is what components reference.          ║
     ║  Contrast ratios verified vs --bg-base (#08080d)            ║
     ╚═══════════════════════════════════════════════════════════════╝ */

  /* ── Primary (brand lavender) ─────────────────────────────────
     Fill tokens carry white text. Text tokens sit on dark bg.
     Split design: fills are darker, text is lighter.            */

  --primary:           var(--brand-600);  /* #6366db  Button fill    — wh 4.7:1 AA ✅  */
  --primary-hover:     #6d70e0;           /* Hover fill              — wh 4.2:1 AA-lg ✅ */
  --primary-active:    var(--brand-700);  /* #5558cc  Pressed fill   — wh 5.7:1 AA ✅  */
  --primary-text:      var(--brand-300);  /* #a8a9f0  Links/labels   — bg 9.1:1 AA ✅  */
  --primary-muted:     var(--brand-400);  /* #8b8ef5  Secondary accent — bg 6.9:1 AA ✅ */

  /* Primary alpha ramp (for tinted backgrounds and borders) */
  --primary-a4:   rgba(99,102,219,.04);   /* faint tint              */
  --primary-a6:   rgba(99,102,219,.06);   /* light tint              */
  --primary-a8:   rgba(99,102,219,.08);   /* selected row            */
  --primary-a12:  rgba(99,102,219,.12);   /* active badge bg         */
  --primary-a15:  rgba(99,102,219,.15);   /* messaging active        */
  --primary-a18:  rgba(99,102,219,.18);   /* strong badge bg         */
  --primary-a25:  rgba(99,102,219,.25);   /* border light            */
  --primary-a30:  rgba(99,102,219,.30);   /* border active           */
  --primary-a40:  rgba(99,102,219,.40);   /* focus rings, cal today  */

  /* Primary shadows */
  --primary-glow:    0 2px 12px rgba(99,102,219,.25);
  --primary-glow-sm: 0 2px 8px rgba(99,102,219,.20);

  /* ── Success (green) ──────────────────────────────────────── */
  --success:         var(--green-400);    /* #34d399  Badge/icon     — bg 10.4:1 AA ✅ */
  --success-text:    var(--green-300);    /* #6ee7b7  Text on dark   — bg 13.1:1 AA ✅ */
  --success-bold:    var(--green-600);    /* #15803d  Button fill    — wh 5.0:1 AA ✅  */
  --success-subtle:  rgba(52,211,153,.10);
  --success-subtle-strong: rgba(52,211,153,.18);
  --success-border:  rgba(52,211,153,.20);

  /* ── Warning (yellow/amber) ────────────────────────────────── */
  --warning:         var(--yellow-400);   /* #fbbf24  Badge/icon     — bg 12.0:1 AA ✅ */
  --warning-text:    var(--yellow-300);   /* #fcd34d  Text on dark   — bg 13.9:1 AA ✅ */
  --warning-bold:    var(--yellow-500);   /* #f59e0b  Fill           — use dark text ⚠  */
  --warning-subtle:  rgba(251,191,36,.10);
  --warning-border:  rgba(251,191,36,.20);

  /* ── Danger (red) ──────────────────────────────────────────── */
  --danger:          var(--red-500);      /* #ef4444  Badge/icon     — bg 5.3:1 AA ✅  */
  --danger-text:     var(--red-300);      /* #fca5a5  Text on dark   — bg 10.5:1 AA ✅ */
  --danger-bold:     var(--red-600);      /* #dc2626  Button fill    — wh 4.8:1 AA ✅  */
  --danger-subtle:   rgba(248,113,113,.08);
  --danger-border:   rgba(248,113,113,.18);

  /* ── Info (blue) ───────────────────────────────────────────── */
  --info:            var(--blue-400);     /* #60a5fa  Badge/icon     — bg 7.9:1 AA ✅  */
  --info-text:       var(--blue-300);     /* #93c5fd  Text on dark   — bg 11.1:1 AA ✅ */
  --info-bold:       var(--blue-600);     /* #2563eb  Button fill    — wh 5.2:1 AA ✅  */
  --info-subtle:     rgba(96,165,250,.10);
  --info-border:     rgba(96,165,250,.18);


  /* ── Text Hierarchy ────────────────────────────────────────── */
  --text-primary:    var(--neutral-900);  /* #ededf4  Body text      — bg 17.1:1 AA ✅ */
  --text-secondary:  var(--neutral-600);  /* #9898b0  Descriptions   — bg 7.1:1 AA ✅  */
  --text-muted:      var(--neutral-500);  /* #6a6a84  Placeholders   — bg 3.8:1 AA-lg ✅ */
  --text-faint:      var(--neutral-400);  /* #5c5c74  Disabled/hint  — bg 3.1:1 AA-lg ✅ */
  --text-on-primary: #ffffff;             /* White on filled buttons                    */
  --text-on-warning: #1a1a2e;            /* Dark on yellow fills                       */


  /* ── Channel Colors (fixed brand identities) ───────────────── */
  --channel-whatsapp:         #25d366;
  --channel-whatsapp-subtle:  rgba(37,211,102,.10);
  --channel-telegram:         #0088cc;
  --channel-telegram-subtle:  rgba(0,136,204,.10);
  --channel-instagram:        #e1306c;
  --channel-instagram-subtle: rgba(225,48,108,.10);
  --channel-email:            var(--blue-500);
  --channel-email-subtle:     rgba(59,130,246,.10);

  /* ── Accent: Orange ──────────────────────────────────────── */
  --orange-subtle: rgba(251,146,60,.10);
  --orange-border: rgba(251,146,60,.20);

  /* ── Accent: Pink ──────────────────────────────────────────── */
  --pink-subtle:   rgba(244,114,182,.10);
  --pink-border:   rgba(244,114,182,.20);

  /* ── Neutral tints (muted backgrounds) ─────────────────────── */
  --muted-subtle:  rgba(106,106,132,.15);

  /* ── Overlays ──────────────────────────────────────────────── */
  --overlay-dim:   rgba(0,0,0,.45);
  --overlay-heavy: rgba(0,0,0,.55);

  /* ── Temperature (lead scoring) ────────────────────────────── */
  --temp-hot:  var(--red-400);
  --temp-warm: var(--orange-400);
  --temp-cold: var(--blue-400);
  --temp-new:  var(--text-muted);


  /* ╔═══════════════════════════════════════════════════════════════╗
     ║  TIER 3 — COMPONENT TOKENS                                  ║
     ║  Surface, glass, border, shadow, layout systems.            ║
     ╚═══════════════════════════════════════════════════════════════╝ */

  /* ── Surfaces ──────────────────────────────────────────────── */
  --bg-base:      var(--neutral-0);       /* #08080d  Page bg        */
  --surface-1:    rgba(16,16,26,.78);     /* Glass panels            */
  --surface-2:    rgba(24,24,40,.55);     /* Inputs, inner cards     */
  --surface-3:    rgba(40,40,64,.50);     /* Hover states            */
  --surface-4:    rgba(28,28,46,.60);     /* Alternate glass         */
  --surface-elevated: rgba(30,30,42,.80); /* Popovers, elevated      */

  /* ── Glass System ──────────────────────────────────────────── */
  --glass-panel:       var(--surface-1);
  --glass-panel-brd:   var(--border-subtle);
  --glass-input:       var(--surface-2);
  --glass-input-brd:   var(--border-default);
  --glass-overlay:     rgba(20,20,32,.92);
  --glass-overlay-brd: var(--border-default);
  --glass-blur-sm:     8px;
  --glass-blur-md:     24px;
  --glass-blur-lg:     40px;
  --glass-saturate:    1.2;

  /* ── Borders ───────────────────────────────────────────────── */
  --border-subtle:   rgba(255,255,255,.06);
  --border-default:  rgba(255,255,255,.10);
  --border-strong:   rgba(255,255,255,.16);
  --border-hover:    rgba(255,255,255,.12);
  --border-focus:    var(--primary-a30);

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-color:  0,0,0;  /* RGB triplet for composable shadows */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.15);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.20);
  --shadow-md:  0 4px 24px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.15);
  --shadow-lg:  0 8px 40px rgba(0,0,0,.45);
  --shadow-xl:  0 12px 60px rgba(0,0,0,.55);

  /* ── Radii ─────────────────────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ── Typography ────────────────────────────────────────────── */
  --font:      -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'SF Pro Text', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs:  9px;
  --text-xs:   10px;
  --text-sm:   11px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   17px;
  --text-xl:   22px;
  --text-2xl:  26px;
  --text-3xl:  30px;

  /* ── Spacing Scale ─────────────────────────────────────────── */
  --space-2xs:  2px;
  --space-xs:   4px;
  --space-sm:   6px;
  --space-md:   8px;
  --space-base: 12px;
  --space-lg:   16px;
  --space-xl:   20px;
  --space-2xl:  24px;
  --space-3xl:  32px;
  --space-4xl:  48px;
  --grid-gutter: 14px;

  /* ── Motion ────────────────────────────────────────────────── */
  --duration-fast:   .15s;
  --duration-normal: .2s;
  --duration-slow:   .3s;
  --ease-default:    ease;
  --ease-out:        cubic-bezier(.16, 1, .3, 1);
  --ease-spring:     cubic-bezier(.16, 1, .3, 1);

  /* ── Z-index ───────────────────────────────────────────────── */
  --z-base:     1;
  --z-sticky:   5;
  --z-topbar:   10;
  --z-dropdown: 50;
  --z-drawer:   100;
  --z-modal:    200;
  --z-overlay:  200;  /* alias for --z-modal */
  --z-toast:    999;

  /* ── Safe Areas ────────────────────────────────────────────── */


  /* ╔═══════════════════════════════════════════════════════════════╗
     ║  TIER 4 — BACKWARD COMPATIBILITY ALIASES                    ║
     ║  Maps old short tokens → new semantic tokens.               ║
     ║  TODO: Migrate all consumers then remove this block.        ║
     ╚═══════════════════════════════════════════════════════════════╝ */

  /* Old background tokens */

  /* Old border tokens */

  /* Old text tokens */

  /* Old accent tokens */

  /* Old status tokens */

  /* Old surface tokens */

  /* Old shadow tokens */

  /* Old radius tokens */

  /* ── C- Component System Aliases ──
     Used by .c-topbar, .c-table, .c-nav, etc.       */
  --accent:            var(--primary);
  --accent-light:      var(--primary-text);
  --accent-bg:         var(--primary-a8);
  --accent-bg-2:       var(--primary-a18);

  --bg-primary:        var(--bg-base);
  --bg-secondary:      var(--surface-2);
  --bg-elevated:       var(--surface-elevated);

  --fill-secondary:    var(--surface-3);
  --fill-tertiary:     var(--surface-2);

  --label-primary:     var(--text-primary);
  --label-secondary:   var(--text-secondary);
  --label-tertiary:    var(--text-muted);
  --label-quaternary:  rgba(106,106,132,.7);

  --separator:         var(--border-default);
  --separator-thin:    var(--border-subtle);

  --error:             var(--danger);
  --error-bg:          var(--danger-subtle);
  --info-bg:           var(--info-subtle);

  /* C- glass layers */
  --glass-1:      var(--glass-panel);
  --glass-1-brd:  var(--glass-panel-brd);
  --glass-2:      var(--glass-panel);
  --glass-2-brd:  var(--glass-panel-brd);
  --glass-2-blur: var(--glass-blur-md);
  --glass-2-sat:  var(--glass-saturate);
  --glass-3:      var(--glass-overlay);
  --glass-3-brd:  var(--glass-overlay-brd);
  --glass-3-blur: var(--glass-blur-lg);
  --glass-3-sat:  var(--glass-saturate);
}