/* =============================================================
   FeedbackAI — Colors & Type tokens (excerpted from source)
   Source: design-system.css v2 — see _source/design-system.css
   Light + dark themes, 10 accent presets, semantic type classes.
   ============================================================= */

/* ---------- FONTS ---------- */
/* Inter + JetBrains Mono — loaded from Google Fonts in the source app.
   For local kits we link the same families. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- BASE (dark is default) ---------- */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces — layered from canvas up */
    --bg-app:       #07070b;   /* app chrome, sidebar */
    --bg-canvas:    #0b0b12;   /* main work area */
    --bg-surface:   #101018;   /* raised cards */
    --bg-surface-2: #17171f;   /* popovers, nested cards */
    --bg-hover:     rgba(255,255,255,0.04);
    --bg-active:    rgba(255,255,255,0.07);
    --bg-glass:     rgba(255,255,255,0.04);
    --bg-overlay:   rgba(5,5,8,0.72);

    /* Text */
    --fg-strong:    #f4f4f6;   /* headings */
    --fg:           #d7d7df;   /* body */
    --fg-muted:     #8a8a96;   /* secondary */
    --fg-subtle:    #5a5a66;   /* hints, placeholders */
    --fg-on-accent: #ffffff;

    /* Borders */
    --border:        rgba(255,255,255,0.07);
    --border-strong: rgba(255,255,255,0.12);
    --ring:          rgba(var(--accent-rgb), 0.35);
    --ring-focus:    rgba(var(--accent-rgb), 0.55);

    /* Shadow */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.4);
    --shadow-sm:  0 2px 6px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:  0 6px 16px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3);
    --shadow-lg:  0 18px 40px rgba(0,0,0,0.55), 0 4px 10px rgba(0,0,0,0.35);
    --shadow-btn: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.25) inset, 0 1px 2px rgba(0,0,0,0.3);
    --shadow-btn-accent: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 18px -4px rgba(var(--accent-rgb),0.55), 0 2px 4px rgba(0,0,0,0.3);
}

/* ---------- LIGHT ---------- */
:root[data-theme="light"] {
    color-scheme: light;

    --bg-app:       #f6f6f8;
    --bg-canvas:    #fbfbfc;
    --bg-surface:   #ffffff;
    --bg-surface-2: #fafafb;
    --bg-hover:     rgba(15,16,24,0.04);
    --bg-active:    rgba(15,16,24,0.07);
    --bg-glass:     rgba(255,255,255,0.6);
    --bg-overlay:   rgba(20,22,30,0.45);

    --fg-strong:    #0c0d14;
    --fg:           #2a2c38;
    --fg-muted:     #626573;
    --fg-subtle:    #9a9ca6;
    --fg-on-accent: #ffffff;

    --border:        rgba(15,16,24,0.08);
    --border-strong: rgba(15,16,24,0.14);

    --shadow-xs:  0 1px 1px rgba(15,16,24,0.04);
    --shadow-sm:  0 1px 2px rgba(15,16,24,0.06), 0 1px 3px rgba(15,16,24,0.05);
    --shadow-md:  0 6px 14px rgba(15,16,24,0.08), 0 2px 4px rgba(15,16,24,0.05);
    --shadow-lg:  0 20px 40px rgba(15,16,24,0.12), 0 4px 10px rgba(15,16,24,0.06);
    --shadow-btn: 0 1px 0 rgba(255,255,255,0.7) inset, 0 -1px 0 rgba(15,16,24,0.06) inset, 0 1px 2px rgba(15,16,24,0.06);
    --shadow-btn-accent: 0 1px 0 rgba(255,255,255,0.3) inset, 0 6px 16px -4px rgba(var(--accent-rgb),0.4), 0 2px 4px rgba(15,16,24,0.12);
}

