/* ═══════════════════════════════════════════════════════════════
   Montayne — design tokens
   Single source of truth. Import this file in every HTML page.
   Do not define --w-* variables or @keyframes anywhere else.
   ═══════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts ─────────────────────────────────────────
   Files live in frontend/fonts/, served at /static/fonts/.
   Latin-ext covers German umlauts (ä ö ü ß).
   ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/newsreader-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/newsreader-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/newsreader-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/newsreader-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                 U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Color tokens ──────────────────────────────────────────────
   --w-bg          Page/app background. Off-white paper.
   --w-surface     Elevated surfaces: input backgrounds, cards.
   --w-ink         Pure ink. Use only for backgrounds, not text.
   --w-t1          Primary text. Near-black with slight transparency.
   --w-t2          Secondary text. Subheadings, captions, AI speech.
   --w-t3          Tertiary text. Meta, timestamps, placeholders.
   --w-accent      Indigo. CTAs, focus rings, active states, links.
   --w-accent-press Indigo darkened for button press state.
   --w-accent-tint  Indigo at 10% opacity. Focus rings, selections,
                    user speech bubbles.
   --w-border      Soft border. Dividers, non-interactive edges.
   --w-border-2    Medium border. Input outlines.
   --w-hairline    Barely-there divider. Footer tops, rule lines.
   --w-error       Error state text and borders.
   ──────────────────────────────────────────────────────────── */
:root {
  --w-bg:           #f6f6f3;
  --w-surface:      #ffffff;
  --w-ink:          #17171b;
  --w-t1:           rgba(23, 23, 27, 0.92);
  --w-t2:           #5a5a5a;
  --w-t3:           #6c6c6c;
  --w-accent:       #4e5ffd;
  --w-accent-press: #3a4ce6;
  --w-accent-tint:  rgba(78, 95, 253, 0.10);
  --w-border:       rgba(23, 23, 27, 0.09);
  --w-border-2:     rgba(23, 23, 27, 0.14);
  --w-hairline:     rgba(23, 23, 27, 0.07);
  --w-error:        #d04040;

  /* ── Typography ──────────────────────────────────────────────
     --w-serif  Display type, headlines, all learner-facing content,
                vocabulary, conversation text. Weight 400 only.
     --w-sans   UI chrome: nav, labels, buttons, inputs, metadata.
                Weights 400 / 500 / 600 / 700.
     ────────────────────────────────────────────────────────── */
  --w-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --w-sans:  "Inter", system-ui, -apple-system, sans-serif;

  /* ── Type scale ──────────────────────────────────────────────
     font-size ramp. Snapped to the values already in use across
     the app and marketing surfaces — purely additive, changes
     nothing visually until a component references a token.
     Pair sans (UI) roles with --w-sans, reading roles with --w-serif.

     --w-text-eyebrow  11px  Footer, fine meta, uppercase eyebrows.
     --w-text-meta     12px  Labels, metadata, timestamps, wordmark.
     --w-text-ui       15px  Buttons, inputs, nav, UI body. (sans)
     --w-text-body     17px  Reading body, conversation text. (serif)
     --w-text-lead     20px  Subheads, lead-in sentences. (serif)
     --w-text-title    24px  Card titles, small section headings.
     --w-text-head     32px  Screen headlines.
     --w-text-display  44px  Hero / marketing display headline.
     ────────────────────────────────────────────────────────── */
  --w-text-eyebrow: 11px;
  --w-text-meta:    12px;
  --w-text-ui:      15px;
  --w-text-body:    17px;
  --w-text-lead:    20px;
  --w-text-title:   24px;
  --w-text-head:    32px;
  --w-text-display: 44px;

  /* ── Line height ─────────────────────────────────────────────
     --w-lh-tight  1.12  Display + head. Large type, set tight.
     --w-lh-snug   1.3   Titles, leads.
     --w-lh-ui     1.45  UI body, buttons, dense sans text.
     --w-lh-body   1.6   Long-form reading / conversation.
     ────────────────────────────────────────────────────────── */
  --w-lh-tight: 1.12;
  --w-lh-snug:  1.3;
  --w-lh-ui:    1.45;
  --w-lh-body:  1.6;

  /* ── Letter spacing ──────────────────────────────────────────
     --w-ls-display  -0.01em  Large serif display, optically tightened.
     --w-ls-label     0.12em  Uppercase labels / metadata.
     --w-ls-wide      0.22em  Wordmark, widest tracking.
     ────────────────────────────────────────────────────────── */
  --w-ls-display: -0.01em;
  --w-ls-label:    0.12em;
  --w-ls-wide:     0.22em;

  /* ── Layout ──────────────────────────────────────────────────
     --w-px  Horizontal page gutter. App shell uses this value.
             Landing page overrides to clamp(22px, 6vw, 40px)
             for wider viewport comfort on marketing screens.
     ────────────────────────────────────────────────────────── */
  --w-px: clamp(20px, 5.5vw, 32px);

  /* ── Spacing scale ───────────────────────────────────────────
     Base-4 step for gaps, padding, and stack rhythm. Use these
     instead of ad-hoc px so vertical rhythm stays consistent.
     --w-px above remains the responsive horizontal page gutter.

     --w-space-1   4px   Hairline gaps, icon-to-label.
     --w-space-2   8px   Tight pairs.
     --w-space-3  12px   Inline groups, chip padding.
     --w-space-4  16px   Default element gap.
     --w-space-5  24px   Related blocks within a section.
     --w-space-6  32px   Section internal padding.
     --w-space-7  48px   Card padding, section separation.
     --w-space-8  64px   Major screen-level breaks.
     ────────────────────────────────────────────────────────── */
  --w-space-1:  4px;
  --w-space-2:  8px;
  --w-space-3: 12px;
  --w-space-4: 16px;
  --w-space-5: 24px;
  --w-space-6: 32px;
  --w-space-7: 48px;
  --w-space-8: 64px;

  /* ── Control sizes ───────────────────────────────────────────
     All primary interactive controls are 56px tall.
     Circle icon buttons are 44px.
     Never deviate from these without a documented reason.
     ────────────────────────────────────────────────────────── */
  --w-control-h:  56px;
  --w-icon-btn-h: 44px;

  /* ── Radius ──────────────────────────────────────────────────
     --w-r-pill   Full pill (buttons, tags, dots).
     --w-r-card   Cards, modals, larger containers.
     --w-r-input  Inputs and rectangular buttons.
     ────────────────────────────────────────────────────────── */
  --w-r-pill:  999px;
  --w-r-card:  18px;
  --w-r-input: 14px;

  /* ── Motion ──────────────────────────────────────────────────
     --w-ease-out   Standard easing for microinteractions.
     --w-dur-micro  Button hover, focus ring, color transitions.
     --w-dur-screen Screen entrance animations.
     ────────────────────────────────────────────────────────── */
  --w-ease-out:   ease-out;
  --w-dur-micro:  0.14s;
  --w-dur-screen: 0.18s;

  /* ── Elevation ───────────────────────────────────────────────
     Reusable box-shadow strings. Use these rather than inlining
     shadow values in component CSS or inline styles.

     --w-shadow-card        Recap / debrief cards. Hairline + soft drop.
     --w-shadow-pill        Voice-pill (waveform + mic) resting state.
     --w-shadow-pill-hover  Voice-pill elevated hover state.
     --w-shadow-tip         Pause / Beenden tooltip drop.
     ────────────────────────────────────────────────────────── */
  --w-shadow-card:       0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -18px rgba(20,20,40,0.25);
  --w-shadow-pill:       0 12px 34px -10px rgba(10,10,25,0.45), 0 2px 6px -2px rgba(10,10,25,0.3);
  --w-shadow-pill-hover: 0 16px 40px -10px rgba(10,10,25,0.5),  0 2px 6px -2px rgba(10,10,25,0.3);
  --w-shadow-tip:        0 6px 18px -6px rgba(0,0,0,0.5);
}

