/* =============================================================
   tokens.css  –  Design tokens for Call Insights
   Typography, colours, spacing. Load before style.css.
   Dark theme overrides via [data-theme="dark"].
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
    /* Typography */
    --font: 'DM Sans', system-ui, -apple-system, sans-serif;
    --font-size-xs:   0.65rem;
    --font-size-sm:   0.75rem;
    --font-size-base: 0.9375rem;
    --font-size-md:   0.875rem;
    --font-size-lg:   0.9rem;
    --font-size-xl:   1.35rem;
    --font-size-2xl:  1.65rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Brand colours */
    --blue:           #0095C8;
    --blue-mid:       #0284c7;
    --blue-deep:      #0369a1;
    --blue-pale:      #e0f4fb;

    --indigo:         #4f46e5;
    --indigo-pale:    #eef2ff;

    --purple:         #7c3aed;
    --purple-pale:    #ede9fe;

    --lavender:       #a78bfa;
    --lavender-pale:  #f5f3ff;

    --yellow:         #f5a623;
    --yellow-pale:    #fef3c7;
    --yellow-dark:    #b45309;

    --sidebar-bg:     #4a5568;
    --sidebar-bg-gradient: linear-gradient(180deg, #4f5b6a 0%, #3d4852 100%);
    --sidebar-active: #0095C8;

    /* Page chrome */
    --header-bg:      #f0f7fb;
    --page-bg:        #f8f9ff;
    --card-bg:        #ffffff;
    --border:         #e2e8f0;

    /* Text */
    --text-dark:      #1e293b;
    --text-mid:       #475569;
    --text-light:     #64748b;

    --grey-50:        #f8fafc;
    --grey-100:       #f1f5f9;
    --card-shadow:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);

    /* Layout */
    --sidebar-width:  240px;
    --sidebar-collapsed-width: 60px;
    --radius:         12px;
    --radius-sm:      8px;

    /* Semantic (for inline use) */
    --error:          #dc2626;
    --success:        #16a34a;
    --brand:          #0095C8;
    --on-primary:     #fff;   /* Text on primary/accent buttons */

    /* Sentiment card header (AI transcript modal) – purple/neon palette */
    --sc-bg-default:  #ede9fe;
    --sc-fg-default:  #7c3aed;
    --sc-bg-5:        #f0fdf4;
    --sc-fg-5:        #16a34a;
    --sc-bg-4:        #f7fee7;
    --sc-fg-4:        #65a30d;
    --sc-bg-3:        #fefce8;
    --sc-fg-3:        #ca8a04;
    --sc-bg-2:        #fffbeb;
    --sc-fg-2:        #d97706;
    --sc-bg-1:        #fef2f2;
    --sc-fg-1:        #dc2626;
}

/* Dark theme */
[data-theme="dark"] {
    color-scheme: dark;
    --header-bg:      #0c1222;
    --page-bg:        #0f172a;
    --card-bg:        #1e293b;
    --border:         rgba(255,255,255,.08);
    --text-dark:      #f1f5f9;
    --text-mid:       #94a3b8;
    --text-light:     #64748b;
    --grey-50:        #334155;
    --grey-100:       #475569;
    --sidebar-bg:     #0c1222;
    --sidebar-bg-gradient: linear-gradient(180deg, #0f172a 0%, #0c1222 100%);
    --sidebar-active: #38bdf8;
    --blue:           #38bdf8;
    --blue-mid:       #0ea5e9;
    --blue-deep:      #38bdf8;
    --blue-pale:      rgba(56,189,248,.15);
    --indigo:         #818cf8;
    --indigo-pale:    rgba(129,140,248,.15);
    --purple:         #a78bfa;
    --purple-pale:    rgba(167,139,250,.15);
    --lavender:       #a78bfa;
    --yellow:         #f59e0b;
    --card-shadow:    0 4px 24px rgba(0,0,0,.15);
    --brand:          #38bdf8;
    --on-primary:     #fff;  /* Text on accent buttons (stays white in dark mode) */

    /* Sentiment card header (dark mode) – purple/neon */
    --sc-bg-default:  rgba(156,154,254,.25);
    --sc-fg-default:  #9c9afe;
    --sc-bg-5:        rgba(22,163,74,.2);
    --sc-fg-5:        #4ade80;
    --sc-bg-4:        rgba(101,163,13,.2);
    --sc-fg-4:        #a3e635;
    --sc-bg-3:        rgba(202,138,4,.2);
    --sc-fg-3:        #fcd34d;
    --sc-bg-2:        rgba(217,119,6,.2);
    --sc-fg-2:        #fdba74;
    --sc-bg-1:        rgba(220,38,38,.2);
    --sc-fg-1:        #fca5a5;
}