/**
 * variables.css — Design tokens (Vantive theme): colors, typography, spacing, layout.
 * Depends on: fonts.css (family names referenced).
 * Font/color tokens aligned with Vantive design system.
 * DaisyUI theme "vantive" (src/tailwind-input.css) mirrors this palette for components.
 */

:root {
  /* Brand (from Vantive theme; same as DaisyUI --color-primary when data-theme="vantive") */
  --color-brand: #72256b;
  --color-plum: #72256b;
  --color-plum-light: #8d3a71;
  --color-plum-dark: #490a4d;
  --color-plum-lightest: #ecb6bc;
  --color-text: #105742;
  --color-pine: #105742;
  --color-pine-light: #356962;
  --color-pine-dark: #142128;
  --color-sage: #cddfd7;
  --color-sage-light: #f0f7f3;
  --color-sage-dark: #a6bdb0;
  --color-cream: #fffaeb;
  --color-white: #ffffff;
  --color-grey: #49454f;
  /* Contraste: texto sobre fondo primary (morado) — WCAG AA */
  --color-primary-content: #fffaeb;
  /* Typography — Vantive: Acumin Pro desde assets/fonts/acumin-pro (estático, sin variable) */
  --font-system-stack: system-ui, -apple-system, blinkmacsystemfont, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
  --font-acumin: "Acumin Pro", "Roboto", var(--font-system-stack);
  --font-acumin-wide: "Acumin Pro Wide", "Acumin Pro", var(--font-system-stack);
  --font-acumin-variable: var(--font-acumin);
  --font-button: "Inter", var(--font-system-stack);
  --font-stack: var(--font-acumin);
  /* Font weights (numeric) — Vantive */
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-book: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;
  /* Motion & shape */
  --trns: 0.35s ease-out;
  --trns-duration: 0.2s;
  --trns-type: ease-in-out;
  --border-radius: 0.75rem;
  --border-radius-full: 624.375rem;
  --content-max-width: 52rem;
  /* Button tokens */
  --button-border-radius: var(--border-radius-full);
  --button-box-shadow: rgba(48, 10, 45, 0.33);
  --button-padding-block: 0.75rem;
  --button-padding-inline: 1.5rem;
  --button-primary-bg: var(--color-brand);
  --button-primary-bg-hover: var(--color-plum-dark);
  --button-primary-border: var(--color-brand);
  --button-primary-fg: var(--color-cream);
  --button-transition-duration: 0.2s;
  --button-transition-type: ease-in-out;
  /* Spacing (Vantive scale: 01=0.0625rem … 15=7.5rem) — for components & daisyui-theme */
  --spacing-0: 0;
  --spacing-01: 0.0625rem;
  --spacing-02: 0.125rem;
  --spacing-04: 0.25rem;
  --spacing-1: 0.5rem;
  --spacing-102: 0.75rem;
  --spacing-106: 1rem;
  --spacing-2: 1.5rem;
  --spacing-4: 2rem;
  --spacing-5: 2.5rem;
  --spacing-6: 3rem;
  --spacing-7: 3.5rem;
  --spacing-8: 4rem;
  --spacing-9: 4.5rem;
  --spacing-10: 5rem;
  --spacing-12: 6rem;
  /* Font variation settings (Acumin variable) — optional for type hierarchy */
  --fs-regular: "slnt" 0, "wdth" 100, "wght" 400;
  --fs-bold: "slnt" 0, "wdth" 100, "wght" 700;
  --fs-wide-medium: "slnt" 0, "wdth" 115, "wght" 500;
  --fs-wide-bold: "slnt" 0, "wdth" 115, "wght" 700;
  /* Layout */
  --slide-height: 100vh;
  --slide-max-width: 100vw;
  --nav-bar-h: 56px;
  --swiper-navigation-size: 48px;
  --swiper-scrollbar-bg-color: var(--color-sage);
  --swiper-scrollbar-drag-bg-color: var(--color-plum);

  /* Layout: cada slide ocupa 100vw × 100vh; márgenes mínimos para aprovechar todo el espacio */
  --grid-margin: 0.5rem;
  --grid-gutter: 0.75rem;
  --grid-cols: 4;
  --slide-content-max: 84rem;
  --body-max: 100%;
}

@supports (height: 100dvh) {
  :root { --slide-height: 100dvh; }
}

/* Extra-small (phone) 0–599px */
@media (min-width: 600px) {
  :root {
    --grid-margin: 0.75rem;
    --grid-gutter: 1rem;
    --grid-cols: 8;
  }
}

/* Small (tablet) 600–903px */
@media (min-width: 904px) {
  :root {
    --grid-margin: 0.75rem;
    --grid-gutter: 1rem;
    --grid-cols: 12;
    --body-max: min(100%, var(--slide-content-max));
  }
}

/* Medium (laptop) 1240+ */
@media (min-width: 1240px) {
  :root {
    --grid-margin: 0.75rem;
    --body-max: min(100%, var(--slide-content-max));
  }
}

/* Large (desktop) 1440+ */
@media (min-width: 1440px) {
  :root {
    --body-max: var(--slide-content-max);
  }
}