/* ==========================================================================
   tea+ · Design Tokens
   Fuente de verdad del sistema visual. Todo lo demás consume estas variables.
   Portable tal cual a Angular (importar en styles.scss global).
   ========================================================================== */

:root {
  /* --- Marca -------------------------------------------------------------
     #116611 es el verde exacto muestreado del letrero/logo original.
     La escala se construye alrededor de él para no desviarse de la tienda. */
  --brand-500: #116611;
  --brand-950: #041b04;
  --brand-900: #062906;
  --brand-800: #0a3a0a;
  --brand-700: #0d4e0d;
  --brand-600: #0f5a0f;
  --brand-400: #1d8a1d;
  --brand-300: #34b134;
  --brand-200: #6ad86a;
  --brand-100: #a8efa8;

  /* Acentos: lima (energía / “fresco”) y taro-morado (boba tea) */
  --lime-400: #b7f24a;
  --lime-300: #cbf87d;
  --taro-400: #a98cf0;
  --taro-300: #c4b0f7;
  --sugar-400: #d59a5a; /* brown sugar */

  /* Neutros cálidos, no grises puros: el verde pide crema */
  --cream-50: #fcfbf5;
  --cream-100: #f6f4ea;
  --cream-200: #ebe7d8;
  --ink-900: #0a140a;
  --ink-800: #12200f;
  --ink-700: #1d2f1a;

  /* --- Superficies semánticas (tema claro por defecto) ------------------- */
  --bg: var(--cream-50);
  --bg-alt: var(--cream-100);
  --bg-deep: var(--brand-950);
  --surface: #ffffff;
  --surface-2: var(--cream-100);
  /* 88% y no menos: el header pegado pasa por encima de secciones oscuras,
     y con menos opacidad el texto del menú pierde contraste. */
  --surface-glass: color-mix(in oklab, #ffffff 88%, transparent);
  --border: color-mix(in oklab, var(--ink-900) 12%, transparent);
  --border-strong: color-mix(in oklab, var(--ink-900) 22%, transparent);

  --text: var(--ink-900);
  --text-muted: color-mix(in oklab, var(--ink-900) 62%, transparent);
  --text-faint: color-mix(in oklab, var(--ink-900) 42%, transparent);
  --text-on-brand: #ffffff;

  --accent: var(--brand-500);
  --accent-contrast: #ffffff;
  --ring: color-mix(in oklab, var(--brand-400) 55%, transparent);

  /* --- Gradientes -------------------------------------------------------- */
  --grad-brand: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-500) 45%, var(--brand-300) 78%, var(--lime-400) 100%);
  --grad-brand-soft: linear-gradient(135deg, color-mix(in oklab, var(--brand-500) 12%, transparent), color-mix(in oklab, var(--lime-400) 18%, transparent));
  --grad-taro: linear-gradient(135deg, var(--brand-600), var(--taro-400));
  --grad-sugar: linear-gradient(135deg, var(--brand-700), var(--sugar-400));
  --grad-text: linear-gradient(100deg, var(--brand-300) 0%, var(--lime-400) 55%, var(--brand-200) 100%);
  --grad-sheen: linear-gradient(100deg, transparent 20%, color-mix(in oklab, #fff 45%, transparent) 50%, transparent 80%);

  /* --- Tipografía -------------------------------------------------------- */
  --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  /* Escala fluida (clamp) */
  --fs-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-sm: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --fs-base: clamp(0.98rem, 0.94rem + 0.2vw, 1.06rem);
  --fs-lg: clamp(1.1rem, 1.02rem + 0.4vw, 1.28rem);
  --fs-xl: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
  --fs-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-3xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --fs-4xl: clamp(2.6rem, 1.7rem + 4.2vw, 5.4rem);
  --fs-hero: clamp(2.9rem, 1.6rem + 6vw, 7rem);

  --lh-tight: 1.03;
  --lh-snug: 1.18;
  --lh-base: 1.65;
  --tracking-wide: 0.18em;

  /* --- Espaciado / layout ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --container: 1200px;
  --container-wide: 1440px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* --- Radios / sombras -------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-2xl: 44px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px color-mix(in oklab, var(--brand-950) 8%, transparent);
  --shadow-md: 0 8px 24px -8px color-mix(in oklab, var(--brand-950) 22%, transparent);
  --shadow-lg: 0 24px 60px -18px color-mix(in oklab, var(--brand-950) 32%, transparent);
  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--brand-400) 25%, transparent),
                 0 20px 70px -20px color-mix(in oklab, var(--brand-400) 55%, transparent);

  /* --- Movimiento -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
  --dur-slower: 1100ms;

  --z-bg: 0;
  --z-content: 10;
  --z-header: 100;
  --z-drawer: 200;
  --z-top: 300;
}

/* --- Tema oscuro: por preferencia del sistema o por toggle explícito ------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #050f05;
    --bg-alt: #081408;
    --bg-deep: #030b03;
    --surface: #0b1a0b;
    --surface-2: #0f230f;
    --surface-glass: color-mix(in oklab, #0b1a0b 88%, transparent);
    --border: color-mix(in oklab, var(--brand-200) 16%, transparent);
    --border-strong: color-mix(in oklab, var(--brand-200) 30%, transparent);
    --text: #eaf5e6;
    --text-muted: color-mix(in oklab, #eaf5e6 66%, transparent);
    --text-faint: color-mix(in oklab, #eaf5e6 42%, transparent);
    --accent: var(--brand-300);
    --accent-contrast: #04220a;
    --shadow-md: 0 8px 24px -8px #000;
    --shadow-lg: 0 28px 70px -20px #000;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050f05;
  --bg-alt: #081408;
  --bg-deep: #030b03;
  --surface: #0b1a0b;
  --surface-2: #0f230f;
  --surface-glass: color-mix(in oklab, #0b1a0b 88%, transparent);
  --border: color-mix(in oklab, var(--brand-200) 16%, transparent);
  --border-strong: color-mix(in oklab, var(--brand-200) 30%, transparent);
  --text: #eaf5e6;
  --text-muted: color-mix(in oklab, #eaf5e6 66%, transparent);
  --text-faint: color-mix(in oklab, #eaf5e6 42%, transparent);
  --accent: var(--brand-300);
  --accent-contrast: #04220a;
  --shadow-md: 0 8px 24px -8px #000;
  --shadow-lg: 0 28px 70px -20px #000;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* --- Contexto "sobre fondo oscuro" ---------------------------------------
   El hero y las secciones .section--deep son oscuras SIEMPRE, en los dos
   temas. El header, mientras no está pegado (.is-stuck), flota justo encima
   del hero. En esos tres casos los tokens semánticos tienen que ser los
   claros, o el texto queda oscuro sobre oscuro en el tema claro.
   Se resuelve en los tokens, no parcheando cada componente. */
.hero,
.section--deep,
.header:not(.is-stuck) {
  --surface: #0b1a0b;
  --surface-2: #0f230f;
  --surface-glass: color-mix(in oklab, #0b1a0b 70%, transparent);
  --border: color-mix(in oklab, var(--brand-200) 20%, transparent);
  --border-strong: color-mix(in oklab, var(--brand-200) 34%, transparent);

  --text: #eaf5e6;
  --text-muted: color-mix(in oklab, #eaf5e6 70%, transparent);
  --text-faint: color-mix(in oklab, #eaf5e6 48%, transparent);

  --accent: var(--brand-300);
  --accent-contrast: #04220a;
}