/* =========================================================================
   SecondThought — Core design tokens (colors & type)

   Source of truth: src/Leap/Styles/app.css and tailwindUtilities.css.
   HSL values are the canonical form; hex is provided for reference only.
   ========================================================================= */

/* --- Fonts (copy of src/Leap/Styles/fonts.css) -------------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-normal-variable.woff2') format('woff2');
}

:root {
	/* ---- Color tokens (HSL, as in app.css :root) ------------------------ */
	--background: 210 40% 98%;        /* #F8FAFC slate-50-ish */
	--foreground: 222 47% 11%;        /* #0F172A near slate-900 */

	--card: 0 0% 100%;                /* #FFFFFF */
	--card-foreground: 222 47% 11%;

	--popover: 0 0% 100%;
	--popover-foreground: 222 47% 11%;

	--primary: 255 86% 62%;           /* #6D46F2 — pitch-deck violet */
	--primary-foreground: 210 40% 98%;

	--secondary: 210 40% 96%;         /* #F1F5F9 */
	--secondary-foreground: 222 47% 11%;

	--muted: 210 40% 96%;
	--muted-foreground: 215 16% 47%;  /* #64748B slate-500 */

	--accent: 255 90% 95%;            /* #ECE6FE very light violet */
	--accent-foreground: 255 85% 60%;

	--destructive: 0 84% 60%;         /* #EF4444 red-500 */
	--destructive-foreground: 210 40% 98%;

	--success: 142 71% 45%;           /* #16A34A green-600 */
	--warning: 38 92% 50%;            /* #F59E0B amber-500 */

	--border: 214 32% 91%;            /* #E2E8F0 slate-200 */
	--input: 214 32% 91%;
	--ring: 255 85% 60%;

	--radius: 1rem;

	/* ---- Resolved color helpers (use in CSS where needed) --------------- */
	--c-background:           hsl(var(--background));
	--c-foreground:           hsl(var(--foreground));
	--c-card:                 hsl(var(--card));
	--c-card-foreground:      hsl(var(--card-foreground));
	--c-primary:              hsl(var(--primary));
	--c-primary-foreground:   hsl(var(--primary-foreground));
	--c-secondary:            hsl(var(--secondary));
	--c-muted:                hsl(var(--muted));
	--c-muted-foreground:     hsl(var(--muted-foreground));
	--c-accent:               hsl(var(--accent));
	--c-accent-foreground:    hsl(var(--accent-foreground));
	--c-destructive:          hsl(var(--destructive));
	--c-success:              hsl(var(--success));
	--c-warning:              hsl(var(--warning));
	--c-border:               hsl(var(--border));
	--c-ring:                 hsl(var(--ring));

	/* ---- Semantic status (insight types, sentiment) --------------------- */
	/* Pattern: bg-{color}-500/10  text-{color}-600  border-{color}-500/30 */
	--status-agreement:   #22c55e; /* green-500 */
	--status-disagree:    #ef4444; /* red-500   */
	--status-theme:       #3b82f6; /* blue-500  */
	--status-takeaway:    #eab308; /* yellow-500 */
	--status-concern:     #f97316; /* orange-500 */
	--status-opportunity: #8b5cf6; /* violet-500 */

	/* ---- Priority fills (insight priority) ------------------------------ */
	--priority-high-bg:    #FEF2F2; /* red-50     */
	--priority-high-fg:    #B91C1C; /* red-700    */
	--priority-medium-bg:  #FFFBEB; /* amber-50   */
	--priority-medium-fg:  #B45309; /* amber-700  */
	--priority-low-bg:     #ECFDF5; /* emerald-50 */
	--priority-low-fg:     #047857; /* emerald-700*/

	/* ---- Focus-group run state badges ----------------------------------- */
	--state-running-bg:   #EFF6FF; --state-running-fg:   #1D4ED8; /* blue */
	--state-starting-bg:  #FFFBEB; --state-starting-fg:  #B45309; /* amber */
	--state-failed-bg:    #FFF1F2; --state-failed-fg:    #BE123C; /* rose */

	/* ---- Brand gradient (welcome cards, assistant avatars) -------------- */
	/* Pitch-deck palette — #6D46F2 primary · #A78BFA secondary · #4C1D95 deep */
	--brand-gradient:          linear-gradient(135deg, #4C1D95 0%, #6D46F2 55%, #A78BFA 100%);
	--brand-gradient-hero:     linear-gradient(135deg, #4C1D95 0%, #6D46F2 100%);
	--brand-gradient-chat:     linear-gradient(135deg, #6D46F2 0%, #A78BFA 100%);
	--brand-splash-violet:     #A78BFA;

	/* ---- Typography ----------------------------------------------------- */
	--font-sans:     'Inter', ui-sans-serif, system-ui, sans-serif;
	--font-display:  'Inter', ui-sans-serif, system-ui, sans-serif;
	--font-mono:     ui-monospace, SFMono-Regular, monospace;
	--font-tnum:     'Inter', sans-serif; /* with font-feature-settings: 'tnum' */

	/* ---- Radius scale (matches tailwindUtilities.css) ------------------- */
	--radius-sm: 3px;
	--radius-md: 6px;         /* buttons, status badges */
	--radius-lg: 9px;         /* inputs */
	--radius-2:  8px;
	--radius-xl: 12px;        /* canonical card radius */
	--radius-4:  16px;        /* modal */
	--radius-5:  20px;
	--radius-6:  24px;        /* tabs container, stat cards */
	--radius-full: 9999px;

	/* ---- Shadow / elevation --------------------------------------------- */
	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08);
	--shadow-lg: 0 10px 25px -5px rgb(0 0 0 / 0.10);
	--shadow-brand: 0 30px 90px -55px rgba(79, 70, 229, 0.32);     /* chat shell */
	--shadow-brand-soft: 0 20px 60px -42px rgba(79, 70, 229, 0.6); /* composer */

	--shadow-hover-elevate: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 6px -2px rgb(0 0 0 / 0.06);

	/* ---- Spacing (echoes Tailwind defaults we rely on) ------------------ */
	--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
	--space-4: 1rem;    --space-6: 1.5rem; --space-8: 2rem;
}

/* ==========================================================================
   Semantic element defaults
   ========================================================================== */
html {
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 400;
	color: var(--c-foreground);
	background: var(--c-background);
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Type roles — pulled from docs/STYLE-GUIDE.md §1.2 */
h1, .h1 {
	font-family: var(--font-display);
	font-size: 1.5rem;       /* text-2xl — canonical page title */
	line-height: 2rem;
	font-weight: 700;
	color: var(--c-foreground);
	letter-spacing: -0.01em;
}
h2, .h2 {
	font-family: var(--font-display);
	font-size: 1.25rem;      /* text-xl */
	line-height: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
h3, .h3 {
	font-size: 1.125rem;     /* text-lg — section heading */
	line-height: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}
h4, .h4 {
	font-size: 0.875rem;     /* text-sm — sidebar heading */
	line-height: 1.25rem;
	font-weight: 700;
}
p, .p {
	font-size: 0.875rem;     /* text-sm — body */
	line-height: 1.5rem;
}
.muted {
	color: var(--c-muted-foreground);
}
.label {
	font-size: 0.75rem;      /* text-xs */
	font-weight: 600;
	line-height: 1rem;
}
.tiny-label {
	font-size: 10px;
	font-weight: 600;
	line-height: 1rem;
}
code, .mono {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
}
.tabular { font-feature-settings: 'tnum'; }