/* ==========================================================================
   Tapetes Capri — Design tokens (primitive → semantic → component)
   Fuente de verdad visual: logo (verde bosque + verde pasto) + temporada de diciembre
   ========================================================================== */
:root {
  /* ---------- Primitive ---------- */
  --green-950: #05231a;
  --green-900: #0a2c1b;
  --green-800: #0f3d26;
  --green-700: #1c6b2a;
  --green-600: #2f8a1f;
  --green-500: #3f9a24;
  --green-400: #6cbd35;
  --lime-300: #a6e05a;
  --lime-200: #d3f29a;
  --cream-50: #fffdf8;
  --cream-100: #fbf8f0;
  --cream-200: #f3ecdb;
  --cream-300: #e8dec6;
  --ink-900: #10201a;
  --ink-700: #2f4238;
  --ink-500: #5a6d62;
  --white: #ffffff;
  /* festivos y colores de juego (de las fotos de proyectos) */
  --red-600: #d2232f;
  --red-700: #a8151f;
  --gold-400: #ffc928;
  --gold-500: #f0a800;
  --sky-500: #2a8cff;
  --violet-500: #7a4dff;
  --coral-500: #ff5a3c;

  /* ---------- Semantic ---------- */
  --color-bg: var(--cream-100);
  --color-bg-alt: var(--cream-200);
  --color-surface: var(--white);
  --color-text: var(--ink-900);
  --color-text-soft: var(--ink-700);
  --color-text-mute: var(--ink-500);
  --color-brand: var(--green-900);
  --color-brand-strong: var(--green-950);
  --color-accent: var(--green-500);
  --color-accent-bright: var(--lime-300);
  --color-promo: var(--red-600);
  --color-promo-ink: var(--gold-400);
  --color-border: rgba(10, 44, 27, 0.14);
  --color-on-dark: var(--cream-50);
  --color-on-dark-soft: rgba(255, 253, 248, 0.78);
  --color-focus: var(--gold-500);

  /* ---------- Typography ---------- */
  --font-display: "Poppins", "Montserrat", system-ui, sans-serif; /* ≈ "Tapetes" del logo */
  --font-script: "Kaushan Script", "Yellowtail", cursive; /* ≈ "Capri" del logo */
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* ≈ tagline del logo */

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --fs-lg: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  --fs-xl: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  --fs-2xl: clamp(2.6rem, 1.4rem + 5.2vw, 5.6rem);
  --fs-3xl: clamp(3.2rem, 1.2rem + 9vw, 8.6rem);

  /* ---------- Spacing (4/8 rhythm) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --container: 1240px;

  /* ---------- Shape / elevation ---------- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(10, 44, 27, 0.08);
  --shadow-md: 0 14px 34px -12px rgba(10, 44, 27, 0.28);
  --shadow-lg: 0 34px 70px -24px rgba(5, 35, 26, 0.5);
  --shadow-glow: 0 0 0 6px rgba(108, 189, 53, 0.25);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;

  /* ---------- z-index scale ---------- */
  --z-base: 1;
  --z-nav: 100;
  --z-float: 200;
  --z-modal: 500;
  --z-transition: 900;
  --z-preloader: 1000;

  /* ---------- Component tokens ---------- */
  --btn-bg: var(--green-500);
  --btn-bg-hover: var(--green-600);
  --btn-fg: var(--white);
  --btn-dark-bg: var(--green-900);
  --nav-h: 76px;
  --promo-h: 40px;
}