/* ═══════════════════════════════════════════════════════
   HubFlow — Design Tokens (Unified Learn Platform)
   Warm Analog Study Desk: paper textures, editorial serif,
   restrained warmth, book-spine color accents
   Token prefix: --lp- (Learn Platform)
   ═══════════════════════════════════════════════════════ */

@import './breakpoints.css';

/* Font: loaded early via <link> in index.html for the main page.
   Exercises still discover the font through this @import (cached after first load). */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

/* ─── TOKENS ─── */
:root {
  /* Surface & Paper */
  --lp-bg: #FFFFFF;
  --lp-bg-paper: #F7F4EF;
  --lp-surface: #FFFFFF;
  --lp-surface-raised: #FFFFFF;
  --lp-surface-sunken: #F3F0EA;

  /* Borders */
  --lp-border: #E2DAD0;
  --lp-border-strong: #CFC4B6;
  --lp-border-subtle: #EEEAE4;

  /* Ink */
  --lp-ink: #2C2418;
  --lp-ink-soft: #574A3C;
  --lp-muted: #8A7D6E;
  --lp-ink-inverse: #FFFFFF;

  /* Accent — vivid blue (homologado entre las 4 apps) */
  --lp-accent: #2563EB;
  --lp-accent-soft: #E8F0FE;
  --lp-accent-dark: #1E40AF;
  --lp-accent-hover: #1D4ED8;
  --lp-accent-text: #1E40AF;
  --lp-primary: var(--lp-accent);

  /* Selection chip — cat-bar / category pills (unificado light + dark) */
  --lp-chip-active-bg: #E8F0FE;
  --lp-chip-active-text: #1E40AF;
  --lp-chip-active-border: #93C5FD;
  --lp-chip-active-shadow: 0 1px 4px rgba(37, 99, 235, 0.14);
  --lp-chip-active-bg-hover: #DCE8FC;

  /* Category spines */
  --lp-cat-blue: #3D6B9F;
  --lp-cat-blue-soft: #EBF2FA;
  --lp-cat-amber: #B8860B;
  --lp-cat-amber-soft: #FDF5E0;
  --lp-cat-green: #4A8C5C;
  --lp-cat-green-soft: #EAF5ED;
  --lp-cat-purple: #7B5EA7;
  --lp-cat-purple-soft: #F3EDF9;
  --lp-cat-teal: #3D7F7F;
  --lp-cat-teal-soft: #E8F4F4;

  /* Semantic feedback */
  --lp-error: #C0392B;
  --lp-error-soft: #FDEDEB;
  --lp-error-dark: #922B21;
  --lp-success: #27865A;
  --lp-success-soft: #E8F6EF;
  --lp-success-dark: #1B5E3F;
  --lp-info: #3D6B9F;
  --lp-info-soft: #EBF2FA;
  --lp-info-dark: #2C4F75;
  --lp-warning: #C87D0A;
  --lp-warning-soft: #FDF5E0;

  /* Exercise bottom nav — +15% vs 44px touch target; +30% more on mobile */
  --ex-bottom-nav-btn-size: 51px;
  --ex-bottom-nav-padding-y: 9px;
  --ex-bottom-nav-padding-x: 12px;
  --ex-bottom-nav-min-height: 69px;
  --ex-bottom-nav-scroll-reserve: 83px;

  /* Elevation */
  --lp-shadow-xs: 0 1px 2px rgba(44, 36, 24, 0.05);
  --lp-shadow-sm: 0 2px 6px rgba(44, 36, 24, 0.06), 0 4px 14px rgba(44, 36, 24, 0.05);
  --lp-shadow-md: 0 4px 16px rgba(44, 36, 24, 0.09), 0 2px 6px rgba(44, 36, 24, 0.05);
  --lp-shadow-lg: 0 10px 32px rgba(44, 36, 24, 0.11), 0 3px 8px rgba(44, 36, 24, 0.06);
  --lp-shadow-hover: 0 12px 38px rgba(44, 36, 24, 0.14), 0 4px 10px rgba(44, 36, 24, 0.07);

  /* Shape */
  --lp-radius-xs: 4px;
  --lp-radius-sm: 6px;
  --lp-radius-md: 10px;
  --lp-radius-lg: 14px;
  --lp-radius-xl: 20px;
  --lp-radius-full: 9999px;

  /* Typography */
  --lp-font-display: 'Newsreader', Georgia, serif;
  --lp-font-body: 'Manrope', system-ui, sans-serif;
  --lp-font-mono: 'JetBrains Mono', monospace;

  /* Type Scale */
  --lp-text-xs: 0.75rem;
  --lp-text-sm: 0.875rem;
  --lp-text-base: 1rem;
  --lp-text-lg: 1.125rem;
  --lp-text-xl: 1.25rem;
  --lp-text-2xl: 1.5rem;
  --lp-text-3xl: 1.875rem;

  /* Font Weights */
  --lp-weight-normal: 400;
  --lp-weight-medium: 500;
  --lp-weight-semibold: 600;
  --lp-weight-bold: 700;
  --lp-weight-extrabold: 800;

  /* Motion */
  --lp-ease: cubic-bezier(0.22, 0.9, 0.36, 1);
  --lp-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lp-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --lp-duration-fast: 150ms;
  --lp-duration-normal: 250ms;
  --lp-duration-slow: 400ms;

  /* Spacing */
  --lp-space-xs: 4px;
  --lp-space-sm: 8px;
  --lp-space-md: 14px;
  --lp-space-lg: 20px;
  --lp-space-xl: 28px;
  --lp-space-2xl: 40px;

  /* Header bars — homologado entre DeskFlow/HubFlow/FluentFlow/LyricFlow */
  --lp-header-height: 85px;
  --lp-header-height-compact: 64px;

  /* Progress/score bars — homologado entre DeskFlow/HubFlow/FluentFlow/LyricFlow */
  --lp-progress-height: 4px;
  --lp-progress-height-compact: 3px;

  /* Score/stats pill (header) — homologado entre DeskFlow/HubFlow/FluentFlow/LyricFlow.
     Tokens dedicados, no reutilizan --lp-border/--lp-ink/etc. directamente para que
     el pill nunca se desvíe si esos tokens generales cambian en una sola app. */
  --lp-score-height: 44px;
  --lp-score-radius: 9999px;
  --lp-score-border-width: 1.5px;
  --lp-score-padding-x: 20px;
  --lp-score-icon-size: 16px;
  --lp-score-group-gap: 6px;
  --lp-score-divider-width: 1.5px;
  --lp-score-divider-gap: 14px;
  --lp-score-font-family: 'Manrope', system-ui, sans-serif;
  --lp-score-font-size: 0.8125rem;
  --lp-score-font-weight: 600;
  --lp-score-value-size: 1.125rem;
  --lp-score-value-weight: 700;
  --lp-score-bg: #FFFFFF;
  --lp-score-border: #E2DAD0;
  --lp-score-shadow: 0 0 0 1px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06);
  --lp-score-value-color: #2C2418;
  --lp-score-label-color: #8A7D6E;
  --lp-score-icon-color: #2563EB;
  --lp-score-success-color: #27865A;
  --lp-score-error-color: #C0392B;

  /* Botón de navegación (hamburguesa/ícono circular) — homologado entre las 4 apps.
     Tokens dedicados, no reutilizan --lp-border/--lp-shadow-sm/etc. directamente para
     que el botón nunca se desvíe si esos tokens generales cambian en una sola app. */
  --lp-navbtn-size: 44px;
  --lp-navbtn-radius: 50%;
  --lp-navbtn-border-width: 1.5px;
  --lp-navbtn-z: 35;
  --lp-navbtn-border: #E8E0D4;
  --lp-navbtn-bg: #FFFFFF;
  --lp-navbtn-icon-color: #5E5041;
  --lp-navbtn-accent: #D4764E;
  --lp-navbtn-shadow: 0 1px 3px rgba(44, 36, 24, 0.04), 0 4px 10px rgba(44, 36, 24, 0.04);
  --lp-navbtn-shadow-hover: 0 4px 14px rgba(44, 36, 24, 0.08), 0 2px 6px rgba(44, 36, 24, 0.05);

  /* LP HEADER layout + typography — spec v1 */
  --lp-header-pad-y: 22px;
  --lp-header-pad-x: clamp(16px, 3vw, 34px);
  --lp-header-pad-y-compact: 10px;
  --lp-header-pad-x-compact: 12px;
  --lp-navbtn-offset-top: calc((var(--lp-header-height) - var(--lp-navbtn-size)) / 2);
  --lp-navbtn-offset-top-compact: calc((var(--lp-header-height-compact) - var(--lp-navbtn-size)) / 2);
  --lp-navbtn-offset-left: 16px;
  --lp-header-floating-pad-left: calc(var(--lp-navbtn-offset-left) + var(--lp-navbtn-size) + 18px);
  --lp-header-floating-pad-left-compact: calc(var(--lp-navbtn-offset-left) + var(--lp-navbtn-size) + 8px);
  --lp-header-title-size: 1.25rem;
  --lp-header-title-weight: 500;
  --lp-header-title-tracking: -0.02em;
  --lp-header-title-line-height: 1.1;
  --lp-header-sub-size: 0.68rem;
  --lp-header-sub-weight: 400;
  --lp-header-sub-line-height: 1.35;
  --lp-header-tag-size: 10px;
  --lp-header-tag-weight: 600;
  --lp-header-tag-tracking: 0.06em;
}

