/* ────────────────────────────────────────────────────────────
 * Cagiva — Design Tokens
 * ──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand */
  --mango: #FF5B14;
  --mango-soft: #FFE5D6;
  --mango-deep: #C73D00;
  --lima: #D7FF3D;
  --lima-deep: #A3CC0A;
  --plasma: #7B61FF;
  --plasma-soft: #EDE8FF;
  --plasma-deep: #4B36C7;

  /* Semantic */
  --success: #16A34A;
  --success-soft: #D5F5DD;
  --danger: #E11D48;
  --danger-soft: #FFE0E6;
  --warning: #F59E0B;
  --warning-soft: #FFEFD0;
  --info: #0EA5E9;

  /* Light surface */
  --ink: #14110F;
  --ink-2: #3D332C;
  --ink-3: #7A6E64;
  --muted: #A89A8E;
  --paper: #FBF6EE;
  --paper-2: #F2EBDD;
  --paper-3: #E8DFC9;
  --card: #FFFFFF;
  --line: rgba(20, 17, 15, 0.08);
  --line-strong: rgba(20, 17, 15, 0.14);
  --overlay: rgba(20, 17, 15, 0.4);

  /* Radius */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-5: 28px;
  --r-pill: 999px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(20,17,15,0.04), 0 1px 1px rgba(20,17,15,0.03);
  --sh-2: 0 4px 12px rgba(20,17,15,0.06), 0 2px 4px rgba(20,17,15,0.04);
  --sh-3: 0 12px 32px rgba(20,17,15,0.10), 0 4px 8px rgba(20,17,15,0.05);
  --sh-pop: 0 24px 60px rgba(20,17,15,0.18), 0 8px 16px rgba(20,17,15,0.08);
  --sh-mango: 0 8px 24px rgba(255,91,20,0.32), 0 2px 6px rgba(255,91,20,0.20);

  /* Motion */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-bounce: cubic-bezier(0.5, 1.5, 0.5, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 420ms;

  /* Typography */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Dark variant (applied via [data-theme="dark"] on a container) */
[data-theme="dark"] {
  --ink: #FBF6EE;
  --ink-2: #C7BBAE;
  --ink-3: #8C8076;
  --muted: #5E544C;
  --paper: #0B0908;
  --paper-2: #15110E;
  --paper-3: #1F1A14;
  --card: #181410;
  --line: rgba(251, 246, 238, 0.08);
  --line-strong: rgba(251, 246, 238, 0.14);
  --mango-soft: #3D1808;
  --plasma-soft: #1F1840;
  --success-soft: #0A2E18;
  --danger-soft: #3A0E1B;
  --warning-soft: #3D2A08;
  --sh-1: 0 1px 2px rgba(0,0,0,0.4);
  --sh-2: 0 6px 16px rgba(0,0,0,0.4);
  --sh-3: 0 16px 40px rgba(0,0,0,0.5);
  --sh-pop: 0 24px 60px rgba(0,0,0,0.6);
  --sh-mango: 0 8px 24px rgba(255,91,20,0.40);
}

/* ─── Base resets scoped to .cagiva-root so we don't break canvas chrome ─── */
.cagiva-root,
.cagiva-root * {
  box-sizing: border-box;
}
.cagiva-root {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cagiva-root button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.cagiva-root input,
.cagiva-root textarea {
  font-family: inherit;
  color: inherit;
}
.cagiva-root h1, .cagiva-root h2, .cagiva-root h3,
.cagiva-root h4, .cagiva-root h5, .cagiva-root h6 {
  font-family: var(--font-display);
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cagiva-root p { margin: 0; }
.cagiva-root ::selection { background: var(--mango); color: #fff; }

/* ─── Utility animations ─── */
@keyframes cg-fade-in    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cg-pop        { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes cg-pulse      { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.65; transform: scale(0.92); } }
@keyframes cg-spark      { 0% { transform: scale(0) rotate(0); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1) rotate(180deg); opacity: 0; } }
@keyframes cg-skew-in    { 0% { transform: translateY(120%) skewY(8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes cg-shine      { 0% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
@keyframes cg-typing     { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes cg-progress   { from { width: 0; } to { width: var(--w, 100%); } }
@keyframes cg-orbit      { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cg-count-up   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Sin transform: un transform (incluso de animación con fill:both) convierte al
   wrapper en bloque contenedor de los hijos position:fixed/absolute → los ancla a su
   caja en vez de al viewport y rompe modales/barras inferiores. Solo opacidad. */
@keyframes cg-page-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes cg-page-out   { to   { opacity: 0; transform: translateX(-20px); } }

/* ─── Scrollbar polish ─── */
.cagiva-root ::-webkit-scrollbar { width: 6px; height: 6px; }
.cagiva-root ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.cagiva-root ::-webkit-scrollbar-track { background: transparent; }

/* ─── No-tap-highlight on mobile chrome ─── */
.cagiva-root a, .cagiva-root button { -webkit-tap-highlight-color: transparent; }

/* ─── Focus visible para enlaces de texto (legal / navegación) ─── */
.cagiva-root .cg-link { outline: none; }
.cagiva-root .cg-link:focus-visible {
  outline: 2px solid var(--mango);
  outline-offset: 2px;
}