/* =================================================================
   MORRA Design Tokens — single source of truth
   ─────────────────────────────────────────────────────────────────
   Edit THIS file to change brand colours, typography, or spacing.
   All other CSS files import these values via var(--token-name).

   Token namespaces:
     --font-*          Typography — families, scale, weights, rhythm
     --space-*         Spacing scale (4px base unit)
     --radius-*        Border-radius scale
     --shadow-*        Box-shadow presets
     --transition-*    Easing & duration
     --color-*         Semantic colour palette (light mode default)
     --brand-*         Legacy aliases → --color-* (do not expand)

   Dark-mode overrides are in [data-theme="dark"] at the bottom.
   ================================================================= */

/* ──────────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ────────────────────────────────────────────────────────────────── */
:root {
  /* Font stacks ─────────────────────────────────────────────────── */
  --font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, 'Courier New', monospace;

  /* Type scale (1.25 major-third ratio, rem-based for zoom support) */
  --font-size-xs:   0.6875rem;  /* 11px — labels, badges, tiny captions */
  --font-size-sm:   0.75rem;    /* 12px — meta, secondary captions       */
  --font-size-base: 0.875rem;   /* 14px — body text, nav sub-items        */
  --font-size-md:   0.9375rem;  /* 15px — primary nav labels              */
  --font-size-lg:   1rem;       /* 16px — subheadings, input text         */
  --font-size-xl:   1.125rem;   /* 18px — card titles                     */
  --font-size-2xl:  1.25rem;    /* 20px — section headings                */
  --font-size-3xl:  1.4rem;     /* 22px — page headings                   */
  --font-size-4xl:  1.875rem;   /* 30px — hero headings                   */
  --font-size-5xl:  2.25rem;    /* 36px — display / landing               */

  /* Font weights ─────────────────────────────────────────────────── */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line heights ─────────────────────────────────────────────────── */
  --line-height-tight:   1.15;  /* Display headings                       */
  --line-height-snug:    1.3;   /* UI headings, nav items                 */
  --line-height-base:    1.5;   /* Body text, paragraphs                  */
  --line-height-relaxed: 1.65;  /* Long-form reading, onboarding copy     */

  /* Letter spacing ───────────────────────────────────────────────── */
  --letter-spacing-tight:  -0.02em;  /* Display text only                */
  --letter-spacing-normal:  0em;
  --letter-spacing-open:    0.01em;  /* Nav labels on dark backgrounds   */
  --letter-spacing-wide:    0.06em;  /* Eyebrow text, small-caps labels  */
  --letter-spacing-wider:   0.12em;  /* Section labels, all-caps nav     */


/* ──────────────────────────────────────────────────────────────────
   SPACING  (4px base unit, powers of 2 for predictable rhythm)
   ────────────────────────────────────────────────────────────────── */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */


/* ──────────────────────────────────────────────────────────────────
   RADII  &  SHADOWS
   ────────────────────────────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-btn:  8px;
  --radius-card: 12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 9999px;

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 20px 40px rgba(0, 0, 0, 0.14);
  --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.07);


/* ──────────────────────────────────────────────────────────────────
   TRANSITIONS
   ────────────────────────────────────────────────────────────────── */

  --transition-fast:   0.12s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Legacy alias */
  --transition: var(--transition-base);


/* ──────────────────────────────────────────────────────────────────
   COLOUR PALETTE
   ────────────────────────────────────────────────────────────────── */

  /* ── Brand ────────────────────────────────────────────────────── */
  --color-brand:           #0d9488;   /* Teal-600  — primary action  */
  --color-brand-hover:     #0f766e;   /* Teal-700  — hover/pressed   */
  --color-brand-light:     #14b8a6;   /* Teal-500  — lighter variant */
  --color-brand-subtle:    rgba(13, 148, 136, 0.08);
  --color-brand-shadow:    rgba(13, 148, 136, 0.25);
  --color-brand-10:        rgba(13, 148, 136, 0.10);  /* session active bg        */
  --color-brand-14:        rgba(13, 148, 136, 0.14);  /* prompt chip hover bg     */
  --color-brand-15:        rgba(13, 148, 136, 0.15);  /* session active bg dark   */
  --color-brand-20:        rgba(13, 148, 136, 0.20);  /* prompt chip border       */
  --color-brand-40:        rgba(13, 148, 136, 0.40);  /* prompt chip border hover */

  /* Gradient accent (indigo → purple → pink) — AI, logos, CTAs    */
  --color-accent-from:     #6366f1;
  --color-accent-mid:      #a855f7;
  --color-accent-to:       #ec4899;

  /* ── Surfaces ─────────────────────────────────────────────────── */
  --color-page-bg:         #f5f7fa;
  --color-page-bg-end:     #c3cfe2;   /* light-mode gradient end    */
  --color-surface:         #ffffff;
  --color-surface-raised:  #ffffff;
  --color-surface-sunken:  #f8fafc;
  --color-surface-overlay: rgba(255, 255, 255, 0.95);

  /* ── Code blocks ─────────────────────────────────────────────── */
  --color-code-bg:         #1e1e2e;   /* dark code surface (both modes) */
  --color-code-fg:         #cdd6f4;   /* code body text                 */

  /* Legacy alias */
  --surface:     var(--color-surface);
  --surface-alt: var(--color-surface-sunken);

  /* ── Borders ──────────────────────────────────────────────────── */
  --color-border:          #e2e8f0;
  --color-border-strong:   #cbd5e1;
  --color-border-subtle:   #f1f5f9;
  /* Legacy alias */
  --border: var(--color-border);

  /* ── Text ─────────────────────────────────────────────────────── */
  --color-text-primary:    #0f172a;
  --color-text-secondary:  #374151;
  --color-text-muted:      #64748b;
  --color-text-faint:      #94a3b8;
  --color-text-inverted:   #ffffff;

  /* ── Semantic states ──────────────────────────────────────────── */
  --color-success:         #10b981;
  --color-success-bg:      #ecfdf5;
  --color-success-text:    #065f46;

  --color-warning:         #f59e0b;
  --color-warning-bg:      #fffbeb;
  --color-warning-text:    #92400e;
  --color-warning-12:      rgba(245, 158, 11, 0.12);  /* action proposal header   */
  --color-warning-06:      rgba(245, 158, 11, 0.06);  /* action proposal footer   */
  --color-warning-25:      rgba(245, 158, 11, 0.25);  /* action proposal border   */
  --color-warning-dark-bg: rgba(120,  53, 15, 0.25);  /* dark-mode action card    */

  --color-danger:          #ef4444;
  --color-danger-bg:       #fee2e2;
  --color-danger-text:     #991b1b;

  --color-info:            #3b6cf6;
  --color-info-bg:         #eff6ff;
  --color-info-text:       #1e40af;

  /* ── Status labels (tasks / experiments) ─────────────────────── */
  --color-status-draft:        #6b7280;
  --color-status-open:         #3b6cf6;
  --color-status-planned:      #3b6cf6;
  --color-status-scheduled:    #4f46e5;
  --color-status-running:      #f59e0b;
  --color-status-in-progress:  #8b5cf6;
  --color-status-analyzing:    #8b5cf6;
  --color-status-complete:     #10b981;
  --color-status-archived:     #9ca3af;
  --color-status-dismissed:    #6b7280;

  /* ── Priority ─────────────────────────────────────────────────── */
  --color-priority-critical: #dc2626;
  --color-priority-high:     #f59e0b;
  --color-priority-medium:   #3b6cf6;
  --color-priority-low:      #10b981;

  /* ── Extended semantic tokens (task calendar, badges, pickers) ── */

  /* Text on light tinted backgrounds */
  --color-text-on-tint:               #6e747d;  /* softer grey for text over light tinted event bg */

  /* Status text — darker shades for labels/pickers (light mode) */
  --color-status-open-text:           #2563eb;  /* blue-600 */
  --color-status-scheduled-text:      #4338ca;  /* indigo-700 */
  --color-status-in-progress-text:    #b45309;  /* amber-700 */
  --color-status-complete-text:       #059669;  /* emerald-600 */
  --color-effort-low-text:            #16a34a;  /* green-700 */

  /* Priority high — orange palette (distinct from amber --color-priority-high) */
  --color-priority-high-dot:          #f97316;  /* orange-500 */
  --color-priority-high-text:         #ea580c;  /* orange-600 */

  /* Brand tints — reminder button active state */
  --color-brand-teal-200:             #99f6e4;  /* teal-200 */
  --color-brand-teal-50:              #ecfeff;  /* teal-50 */

  /* Subtle state colours */
  --color-warning-subtle:             #fde68a;  /* amber-200 — on dark badge text / dark mode tint text */
  --color-overdue:                    #f43f5e;  /* rose-500 — overdue event dark mode bg base */

  /* Dark mode status / event shades */
  --color-status-open-dm:             #60a5fa;  /* blue-400 */
  --color-status-scheduled-dm:        #a5b4fc;  /* indigo-300 */
  --color-status-in-progress-dm:      #fcd34d;  /* amber-300 */
  --color-status-complete-dm:         #6ee7b7;  /* emerald-300 */
  --color-event-open-dm:              #93c5fd;  /* blue-300 — event text */
  --color-event-scheduled-border-dm:  #818cf8;  /* indigo-400 — event border */
  --color-effort-medium-dm:           #fbbf24;  /* amber-400 */
  --color-priority-high-dm:           #fb923c;  /* orange-400 */
  --color-priority-low-dm:            #4ade80;  /* green-400 */
  --color-border-muted-dm:            #475569;  /* slate-600 — dimmed indicator dots */
  --color-overdue-border-dm:          #fb7185;  /* rose-400 — overdue border */
  --color-overdue-text-dm:            #fda4af;  /* rose-300 — overdue text */

  /* Dark mode stat card dots */
  --color-stat-open-dm:               #2dd4bf;  /* teal-400 */
  --color-stat-in-progress-dm:        #a78bfa;  /* violet-400 */

  /* Badge background tints (100-shade, slightly deeper than *-bg tokens) */
  --color-badge-open-bg:              #dbeafe;  /* blue-100 */
  --color-badge-scheduled-bg:         #e0e7ff;  /* indigo-100 */
  --color-badge-in-progress-bg:       #fef3c7;  /* amber-100 */
  --color-badge-completed-bg:         #d1fae5;  /* emerald-100 */
  --color-badge-high-bg:              #fed7aa;  /* orange-200 */
  --color-badge-dismissed-bg:         #f3f4f6;  /* gray-100 */
  --color-badge-high-text:            #9a3412;  /* orange-900 */

  /* Task link chip colors */
  --color-chip-experiment-bg:         #f5f3ff;  /* violet-50 */
  --color-chip-experiment-text:       #6d28d9;  /* violet-700 */
  --color-chip-experiment-border:     #ddd6fe;  /* violet-300 */
  --color-chip-playbook-border:       #a7f3d0;  /* emerald-200 */
  --color-chip-audit-text:            #1d4ed8;  /* blue-700 */
  --color-chip-audit-border:          #bfdbfe;  /* blue-200 */

  /* ── Feature accent colours ───────────────────────────────────── */
  --color-feature-mmm:       #3b6cf6;
  --color-feature-budget:    #10b981;
  --color-feature-audit:     #f59e0b;
  --color-feature-creatives: #8b5cf6;
  --color-feature-experiments-geo:      #3b6cf6;
  --color-feature-experiments-uplift:   #f59e0b;
  --color-feature-experiments-creative: #8b5cf6;
  --color-feature-experiments-feed:     #10b981;
  --color-feature-experiments-custom:   #14b8a6;
  --color-feature-ai:        #a855f7;
  --color-feature-market:    #14b8a6;
  --color-feature-profit:    #22c55e;

  /* ── Sidebar (always dark, regardless of page theme) ─────────── */
  --color-sidebar-bg-from:          #1a1d23;
  --color-sidebar-bg-to:            #16181d;
  --color-sidebar-text:             rgba(255, 255, 255, 0.85);
  --color-sidebar-border:           rgba(255, 255, 255, 0.1);
  --color-sidebar-active-from:      #06b6d4;   /* cyan-500 */
  --color-sidebar-active-to:        #0891b2;   /* cyan-600 */
  --color-sidebar-active-shadow:    rgba(6, 182, 212, 0.2);
  --color-sidebar-active-hover-from:#0284c7;   /* sky-600  */
  --color-sidebar-active-hover-to:  #0369a1;   /* sky-700  */
  --color-sidebar-active-bg:        rgba(6, 182, 212, 0.13);  /* active item background   */
  --color-sidebar-active-bg-hover:  rgba(6, 182, 212, 0.2);   /* active item hover        */
  --color-sidebar-active-bg-strong: rgba(6, 182, 212, 0.26);  /* icon-only active + chevron hover */
  --color-sidebar-hover:            rgba(255, 255, 255, 0.08); /* soft nav item hover      */
  --color-sidebar-expanded-bg:      rgba(0, 0, 0, 0.2);
  --color-sidebar-surface:          #1e2028;   /* floating panel background */
  --color-tooltip-bg:               #1a1d23;   /* same as sidebar bg-from */
  --color-ai-accent:                #67e8f9;   /* cyan-300 for MORRA AI label */
  --color-danger-light:             #f87171;   /* red-400 — danger hover text */

  /* ── Scrollbars ────────────────────────────────────────────────── */
  --color-scrollbar-track: #f1f5f9;
  --color-scrollbar-thumb: #cbd5e1;


/* ──────────────────────────────────────────────────────────────────
   LEGACY ALIASES  (--brand-* → --color-*)
   ─────────────────────────────────────────────────────────────────
   These exist so existing CSS files (experiments.css, theme.css)
   continue to work without changes. Do NOT use --brand-* in new code.
   ────────────────────────────────────────────────────────────────── */

  --brand-primary:        var(--color-brand);
  --brand-primary-dark:   var(--color-brand-hover);
  --brand-primary-shadow: var(--color-brand-shadow);  --brand-success:        var(--color-success);
  --brand-warning:        var(--color-warning);
  --brand-danger:         var(--color-danger);
  --brand-info:           var(--color-info);
  --brand-secondary:      var(--color-text-muted);

  /* Bootstrap token bridge — keeps BS5 components theme-aware */
  --bs-primary:           var(--color-brand);
  --bs-success:           var(--color-success);
  --bs-warning:           var(--color-warning);
  --bs-danger:            var(--color-danger);
  --bs-info:              var(--color-info);
  --bs-secondary:         var(--color-text-muted);
  --bs-body-bg:           var(--color-page-bg);
  --bs-body-color:        var(--color-text-primary);

  /* Misc legacy */
  --radius:  var(--radius-card);
  --shadow:  var(--shadow-card);
}


