/* ============================================================
   Dimmy Design System — Tokens
   Source of truth: github.com/KonradDallaOrg/dimmy
   - Colors mirror platforms/linux/src/pill_window.rs and
     platforms/macos/Dimmy/Views/PillView.swift exactly.
   - Type tokens follow platforms/macos/Dimmy/Utilities/AppStyle.swift
     (scaleFactor = 1.15).
   ============================================================ */

:root {
  /* ─────────── Brand gradient (icon outline) ─────────── */
  --dimmy-mint:    #34D399;
  --dimmy-cyan:    #38BDF8;
  --dimmy-indigo:  #6366F1;
  --dimmy-violet:  #818CF8;
  --dimmy-gradient: linear-gradient(135deg, #34D399 0%, #38BDF8 50%, #6366F1 100%);
  --dimmy-gradient-stroke: conic-gradient(from 0deg,
    #FF5C5C, #F59E0B, #FBBF24, #4ADE80, #22D3EE, #38BDF8, #A78BFA, #E879F9, #FF5C5C);

  /* ─────────── Surfaces (near-black) ─────────── */
  --bg-0:        #000000;        /* page void */
  --bg-base:     #0A0A0A;        /* pill body / panel base */
  --bg-raised:   #1A1A1A;        /* card, popover (pill_window.rs inner fill) */
  --bg-elevated: #232323;        /* settings row hover */
  --bg-overlay:  rgba(20,20,20,0.92);

  /* ─────────── Hairlines & borders ─────────── */
  --hairline:           rgba(255,255,255,0.12); /* idle pill outline */
  --hairline-strong:    rgba(255,255,255,0.20);
  --border-none:        #3C3C3C;                /* "None" pill border */
  --border-soft:        rgba(255,255,255,0.08);

  /* ─────────── Text ─────────── */
  --fg-primary:    rgba(255,255,255,0.95);
  --fg-secondary:  rgba(255,255,255,0.55);
  --fg-tertiary:   rgba(255,255,255,0.35);
  --fg-quaternary: rgba(255,255,255,0.20);
  --fg-waveform:   rgba(255,255,255,0.90); /* COLOR_WHITE in waveform.rs */

  /* On-light variants (settings panels in light mode) */
  --fg-primary-light:   rgba(0,0,0,0.92);
  --fg-secondary-light: rgba(0,0,0,0.55);

  /* ─────────── Pill border styles ─────────── */
  --pill-border-blue:   #38BDF8;
  --pill-border-green:  #4ADE80;
  --pill-border-purple: #A78BFA;
  --pill-border-orange: #FB923C;
  --pill-border-none:   #3C3C3C;

  /* ─────────── State colors (transcribing / processing / done / error) ─────────── */
  --state-transcribing: #38BDF8;  /* blue */
  --state-processing:   #A78BFA;  /* purple */
  --state-done:         #4ADE80;  /* green */
  --state-error:        #EF4444;  /* red */

  /* ─────────── Semantic ─────────── */
  --success: #4ADE80;
  --info:    #38BDF8;
  --warning: #FB923C;
  --danger:  #EF4444;

  /* ─────────── LLM style colors (13) ─────────── */
  --llm-off:            #41B0B1;
  --llm-correct:        #2DD4BF;
  --llm-summarize:      #FBBF24;
  --llm-elaborate:      #4ADE80;
  --llm-comprehensible: #38BDF8;
  --llm-professional:   #F472B6;
  --llm-prompt:         #A78BFA;
  --llm-genz:           #E879F9;
  --llm-boomer:         #F97316;
  --llm-emoji:          #FACC15;
  --llm-acronyms:       #22D3EE;
  --llm-imbruttito:     #EF4444;
  --llm-custom:         #FB923C;

  /* ─────────── Type stacks ─────────── */
  --font-sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, "Inter", "Cantarell", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "SF Pro Display", "Segoe UI Variable", system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ─────────── Type scale (×1.15 from AppStyle.swift base) ─────────── */
  --fs-title:    32px;  /* 28 × 1.15 — onboarding headline */
  --fs-headline: 20px;  /* 18 × 1.15 — section title */
  --fs-body:     16px;  /* 14 × 1.15 */
  --fs-caption:  14px;  /* 12 × 1.15 */
  --fs-small:    13px;  /* 11 × 1.15 — pill text */
  --fs-micro:    11px;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.30;
  --lh-normal:  1.50;
  --lh-relaxed: 1.65;

  /* Letter-spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;

  /* ─────────── Spacing (×1.15) ─────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  9px;   /* paddingSmall */
  --space-4:  12px;
  --space-5:  16px;  /* paddingMedium */
  --space-6:  20px;
  --space-7:  23px;  /* paddingLarge */
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 56px;
  --space-11: 80px;

  /* ─────────── Radii ─────────── */
  --radius-xs:  4px;
  --radius-sm:  8px;   /* preset chips */
  --radius-md:  10px;  /* keycap */
  --radius-lg:  12px;  /* settings card (cornerRadius) */
  --radius-xl:  14px;  /* recording chip */
  --radius-2xl: 18px;
  --radius-pill: 9999px;

  /* ─────────── Pill geometry ─────────── */
  --pill-height: 36px;
  --pill-pad-x-idle: 14px;
  --pill-pad-x-hover: 16px;
  --pill-pad-x-recording: 18px;

  /* ─────────── Shadows (layered colored glow, recording state) ─────────── */
  --glow-rainbow:
    0 0 12px rgba(167, 139, 250, 0.40),
    0 0 8px rgba( 56, 189, 248, 0.40),
    0 0 4px rgba( 74, 222, 128, 0.40);
  --glow-blue:   0 0 12px rgba( 56,189,248,0.35), 0 0 8px rgba( 56,189,248,0.25);
  --glow-green:  0 0 12px rgba( 74,222,128,0.40), 0 0 8px rgba( 74,222,128,0.25);
  --glow-purple: 0 0 12px rgba(167,139,250,0.35), 0 0 8px rgba(167,139,250,0.25);
  --glow-orange: 0 0 12px rgba(251,146,60, 0.40), 0 0 8px rgba(251,146,60, 0.25);
  --glow-error:  0 0 10px rgba(239, 68, 68, 0.45);

  /* Settings card / panel shadows (system-y, no big drops) */
  --shadow-soft:   0 1px 2px rgba(0,0,0,0.30), 0 1px 1px rgba(0,0,0,0.18);
  --shadow-raised: 0 8px 24px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);

  /* ─────────── Materials (vibrancy approximation) ─────────── */
  --material-thin: rgba(20,20,22,0.55);
  --material-thick: rgba(16,16,18,0.78);
  --material-blur-thin: blur(20px) saturate(1.4);
  --material-blur-thick: blur(40px) saturate(1.5);

  /* ─────────── Motion ─────────── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.5, 1.5, 0.4, 1.0);
  --dur-fast: 120ms;
  --dur-base: 200ms;       /* default SwiftUI .easeInOut(0.2) */
  --dur-medium: 350ms;
  --dur-slow: 600ms;
  --dur-rainbow: 2500ms;   /* canonical pill rainbow loop */
}

/* ============================================================
   Semantic type roles
   ============================================================ */

.h-display,
h1.dimmy {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.h-headline,
h2.dimmy {
  font-family: var(--font-display);
  font-size: var(--fs-headline);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.h-section,
h3.dimmy {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.t-body,
p.dimmy {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  text-wrap: pretty;
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--fg-secondary);
}

.t-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--fg-secondary);
}

.t-mono,
code.dimmy {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0;
}

.t-keycap {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 8px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  color: var(--fg-primary);
}