/* TALi Design System — compiled bundle. Source: tokens/*.css */

/* ---- tokens/fonts.css ---- */
/* TALi webfonts — Poppins (display) + Cambay (text).
   Both are the fonts embedded in the source TALi decks and both are Google Fonts.
   Self-hosted binaries were not supplied; we load the Google-hosted faces. */
@import url("https://fonts.googleapis.com/css2?family=Cambay:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap");

/* ---- tokens/colors.css ---- */
:root{
/* ---- Brand core (sampled from the TALi logo + decks) ---- */
--tali-ink:#1A171B;
--tali-cream:#F0F0E4;
--tali-white:#FFFFFF;
--tali-yellow:#F8C92C;
--tali-coral:#E85C43;
--tali-orange:#DE4B13;
--tali-blue:#213F8F;
--tali-periwinkle:#5D74EC;
--tali-green:#61B792;
--tali-indigo:#343D8E;

/* Botones: una capa más suave que la paleta editorial. Mantiene el contraste
   con tinta negra sin volver pastel toda la identidad de TALi. */
--button-yellow:#F6E3A0;
--button-coral:#F2A79A;
--button-green:#A9D7C3;
--button-periwinkle:#B7BFEA;
--button-orange:#F2B18B;
--button-blue:#B7C6E8;
--button-indigo:#B2B8DE;
--button-cream:#F5F3E9;

/* ---- Tints & shades (for hover / press / soft fills only) ---- */
--tali-yellow-dark:#DFB023;
--tali-yellow-soft:#FDEFC0;
--tali-coral-dark:#CE4630;
--tali-coral-soft:#F8D5CE;
--tali-orange-dark:#BC3D0C;
--tali-blue-dark:#182F6C;
--tali-periwinkle-dark:#4557C7;
--tali-periwinkle-soft:#D8DDFA;
--tali-green-dark:#4A9A78;
--tali-green-soft:#D5EDE2;
--tali-ink-70:rgba(26,23,27,.70);
--tali-ink-45:rgba(26,23,27,.45);
--tali-ink-18:rgba(26,23,27,.18);
--tali-cream-dark:#E2E1D2;

/* ---- Semantic surfaces ---- */
--surface-page:var(--tali-white);
--surface-card:var(--tali-cream);
--surface-card-alt:var(--tali-white);
--surface-invert:var(--tali-ink);
--surface-brand-yellow:var(--tali-yellow);
--surface-brand-coral:var(--tali-coral);
--surface-brand-orange:var(--tali-orange);
--surface-brand-blue:var(--tali-periwinkle);
--surface-brand-indigo:var(--tali-indigo);
--surface-brand-green:var(--tali-green);

/* ---- Semantic text ---- */
--text-body:var(--tali-ink);
--text-muted:var(--tali-ink-70);
--text-inverse:var(--tali-cream);
--text-on-brand:var(--tali-ink);
--text-on-indigo:var(--tali-cream);
--text-link:var(--tali-blue);
--text-link-hover:var(--tali-orange);

/* ---- Lines ---- */
--border-strong:var(--tali-ink);
--border-hairline:var(--tali-ink-18);

/* ---- Status (derived from the brand palette; no source UI defined these) ---- */
--status-positive:var(--tali-green);
--status-warning:var(--tali-yellow);
--status-critical:var(--tali-orange);
--status-info:var(--tali-periwinkle);
}

