/* ============================================================
   SpeakFluently — Colors & Type tokens
   ============================================================
   Source of truth: app/src/assets/main.css + tailwind.config.js
   from the SpeakFluently Vue app. Colors use OKLCH; type uses
   Outfit (Google Fonts). Brand is essentially monochrome — the
   design system leans on a near-black primary, warm off-white
   page color (#fefcf8), and neutral grays. Accent color orange
   appears only in hand-drawn illustrations.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Base color palette (OKLCH) ---------- */
  --color-white:          #fefcf8;   /* page background (tailwind `white` override) */
  --color-true-white:     oklch(1 0 0);
  --color-background:     oklch(1 0 0);
  --color-foreground:     oklch(0.13 0.028 261.692);   /* near-black w/ blue cast */

  --color-primary:        oklch(0.21 0.034 264.665);   /* dark slate — CTAs */
  --color-primary-foreground: oklch(0.985 0.002 247.839);

  --color-secondary:      oklch(0.967 0.003 264.542);
  --color-secondary-foreground: oklch(0.21 0.034 264.665);

  --color-muted:          oklch(0.967 0.003 264.542);
  --color-muted-foreground: oklch(0.551 0.027 264.364);

  --color-accent:         oklch(0.967 0.003 264.542);
  --color-accent-foreground: oklch(0.21 0.034 264.665);

  --color-destructive:    oklch(0.577 0.245 27.325);
  --color-destructive-foreground: oklch(0.577 0.245 27.325);

  --color-border:         oklch(0.928 0.006 264.531);
  --color-input:          oklch(0.928 0.006 264.531);
  --color-ring:           oklch(0.707 0.022 261.325);

  /* ---------- Semantic role aliases ---------- */
  --fg-1: var(--color-foreground);                      /* headings, primary text */
  --fg-2: var(--color-muted-foreground);                /* body, subdued text */
  --fg-3: oklch(0.551 0.027 264.364 / 0.6);             /* captions, hints */
  --bg-page:   var(--color-white);                      /* warm off-white page */
  --bg-card:   var(--color-true-white);                 /* pure white card on warm bg */
  --bg-muted:  #f9fafb;                                 /* gray-50 used on alt sections */
  --stroke:    var(--color-border);
  --stroke-strong: oklch(0.13 0.028 261.692);           /* 1–2px black border — signature */

  /* ---------- Chart palette (illustration accents) ---------- */
  --chart-1: oklch(0.646 0.222 41.116);                 /* warm orange — from illustrations */
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);

  /* ---------- Typography ---------- */
  --font-sans:    'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Size ramp — Tailwind's default scale is in active use. */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  1.875rem;
  --fs-4xl:  2.25rem;
  --fs-5xl:  3rem;
  --fs-6xl:  3.75rem;

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-relaxed:1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;

  /* ---------- Radii / shadows / spacing ---------- */
  --radius:      0.625rem;
  --radius-sm:   calc(var(--radius) - 4px);
  --radius-md:   calc(var(--radius) - 2px);
  --radius-lg:   var(--radius);
  --radius-xl:   calc(var(--radius) + 4px);
  --radius-full: 9999px;

  --shadow-xs:  0 1px 1px rgba(17, 24, 39, 0.04);
  --shadow-sm:  0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 3px rgba(17, 24, 39, 0.04);
  --shadow-md:  0 4px 10px rgba(17, 24, 39, 0.06), 0 2px 4px rgba(17, 24, 39, 0.04);
  --shadow-lg:  0 10px 24px rgba(17, 24, 39, 0.08);
  --backdrop-blur: 12px;                                 /* header uses bg-white/70 + blur */

  /* The iconic circular ghost button size + border */
  --pill-sm: 2.5rem;   /* 40px — top-nav */
  --pill-md: 3rem;     /* 48px — inline CTAs */
  --pill-lg: 4rem;     /* 64px — hero mic button */
}

/* ============================================================
   Semantic element styles
   ============================================================ */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 { font-family: var(--font-display); font-size: var(--fs-6xl); font-weight: var(--fw-bold);    letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
h2 { font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: var(--fw-bold);    line-height: var(--lh-snug); }
h3 { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
h4 { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-medium); }
h5 { font-family: var(--font-display); font-size: var(--fs-xl);  font-weight: var(--fw-medium); }
h6 { font-family: var(--font-display); font-size: var(--fs-lg);  font-weight: var(--fw-medium); }

p           { font-size: var(--fs-base); color: var(--fg-1); }
.lead       { font-size: var(--fs-xl);  font-weight: var(--fw-light); color: var(--fg-2); }
.caption    { font-size: var(--fs-sm);  color: var(--fg-2); }
.fineprint  { font-size: var(--fs-xs);  color: var(--fg-3); }

/* The SpeakFluently signature: large, light-weight hero prose */
.display-hero {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}
.display-body {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: var(--fw-light);
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
}

/* Quiet, underlined inline selectors (from OnboardingFlow) */
.inline-selector {
  display: inline-block;
  padding: 0 0.5rem;
  min-width: 160px;
  text-align: center;
  border-bottom: 2px solid var(--stroke-strong);
  cursor: pointer;
}

/* Signature circular ghost button */
.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pill-md);
  height: var(--pill-md);
  border-radius: var(--radius-full);
  border: 1px solid var(--stroke-strong);
  background: transparent;
  color: var(--fg-1);
  cursor: pointer;
  transition: background-color 180ms ease;
}
.pill-btn:hover { background: rgba(255,255,255,0.8); }
.pill-btn.sm { width: var(--pill-sm); height: var(--pill-sm); }
.pill-btn.lg { width: var(--pill-lg); height: var(--pill-lg); }