/* ---------- ACCENT (default = Indigo) ---------- */
:root {
    --accent-rgb: 99, 102, 241;
    --accent:           rgb(var(--accent-rgb));
    --accent-hover:     color-mix(in oklab, rgb(var(--accent-rgb)) 88%, #000);
    --accent-pressed:   color-mix(in oklab, rgb(var(--accent-rgb)) 78%, #000);
    --accent-soft:      rgba(var(--accent-rgb), 0.12);
    --accent-soft-hover:rgba(var(--accent-rgb), 0.18);
    --accent-gradient:  linear-gradient(135deg, rgb(var(--accent-rgb)) 0%, color-mix(in oklab, rgb(var(--accent-rgb)) 70%, #8b5cf6) 100%);
}

/* Ten accent presets */
:root[data-accent="indigo"]  { --accent-rgb: 99, 102, 241; }
:root[data-accent="violet"]  { --accent-rgb: 139, 92, 246; }
:root[data-accent="blue"]    { --accent-rgb: 59, 130, 246; }
:root[data-accent="cyan"]    { --accent-rgb: 6, 182, 212; }
:root[data-accent="emerald"] { --accent-rgb: 16, 185, 129; }
:root[data-accent="lime"]    { --accent-rgb: 132, 204, 22; }
:root[data-accent="amber"]   { --accent-rgb: 245, 158, 11; }
:root[data-accent="orange"]  { --accent-rgb: 249, 115, 22; }
:root[data-accent="rose"]    { --accent-rgb: 244, 63, 94; }
:root[data-accent="slate"]   { --accent-rgb: 100, 116, 139; }

/* ---------- SEMANTIC ---------- */
:root {
    --success: #10b981; --success-soft: rgba(16,185,129,0.12); --success-border: rgba(16,185,129,0.3);
    --warning: #f59e0b; --warning-soft: rgba(245,158,11,0.12); --warning-border: rgba(245,158,11,0.3);
    --danger:  #ef4444; --danger-soft:  rgba(239,68,68,0.12);  --danger-border:  rgba(239,68,68,0.35);
    --info:    #3b82f6; --info-soft:    rgba(59,130,246,0.12); --info-border:    rgba(59,130,246,0.3);
}

/* ---------- TYPE ---------- */
:root {
    /* Families */
    --font-sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Sizes — small, dense scale; UI is information-dense */
    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 14px;
    --fs-md:   15px;
    --fs-lg:   17px;
    --fs-xl:   20px;
    --fs-2xl:  24px;
    --fs-3xl:  30px;
    --fs-4xl:  38px;

    /* Line heights */
    --lh-tight: 1.2;
    --lh-snug:  1.4;
    --lh-base:  1.55;
    --lh-loose: 1.7;

    /* Tracking */
    --tracking-tight: -0.015em;
    --tracking-base:  0;
    --tracking-wide:  0.04em;   /* used on uppercase eyebrows / badges */
}

/* ---------- SPACING / RADIUS / MOTION ---------- */
:root {
    --s-1:  4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px;  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px;

    --r-xs: 4px;  --r-sm: 6px;  --r-md: 8px;  --r-lg: 10px; --r-xl: 14px; --r-2xl: 18px; --r-full: 9999px;

    --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- SEMANTIC TYPE CLASSES ---------- */
/* Use these as your h1/h2/etc.  They map to the design-token sizes above. */
.ds-display { font-family: var(--font-sans); font-size: var(--fs-4xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-strong); }
.ds-h1      { font-family: var(--font-sans); font-size: var(--fs-3xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-strong); }
.ds-h2      { font-family: var(--font-sans); font-size: var(--fs-2xl); font-weight: 600; line-height: var(--lh-snug);  color: var(--fg-strong); }
.ds-h3      { font-family: var(--font-sans); font-size: var(--fs-xl);  font-weight: 600; line-height: var(--lh-snug);  color: var(--fg-strong); }
.ds-h4      { font-family: var(--font-sans); font-size: var(--fs-lg);  font-weight: 600; line-height: var(--lh-snug);  color: var(--fg-strong); }
.ds-body    { font-family: var(--font-sans); font-size: var(--fs-base);font-weight: 400; line-height: var(--lh-base);  color: var(--fg); }
.ds-small   { font-family: var(--font-sans); font-size: var(--fs-sm);  font-weight: 400; line-height: var(--lh-base);  color: var(--fg-muted); }
.ds-micro   { font-family: var(--font-sans); font-size: var(--fs-xs);  font-weight: 500; line-height: var(--lh-base);  color: var(--fg-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.ds-mono    { font-family: var(--font-mono); font-size: var(--fs-sm);  font-variant-numeric: tabular-nums; }

/* ---------- GLOBAL RESET (minimal) ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--fg);
    background: var(--bg-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }
a { color: var(--accent); text-decoration: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle); }

/* ---------- KEYFRAMES (used by record button + spinner) ---------- */
@keyframes fbai-spin  { to { transform: rotate(360deg); } }
@keyframes fbai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes fbai-wave  { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
@keyframes fbai-record-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}
@keyframes fbai-record-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50%      { box-shadow: 0 0 0 20px rgba(239,68,68,0); }
}