/* ---- tokens/typography.css ---- */
:root{
--font-display:"Poppins","Poppins Fallback",system-ui,sans-serif;
--font-text:"Cambay","Cambay Fallback",Georgia,serif;
--font-ui:"Poppins",system-ui,sans-serif;

--weight-regular:400;
--weight-semibold:600;
--weight-bold:700;
--weight-black:900;

/* Display — always Poppins Black, tight, often uppercase */
--type-display-1:900 clamp(56px,8vw,128px)/0.9 var(--font-display);
--type-display-2:900 clamp(40px,5.5vw,84px)/0.95 var(--font-display);
--type-title:900 clamp(30px,3.6vw,56px)/1.03 var(--font-display);
--type-subtitle:700 clamp(20px,1.8vw,26px)/1.2 var(--font-display);
--type-eyebrow:700 13px/1.2 var(--font-display);

/* Text — Cambay */
--type-lead:400 21px/1.45 var(--font-text);
--type-body:400 18px/1.5 var(--font-text);
--type-body-sm:400 16px/1.5 var(--font-text);
--type-caption:400 14px/1.4 var(--font-text);

/* UI labels — Poppins semibold */
--type-label:600 15px/1 var(--font-ui);
--type-label-sm:600 13px/1 var(--font-ui);

--tracking-display:-0.02em;
--tracking-eyebrow:0.14em;
--tracking-label:0.02em;
}

/* ---- tokens/spacing.css ---- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;

--gutter-page:clamp(20px,5vw,72px); /* @kind spacing */
--measure-text:62ch;
--container-max:1600px;
--container-narrow:760px;
--section-y:clamp(48px,6vw,88px); /* @kind spacing */
--section-y-tight:clamp(32px,4vw,56px); /* @kind spacing */
}

/* ---- tokens/effects.css ---- */
:root{
/* Corners: the brand is square-cornered panels + fully-round capsules. Nothing in between. */
--radius-none:0px;
--radius-xs:3px;
--radius-sm:6px;
--radius-capsule:999px;

/* Borders: one weight everywhere, always ink */
--border-width:2px;
--border-width-thin:1px;
--border-card:var(--border-width) solid var(--border-strong);

/* Shadows: one soft drop for panels, one hard offset for interactive "sticker" surfaces */
--shadow-panel:0 6px 14px rgba(26,23,27,.14);
--shadow-panel-lg:0 14px 32px rgba(26,23,27,.18);
--shadow-sticker:4px 4px 0 var(--tali-ink);
--shadow-sticker-press:2px 2px 0 var(--tali-ink);
--shadow-button:0 3px 0 rgba(26,23,27,.82),0 7px 16px rgba(26,23,27,.10);
--shadow-button-hover:0 4px 0 rgba(26,23,27,.88),0 10px 20px rgba(26,23,27,.13);
--shadow-button-press:0 1px 0 rgba(26,23,27,.88),0 4px 10px rgba(26,23,27,.10);

/* Motion */
--ease-out:cubic-bezier(.2,.7,.3,1); /* @kind other */
--ease-bounce:cubic-bezier(.34,1.56,.64,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:420ms; /* @kind other */
--motion-hover:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms /* @kind other */}}

.zone-menu-card{transition:var(--motion-hover)}
.zone-menu-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-button-hover)!important}
.zone-menu-card:active{transform:translateY(1px);box-shadow:var(--shadow-button-press)!important}

.hero-zone-entry{transition:var(--motion-hover)}
.hero-zone-entry svg{transition:transform var(--dur-base) var(--ease-bounce)}
.hero-zone-entry:hover{transform:translateY(-2px);box-shadow:var(--shadow-button-hover)!important}
.hero-zone-entry:hover svg{transform:translate(4px,-2px) rotate(-4deg)}
.hero-zone-entry:active{transform:translateY(1px);box-shadow:var(--shadow-button-press)!important}

@media (max-width:900px){
  .hero-zone-visual{padding-bottom:0!important;display:flex;flex-direction:column}
  section button.hero-zone-entry{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
    order:-1;width:100%!important;margin:0 0 var(--space-4);grid-template-columns:42px minmax(0,1fr) 58px!important}
}
@media (max-width:480px){
  section button.hero-zone-entry{grid-template-columns:36px minmax(0,1fr) 44px!important;gap:var(--space-3)!important;padding:12px!important}
  .hero-zone-entry>img{width:36px!important}
  .hero-zone-entry svg{width:44px!important}
}