/* ============================================================
   Lumio Design System — Tokens
   colors, typography, spacing, radii, shadows, motion
   Source of truth derived from 002/lumio.py
   ============================================================ */

/* Fonts ----------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  /* ============================ COLORS ======================= */

  /* Brand / chrome */
  --lumio-navy:        #0D1B2A;   /* BG_DARK    — intro / picker stage */
  --lumio-navy-2:      #1A2B4A;   /* entry field bg, hover */
  --lumio-navy-3:      #2A3B5A;   /* input borders, dividers on navy */
  --lumio-navy-4:      #1A3A5A;   /* secondary separator on navy */
  --lumio-gold:        #F9CA24;   /* C_GOLD — wordmark + primary CTA */
  --lumio-gold-soft:   #F39C12;   /* hint color, intro emphasis */
  --lumio-chat-bg:     #F4F7FF;   /* BG_CHAT — conversation surface */
  --lumio-panel-bg:    #E8EDF8;   /* BG_PANEL */
  --lumio-chat-canvas: #F0F7FF;   /* scrolled chat inner bg */

  /* Text */
  --fg-on-navy:        #FFFFFF;
  --fg-on-navy-2:      #7FB3D3;   /* secondary text on navy */
  --fg-on-navy-3:      #95A5A6;   /* tertiary / italic on navy */
  --fg-on-navy-4:      #4A6080;   /* muted "← Changer" links */
  --fg-on-chat:        #0D2137;   /* primary text on light chat */
  --fg-muted:          #7F8C8D;   /* status text */
  --fg-faint:          #AAAAAA;   /* "En attente..." */
  --fg-label:          #888888;   /* small uppercase labels (Vitesse, Voix) */

  /* Subjects — used as scheme color when active */
  --subject-geo:       #2980B9;   /* Géographie  — cobalt */
  --subject-his:       #8E44AD;   /* Histoire    — royal purple */
  --subject-math:      #E67E22;   /* Maths       — orange */
  --subject-eps:       #27AE60;   /* EPS         — green */

  /* Age levels */
  --level-1:           #E74C3C;   /* 5-6 ans   — red */
  --level-2:           #E67E22;   /* 7-8 ans   — orange */
  --level-3:           #27AE60;   /* 9-10 ans  — green */

  /* Speed buttons */
  --speed-slow-on:     #3498DB;
  --speed-slow-off:    #D6EAF8;
  --speed-slow-fg-off: #1A5276;
  --speed-norm-on:     #8E44AD;
  --speed-norm-off:    #E8DAEF;
  --speed-norm-fg-off: #6C3483;
  --speed-fast-on:     #E67E22;
  --speed-fast-off:    #FDEBD0;
  --speed-fast-fg-off: #784212;

  /* Voice buttons */
  --voice-denise-on:    #E91E8C;
  --voice-denise-off:   #FADDE9;
  --voice-denise-fg-off:#880E4F;
  --voice-henri-on:     #2196F3;
  --voice-henri-off:    #BBDEFB;
  --voice-henri-fg-off: #1565C0;

  /* Mic semantic states */
  --mic-idle:          #95A5A6;
  --mic-listen:        #2ECC71;
  --mic-think:         #F39C12;
  --mic-speak:         #E74C3C;
  --mic-passive:       #5D6D7E;
  --mic-ring-idle:     #D5DCE8;
  --mic-ring-listen:   #A9DFBF;
  --mic-ring-think:    #FAD7A0;
  --mic-ring-speak:    #F5B7B1;
  --mic-ring-passive:  #AED6F1;

  /* Chat bubble palette */
  --bubble-lumio:      #CBE8FF;     /* Lumio's bubbles */
  --bubble-child:      #C2F5DC;     /* Toi (the child) */
  --bubble-perm:       #F5EEF8;     /* "Veux-tu une autre question ?" */
  --bubble-perm-text:  #4A235A;
  --bubble-sep:        #D0DCF0;
  --child-tag:         #27AE60;
  --perm-tag:          #9B59B6;

  /* Confetti — the navy background dots */
  --confetti-red:      #E74C3C;
  --confetti-orange:   #F39C12;
  --confetti-green:    #2ECC71;
  --confetti-purple:   #9B59B6;
  --confetti-blue:     #3498DB;
  --confetti-teal:     #1ABC9C;
  --confetti-pink:     #E91E63;
  --confetti-amber:    #FF9800;

  /* Semantic / functional */
  --action-skip:       #5DADE2;
  --action-skip-hover: #3498DB;
  --action-stop:       #E74C3C;
  --action-stop-hover: #C0392B;
  --action-resume:     #27AE60;
  --action-resume-hover:#1E8449;

  /* ============================ TYPE =========================== */

  /* Lumio source uses Segoe UI on Windows, Helvetica elsewhere.
     Web substitute: Nunito (Google Fonts) — rounded, friendly, kid-appropriate.
     Flagged in README. Swap here if a brand font is provided. */
  --font-display: "Nunito", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Nunito", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Scale — mirrors Tk px sizes from source */
  --t-wordmark:    72px;   /* LUMIO welcome */
  --t-wordmark-sm: 68px;   /* LUMIO entry / intro */
  --t-display:     28px;
  --t-h1:          24px;   /* "Parfait Léa ! 5-6 ans" */
  --t-h2:          22px;   /* "Quel est ton prénom ?" */
  --t-h3:          21px;   /* "Tu as quel âge ?" */
  --t-h4:          17px;   /* "Comment tu t'appelles ?" */
  --t-button-lg:   16px;
  --t-button:      15px;
  --t-body:        13px;
  --t-body-sm:     12px;
  --t-label:       11px;
  --t-tiny:        10px;
  --t-mini:         9px;

  --w-regular:     400;
  --w-semibold:    600;
  --w-bold:        700;
  --w-black:       800;

  --lh-tight:      1.15;
  --lh-snug:       1.3;
  --lh-normal:     1.45;
  --lh-loose:      1.6;

  /* ============================ SPACING ======================== */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:       12px;
  --space-4:       16px;
  --space-5:       18px;   /* common Tk pady */
  --space-6:       22px;   /* Tk pady=22 */
  --space-7:       30px;
  --space-8:       36px;
  --space-9:       48px;
  --space-10:      64px;

  /* ============================ RADII ========================== */
  --radius-sm:      8px;
  --radius-md:     12px;   /* input fields */
  --radius-lg:     16px;
  --radius-xl:     20px;   /* speed/voice/action buttons */
  --radius-2xl:    24px;   /* CTA + subject tiles */
  --radius-full:  9999px;  /* mic, avatar */

  /* ============================ SHADOWS ======================== */
  /* Lumio source uses ZERO drop shadows. These exist for web parity only,
     and should be used very sparingly — keep it flat. */
  --shadow-none:   none;
  --shadow-soft:   0 1px 2px rgba(13, 27, 42, 0.06);
  --shadow-card:   0 4px 12px rgba(13, 27, 42, 0.08);
  --shadow-pop:    0 8px 24px rgba(13, 27, 42, 0.14);
  --ring-focus:    0 0 0 3px rgba(249, 202, 36, 0.35); /* gold focus ring */

  /* ============================ MOTION ========================= */
  --ease-out:      cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fade:      180ms;   /* alpha 0→1 ramp from source */
  --dur-quick:     120ms;
  --dur-hover:     150ms;
  --dur-pulse:     480ms;   /* mic pulse cycle */
  --dur-typing:    420ms;   /* typing-dot tick */

  /* ============================ SIZES ========================== */
  --hit-target:     44px;     /* min kid-friendly hit target */
  --btn-sm:         36px;
  --btn-md:         40px;
  --btn-lg:         54px;
  --btn-xl:         75px;     /* level picker */
  --tile-h:        105px;     /* subject tile */
  --mic-circle:    130px;     /* default mic size */
  --header-h:       70px;
  --bottom-panel:  220px;     /* min height of conv. bottom panel */
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  font-family: var(--font-body);
  color: var(--fg-on-chat);
  background: var(--lumio-chat-bg);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lumio-wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  color: var(--lumio-gold);
  letter-spacing: 0.04em;
  font-size: var(--t-wordmark);
  line-height: 1;
}