/* ─── DARK MODE — slate suave (alineado con DeskFlow) ─── */
[data-theme="dark"] {
  --lp-bg: #181B20;
  --lp-bg-paper: #1E2228;
  --lp-surface: #252930;
  --lp-surface-raised: #2B3038;
  --lp-surface-sunken: #14171C;

  --lp-border: #353B45;
  --lp-border-strong: #454C58;
  --lp-border-subtle: #2A2F38;

  --lp-ink: #E8EAED;
  --lp-ink-soft: #A8B0BC;
  --lp-muted: #7A8494;
  --lp-ink-inverse: #181B20;

  --lp-accent-soft: #1A2744;
  --lp-accent-text: #93c5fd;

  /* Selection chip — cat-bar / category pills */
  --lp-chip-active-bg: color-mix(in srgb, #60A5FA 22%, var(--lp-surface));
  --lp-chip-active-text: #BFDBFE;
  --lp-chip-active-border: color-mix(in srgb, #60A5FA 48%, var(--lp-border));
  --lp-chip-active-shadow: 0 1px 4px rgba(59, 130, 246, 0.22);
  --lp-chip-active-bg-hover: color-mix(in srgb, #60A5FA 30%, var(--lp-surface));

  --lp-cat-blue: #6FA8DC;
  --lp-cat-blue-soft: #1E3350;
  --lp-cat-amber: #E6A832;
  --lp-cat-amber-soft: #3D3018;
  --lp-cat-green: #6DBF8B;
  --lp-cat-green-soft: #1F3D28;
  --lp-cat-purple: #A98ED4;
  --lp-cat-purple-soft: #2E2240;
  --lp-cat-teal: #6BC4C4;
  --lp-cat-teal-soft: #1F3838;

  --lp-error-soft: #3D1A1A;
  --lp-success-soft: #1A2D20;
  --lp-info-soft: #1A2A3D;
  --lp-warning-soft: #2D2510;

  --lp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.12);
  --lp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.16), 0 4px 10px rgba(0, 0, 0, 0.12);
  --lp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.12);
  --lp-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
  --lp-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.24), 0 2px 6px rgba(0, 0, 0, 0.12);

  /* Score/stats pill (header, dark) — homologado entre las 4 apps */
  --lp-score-bg: #1E2228;
  --lp-score-border: #353B45;
  --lp-score-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.14);
  --lp-score-value-color: #E8EAED;
  --lp-score-label-color: #7A8494;
  --lp-score-icon-color: #6B9FE8;
  --lp-score-success-color: #A8B0BC;
  --lp-score-error-color: #C0392B;

  /* Botón de navegación (dark) — homologado entre las 4 apps */
  --lp-navbtn-border: #353B45;
  --lp-navbtn-bg: #252930;
  --lp-navbtn-icon-color: #A8B0BC;
  --lp-navbtn-accent: #2563EB;
  --lp-navbtn-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.14);
  --lp-navbtn-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.14);
}

