/* bubbl! Design System — colors_and_type.css
 * Source of truth for all base + semantic design tokens.
 * Pulled from TalkSync/app/src/main/kotlin/com/talksync/ui/theme/{Color,Type,Spacing}.kt
 */

@font-face {
  font-family: "Sora";
  font-weight: 300;
  src: url("fonts/sora_light.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  font-weight: 400;
  src: url("fonts/sora_regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  font-weight: 500;
  src: url("fonts/sora_medium.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  font-weight: 600;
  src: url("fonts/sora_semibold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  src: url("fonts/instrument_serif_italic.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* === BASE SURFACES === */
  --bg-black: #000000;            /* Black — page bg */
  --surface: #101013;             /* SurfaceBlack — cards/sections */
  --surface-variant: #18181D;     /* SurfaceVariantBlack — inset rows */
  --surface-elevated: #1E1E24;    /* SurfaceElevatedBlack — bottom sheets, dialogs */
  --hairline: rgba(255, 255, 255, 0.08);  /* HairlineWhite — 1dp borders */

  /* === TEXT === */
  --fg-primary: #FFFFFF;          /* PureWhite */
  --fg-secondary: #B4B4BE;        /* SecondaryWhite — body, captions */
  --fg-tertiary: #7E7E88;         /* TertiaryWhite — meta */
  --fg-dim: #6A6A74;              /* DimText — disabled */

  /* === CAPTION OVERLAY === */
  --bubble-bg: rgba(0, 0, 0, 0.80);     /* BubbleBlack */
  --indicator-bg: rgba(0, 0, 0, 0.60);  /* IndicatorBlack */
  /* Bubble gradient stops used in SpeechBubble.kt */
  --bubble-grad-1: #0F1620;
  --bubble-grad-2: #172330;
  --bubble-grad-3: #10201A;

  /* === EMPHASIS / HIGHLIGHT === */
  --emphasis-red: #FF5C6B;        /* EmphasisRed — loud-word color */
  --expansion-yellow: rgba(255, 221, 119, 0.80);  /* ExpansionYellow — slang expansion */

  /* === BRAND ACCENT (teal / mint — pulled from launcher icon) ===
   * The launcher icon's mint-teal is the true brand color and is used
   * everywhere accent / focus / active states appear in-app UI. */
  --brand-accent: #4FCBB5;        /* BrandAccent — primary teal */
  --brand-accent-soft: #2FA48F;   /* BrandAccentSoft — deeper teal for pressed/secondary */
  --brand-accent-bright: #6EE3CC; /* BrandAccentBright — top of cyan gradient */
  --brand-glow: rgba(79, 203, 181, 0.22);  /* BrandGlow — radial halo */
  --brand-grad: linear-gradient(135deg, #6EE3CC 0%, #4FCBB5 50%, #2FA48F 100%);  /* teal/cyan gradient */

  --launcher-teal: #4FCBB5;
  --launcher-bg:   #C7EDE5;

  /* === STATUS PALETTE === */
  --status-live:        #5DE0A0;
  --status-live-soft:   rgba(93, 224, 160, 0.12);
  --status-warn:        #FFC66B;
  --status-warn-soft:   rgba(255, 198, 107, 0.12);
  --status-alert:       #FF7A7A;
  --status-alert-soft:  rgba(255, 122, 122, 0.12);

  /* === TYPOGRAPHY FAMILIES === */
  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent:  "Instrument Serif", Georgia, "Times New Roman", serif;

  /* === TYPE SCALE (sp ≈ px on 1.0 density) === */
  --type-display-lg-size:    36px;
  --type-display-lg-lh:      40px;
  --type-display-lg-tracking: -0.03em;

  --type-display-md-size:    28px;
  --type-display-md-lh:      32px;
  --type-display-md-tracking: -0.03em;

  --type-headline-sm-size:   22px;
  --type-headline-sm-lh:     28px;
  --type-headline-sm-tracking: -0.03em;

  --type-title-lg-size:      18px;
  --type-title-lg-lh:        24px;
  --type-title-lg-tracking:  -0.01em;

  --type-title-md-size:      15px;
  --type-title-md-lh:        22px;
  --type-title-md-tracking:  -0.01em;

  --type-body-lg-size:       15px;
  --type-body-lg-lh:         24px;

  --type-body-md-size:       13px;
  --type-body-md-lh:         21px;

  --type-label-lg-size:      13px;
  --type-label-lg-lh:        18px;
  --type-label-lg-tracking:  -0.01em;

  --type-label-md-size:      11px;
  --type-label-md-lh:        16px;
  --type-label-md-tracking:  0.08em;

  /* === SPACING SCALE (dp ≈ px) === */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-s:   8px;
  --space-m:   12px;
  --space-l:   16px;
  --space-xl:  20px;
  --space-xxl: 28px;
  --space-xxxl:36px;

  /* === RADII === */
  --radius-xs:  8px;
  --radius-s:   12px;
  --radius-m:   16px;
  --radius-l:   20px;
  --radius-xl:  24px;
  --radius-bubble: 26px;   /* SpeechBubble corner */
  --radius-pill: 999px;

  /* === MOTION === */
  --motion-micro:  120ms;
  --motion-short:  180ms;
  --motion-medium: 240ms;
  --motion-long:   360ms;
  --ease-standard:    cubic-bezier(0.20, 0.00, 0.00, 1.00);
  --ease-emphasized:  cubic-bezier(0.30, 0.00, 0.05, 1.00);

  /* === ELEVATION === */
  --shadow-bubble: 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-card:   0 2px 8px rgba(0, 0, 0, 0.40);
}

/* === SEMANTIC TYPE STYLES === */
html, body { background: var(--bg-black); color: var(--fg-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }

.h-display { font-family: var(--font-display); font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-lh); letter-spacing: var(--type-display-lg-tracking); font-weight: 600; }
.h1 { font-family: var(--font-display); font-size: var(--type-display-md-size); line-height: var(--type-display-md-lh); letter-spacing: var(--type-display-md-tracking); font-weight: 600; }
.h2 { font-family: var(--font-display); font-size: var(--type-headline-sm-size); line-height: var(--type-headline-sm-lh); letter-spacing: var(--type-headline-sm-tracking); font-weight: 500; }
.h3 { font-family: var(--font-display); font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-lh); letter-spacing: var(--type-title-lg-tracking); font-weight: 500; }
.title { font-family: var(--font-display); font-size: var(--type-title-md-size); line-height: var(--type-title-md-lh); letter-spacing: var(--type-title-md-tracking); font-weight: 500; }

.body { font-family: var(--font-body); font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh); }
.body-sm { font-family: var(--font-body); font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); }

.label { font-family: var(--font-body); font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-lh); letter-spacing: var(--type-label-lg-tracking); font-weight: 500; }
.label-caps { font-family: var(--font-body); font-size: var(--type-label-md-size); line-height: var(--type-label-md-lh); letter-spacing: var(--type-label-md-tracking); font-weight: 500; text-transform: none; }

.tagline {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--brand-accent);
}

p { color: var(--fg-secondary); }
code, pre, .mono { font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace; font-size: 12px; }