.lumio-tagline {
  font-family: var(--font-body);
  font-weight: var(--w-semibold);
  color: var(--fg-on-navy-2);
  font-size: 14px;
  letter-spacing: 0.01em;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  margin: 0;
}
p, .body {
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  margin: 0;
}
.caption {
  font-size: var(--t-label);
  color: var(--fg-on-navy-3);
  font-style: italic;
}
.label-mini {
  font-size: var(--t-mini);
  font-weight: var(--w-bold);
  color: var(--fg-label);
  text-transform: none;        /* Lumio doesn't go ALL CAPS for labels */
  letter-spacing: 0.02em;
}

/* ============================================================
   Reusable primitives
   ============================================================ */

.lumio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-button);
  padding: 0 var(--space-6);
  height: var(--btn-lg);
  border-radius: var(--radius-2xl);
  background: var(--lumio-gold);
  color: var(--lumio-navy);
  transition: background var(--dur-hover) var(--ease-out),
              transform var(--dur-quick) var(--ease-out);
  white-space: nowrap;
}
.lumio-btn:hover  { background: color-mix(in srgb, var(--lumio-gold) 92%, white); }
.lumio-btn:active { transform: scale(0.98); }
.lumio-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.lumio-btn--ghost {
  background: var(--lumio-navy-2);
  color: var(--fg-on-navy-2);
}
.lumio-btn--ghost:hover { background: var(--lumio-navy-3); }

.lumio-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-md);
  padding: 0 var(--space-4);
  border-radius: var(--radius-xl);
  border: 0;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-tiny);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out);
}

.lumio-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: var(--tile-h);
  border-radius: var(--radius-2xl);
  color: white;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-button);
  cursor: pointer;
  border: 0;
  transition: filter var(--dur-hover) var(--ease-out),
              transform var(--dur-quick) var(--ease-out);
}
.lumio-tile:hover { filter: brightness(1.08); }
.lumio-tile:active { transform: scale(0.98); }

/* Confetti dot — used to scatter geometric stars on the navy stage */
.lumio-confetti {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Section separator — 3px solid gold (or any color) */
.lumio-sep {
  height: 3px;
  border: 0;
  background: var(--lumio-gold);
  border-radius: 2px;
  margin: var(--space-5) var(--space-7);
}
.lumio-sep--thin {
  height: 2px;
  background: var(--lumio-navy-4);
  margin: var(--space-1) calc(var(--space-7) * 2);
}

/* Mic pulse keyframe — 480ms binary scale (1.0 / 1.18) like the source */
@keyframes lumio-mic-pulse {
  0%, 49%  { transform: scale(1.00); }
  50%, 100%{ transform: scale(1.18); }
}
.lumio-mic--pulsing { animation: lumio-mic-pulse var(--dur-pulse) steps(2, end) infinite; }

@keyframes lumio-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lumio-fade-in { animation: lumio-fade-in var(--dur-fade) var(--ease-out) both; }