/* Nubebé design tokens.
   Ported from the Claude Design project "Nubebé Design System"
   (_ds/nubeb-design-system-3eb46d/tokens/), cascade order preserved:
   colors → typography → spacing → radius → elevation → motion. */

/* ---- Colors ---- */
:root{
/* ---- Blues: the spine of the brand ---- */
--blue-900:#0B3D68;
--blue-800:#135793;   /* pack body + legal copy, "INSTRUCCIONES DE USO" */
--blue-700:#1E6EAE;
--blue-600:#2E82C4;
--blue-500:#3E92D0;   /* primary brand blue — the "Nube" of the wordmark, swashes */
--blue-400:#6BB3E2;
--blue-300:#91D5F3;   /* light star blue */
--blue-200:#B3D9EC;   /* sky field — the pack's flood colour */
--blue-100:#D8EAF6;
--blue-050:#EFF7FC;

/* ---- Pinks: the "bébé" half ---- */
--pink-700:#E23F79;
--pink-600:#F1568F;
--pink-500:#FC6296;   /* primary pink — "Húmedas", hearts, stars */
--pink-400:#FD8FB8;
--pink-300:#FBB3CF;
--pink-200:#FBD3E2;
--pink-100:#FDECF3;

/* ---- Warm nursery accents (mascot + night sky) ---- */
--peach-500:#F4A97A;  /* bear outline */
--peach-300:#F9C9A6;  /* bear fur */
--peach-200:#FCE0C8;
--blush-400:#FF9E9E;  /* bear cheeks, soft glow */
--moon-400:#FFD98A;   /* crescent moon */
--moon-200:#FDF0CE;

/* ---- Botanical (aloe vera) ---- */
--green-600:#3F7F27;
--green-500:#5AA02F;
--green-200:#CDE6B8;

/* ---- Neutrals ---- */
--white:#FFFFFF;
--grey-050:#F7FBFD;
--grey-100:#EDF3F7;
--grey-200:#D7E6F0;
--grey-400:#8FA8BC;
--grey-600:#4A6478;
--grey-900:#1E2E3A;
--black:#101820;

/* ---- Semantic aliases ---- */
--brand-primary:var(--blue-500);
--brand-secondary:var(--pink-500);
--brand-deep:var(--blue-800);

--surface-page:var(--white);
--surface-sky:var(--blue-200);
--surface-sky-soft:var(--blue-050);
--surface-card:var(--white);
--surface-card-tint:var(--blue-050);
--surface-inverse:var(--blue-800);

--text-heading:var(--blue-800);
--text-body:var(--grey-600);
--text-body-on-sky:var(--blue-800);
--text-muted:var(--grey-400);
--text-accent:var(--pink-500);
--text-on-brand:var(--white);
--text-link:var(--blue-600);
--text-link-hover:var(--blue-800);

--border-soft:var(--blue-100);
--border-default:var(--blue-200);
--border-strong:var(--blue-400);
--divider-rule:var(--blue-200);

--action-primary-bg:var(--blue-500);
--action-primary-bg-hover:var(--blue-600);
--action-primary-bg-active:var(--blue-700);
--action-secondary-bg:var(--pink-500);
--action-secondary-bg-hover:var(--pink-600);
--action-secondary-bg-active:var(--pink-700);
--action-disabled-bg:var(--grey-200);
--action-disabled-text:var(--grey-400);

--focus-ring:var(--pink-500);

--status-success:var(--green-500);
--status-info:var(--blue-500);
--status-warning:var(--moon-400);
--status-danger:var(--pink-700);

/* ---- Print spot colours (from the supplied Pantone swatch sheet) ---- */
--pantone-653c:#2A5B8C;
--pantone-660c:#5C88C8;
--pantone-2707c:#C3D6EF;
}