/* ─── LEGACY ALIASES (exercise pages still reference old names) ─── */
.learnflow-guide-title {
  flex: 1; min-width: 0; justify-content: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

:root {
  --bg: var(--lp-bg);
  --paper: var(--lp-bg-paper);
  --surface: var(--lp-surface);
  --border: var(--lp-border);
  --border-strong: var(--lp-border-strong);
  --ink: var(--lp-ink);
  --ink-soft: var(--lp-ink-soft);
  --muted: var(--lp-muted);
  --warm: var(--lp-accent);
  --warm-soft: var(--lp-accent-soft);
  --warm-dark: var(--lp-accent-dark);
  --c-ing: var(--lp-cat-blue);
  --c-ing-soft: var(--lp-cat-blue-soft);
  --c-ed: var(--lp-cat-amber);
  --c-ed-soft: var(--lp-cat-amber-soft);
  --c-noun: var(--lp-cat-green);
  --c-noun-soft: var(--lp-cat-green-soft);
  --c-vocab: var(--lp-cat-purple);
  --c-vocab-soft: var(--lp-cat-purple-soft);
  --c-opp: var(--lp-cat-teal);
  --c-opp-soft: var(--lp-cat-teal-soft);
  --red: var(--lp-error);
  --red-light: var(--lp-error-soft);
  --red-dark: var(--lp-error-dark);
  --green: var(--lp-success);
  --green-light: var(--lp-success-soft);
  --green-dark: var(--lp-success-dark);
  --blue: var(--lp-info);
  --blue-light: var(--lp-info-soft);
  --blue-dark: var(--lp-info-dark);
  --orange: var(--lp-warning);
  --orange-light: var(--lp-warning-soft);
  --purple: var(--lp-cat-purple);
  --purple-light: var(--lp-cat-purple-soft);
  --shadow-sm: var(--lp-shadow-sm);
  --shadow-lg: var(--lp-shadow-lg);
  --radius: var(--lp-radius-md);
  --radius-lg: var(--lp-radius-lg);
  --ease: var(--lp-ease);
  --ease-bounce: var(--lp-ease-bounce);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--lp-font-body);
  color: var(--lp-ink); background: var(--lp-bg);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}

/* ─── PAPER GRAIN TEXTURE ─── */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before { opacity: .06; }

/* ─── TYPOGRAPHY ─── */
.mono { font-family: var(--lp-font-mono); }

/* ─── LAYOUT ─── */
.wrap { max-width: 680px; width: 100%; margin: 0 auto; padding: 0 14px; position: relative; z-index: 1; flex: 1; }
a { color: inherit; text-decoration: none; }

/* ─── ANIMATIONS ─── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { transform: scale(.97); opacity: .9; } to { transform: scale(1); opacity: 1; } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes pulse { from { opacity: 1; } to { opacity: .4; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Theme smooth transition */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--lp-border); border-radius: 3px; }

/* Foco accesible global — todo control interactivo muestra anillo de foco */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 2px;
}

/* ─── MOBILE: remove forced min-height to avoid empty scroll ─── */
@media (max-width: 639px) {
  html { overscroll-behavior: none; }
  body { overscroll-behavior: none; }
  .wrap { padding: 0 10px; }
}