/* ── Global base ───────────────────────────────────────────────
   Applied once here so neither HTML file needs to repeat it.
   ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

::selection { background: var(--w-accent-tint); }

body {
  font-family: var(--w-sans);
  color: var(--w-t1);
  background: var(--w-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-tap-highlight-color: transparent;
}

/* ── Keyframes ─────────────────────────────────────────────────
   All animation names are prefixed w- (Wispr) or wfr- (waveform).
   Do not define new keyframes in component files.

   w-fade       Simple opacity 0→1. Screen crossfades.
   w-rise       Entrance: fade + translateY 8px→0. Hero elements,
                cards, content that arrives on screen.
   w-rise-sm    Entrance: fade + translateY 4px→0. Smaller items
                within an already-risen container (list rows, etc).
   w-pop        Entrance: fade + scale 0.96→1. Modals, toasts.
   w-soft-pulse Breathing opacity loop. Live indicators, eyebrow dot.
   w-wave       Waveform bar scale animation.
   w-blink      Text cursor blink. Two-frame step animation.
   wfr-breathe  Waveform bar idle breathing. Home screen CTA,
                first-run screen.
   w-ph-bounce  Placeholder dots bounce. Three-dot indicator shown
                while waiting for an utterance's isFinal event.
   ──────────────────────────────────────────────────────────── */
@keyframes w-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes w-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes w-rise-sm {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes w-pop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes w-soft-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1;   }
}
@keyframes w-wave {
  0%, 100% { transform: scaleY(0.35); }
  50%       { transform: scaleY(1);   }
}
@keyframes w-blink {
  50% { opacity: 0; }
}
@keyframes wfr-breathe {
  0%, 100% { transform: scaleY(0.78); opacity: 0.85; }
  50%       { transform: scaleY(1);   opacity: 1;    }
}
@keyframes w-ph-bounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0);    }
  30%            { opacity: 0.8; transform: translateY(-3px); }
}

/* ── Reduced motion ────────────────────────────────────────────
   Collapses all animation and transition durations to near-zero.
   This rule lives here so it applies globally to every page.
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.001ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:      0.001ms !important;
  }
}