/* ---- Typography ---- */
:root{
--font-display:"Baloo 2","Nunito",system-ui,sans-serif;
--font-heading:"Nunito",system-ui,sans-serif;
--font-body:"Source Sans 3","Nunito",system-ui,sans-serif;

--fs-display-xl:64px;
--fs-display-lg:48px;
--fs-display-md:36px;
--fs-h1:32px;
--fs-h2:26px;
--fs-h3:21px;
--fs-h4:18px;
--fs-body-lg:18px;
--fs-body:16px;
--fs-body-sm:14px;
--fs-caption:12px;
--fs-legal:10px;

--lh-tight:1.05;
--lh-heading:1.15;
--lh-snug:1.3;
--lh-body:1.5;
--lh-loose:1.65;

--fw-regular:400;
--fw-semibold:600;
--fw-bold:700;
--fw-extrabold:800;
--fw-black:900;

--ls-display:-0.01em;
--ls-heading:0;
--ls-caps:0.06em;   /* "84 PIEZAS", "INSTRUCCIONES DE USO" */
--ls-body:0;

/* semantic type roles */
--type-wordmark:var(--fw-extrabold) var(--fs-display-lg)/var(--lh-tight) var(--font-display);
--type-hero:var(--fw-extrabold) var(--fs-display-md)/var(--lh-heading) var(--font-heading);
--type-h1:var(--fw-extrabold) var(--fs-h1)/var(--lh-heading) var(--font-heading);
--type-h2:var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-heading);
--type-h3:var(--fw-bold) var(--fs-h3)/var(--lh-snug) var(--font-heading);
--type-eyebrow:var(--fw-bold) var(--fs-body-sm)/var(--lh-snug) var(--font-heading);
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
--type-body-sm:var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-body);
--type-legal:var(--fw-regular) var(--fs-legal)/var(--lh-snug) var(--font-body);
}

/* ---- Spacing ---- */
:root{
--space-0:0;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;

--gap-inline:var(--space-2);
--gap-stack:var(--space-4);
--gap-section:var(--space-12);
--pad-card:var(--space-6);
--pad-panel:var(--space-8);
--pad-control-x:var(--space-6);
--pad-control-y:var(--space-3);

--container-sm:640px;
--container-md:900px;
--container-lg:1160px;

--control-h-sm:36px;
--control-h-md:44px;
--control-h-lg:54px;
}

/* ---- Radius ---- */
:root{
/* Nothing in the brand is square-cornered. The packaging uses generous, near-pill
   rounding on panels and full pills on controls. */
--radius-xs:6px;
--radius-sm:10px;
--radius-md:16px;
--radius-lg:24px;   /* instruction panel on pack */
--radius-xl:32px;
--radius-pill:999px;
--radius-circle:50%;
}

/* ---- Elevation ---- */
:root{
/* Shadows are blue-tinted and diffuse — never neutral grey, never hard. */
--shadow-xs:0 1px 2px rgba(19,87,147,.08);
--shadow-sm:0 2px 8px rgba(19,87,147,.10);
--shadow-md:0 6px 18px rgba(19,87,147,.12);
--shadow-lg:0 14px 34px rgba(19,87,147,.14);
--shadow-pink:0 6px 18px rgba(252,98,150,.28);
--shadow-blue:0 6px 18px rgba(62,146,208,.30);
--shadow-inset-soft:inset 0 -2px 0 rgba(19,87,147,.06);

/* The pack's signature "sticker" treatment: white keyline + soft drop */
--sticker-outline:0 0 0 3px var(--white);
--sticker:0 0 0 3px var(--white),0 4px 10px rgba(19,87,147,.18);

/* Soft radial glow used behind the mascot and hero imagery */
--glow-blush:radial-gradient(circle,rgba(255,120,110,.30) 0%,rgba(255,255,255,0) 68%);
--glow-sky:radial-gradient(circle,rgba(145,213,243,.45) 0%,rgba(255,255,255,0) 70%);
}

/* ---- Motion ---- */
:root{
--ease-soft:cubic-bezier(.33,1,.68,1);
--ease-float:cubic-bezier(.45,0,.2,1);
--ease-bounce:cubic-bezier(.34,1.56,.64,1);
--dur-fast:120ms;
--dur-base:200ms;
--dur-slow:360ms;
--dur-drift:6000ms;
--transition-control:background-color var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft),transform var(--dur-fast) var(--ease-soft);
--lift-hover:translateY(-2px);
--press-scale:scale(.97);
}
@keyframes nb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes nb-twinkle{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}}