/* ──────────────────────────────────────────────────────────────────
   DARK MODE OVERRIDES
   Only re-declare tokens whose value changes in dark mode.
   ────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Surfaces */
  --color-page-bg:          #0e0e11;
  --color-surface:          #16181d;
  --color-surface-raised:   #1d2028;
  --color-surface-sunken:   #111317;
  --color-surface-overlay:  rgba(14, 14, 17, 0.97);

  /* Borders */
  --color-border:           #1e2229;
  --color-border-strong:    #2a2f3a;
  --color-border-subtle:    #161a20;

  /* Text */
  --color-text-primary:     #e4e4e9;
  --color-text-secondary:   #c5c5cc;
  --color-text-muted:       #86868e;
  --color-text-faint:       #48484f;

  /* Brand */
  --color-brand-subtle:     rgba(99, 102, 241, 0.14);

  /* Semantic states */
  --color-success-bg:       rgba(16, 185, 129, 0.15);
  --color-success-text:     #34d399;
  --color-warning-bg:       rgba(245, 158, 11, 0.15);
  --color-warning-text:     #fcd34d;
  --color-danger-bg:        rgba(239, 68, 68, 0.18);
  --color-danger-text:      #f87171;
  --color-info-bg:          rgba(59, 130, 246, 0.15);
  --color-info-text:        #60a5fa;

  /* Scrollbars */
  --color-scrollbar-track:  #141417;
  --color-scrollbar-thumb:  #3c3c48;

  /* Legacy surface alias */
  --surface-alt:            #141417;

  /* Override Bootstrap's white in dark mode */
  --bs-white-rgb:           220, 220, 228;
}