/* Variables globales del tema (2026 Tropical‑Luxe) */
:root{
  /* Surfaces */
  --bg: #f6f3ee;               /* sand */
  --surface: rgba(255,255,255,.72);
  --surface-strong: rgba(255,255,255,.92);
  --ink: #0b1b1a;              /* deep tropical ink */
  --muted: rgba(11,27,26,.66);

  /* Accents */
  --teal: #0aa59b;
  --reef: #2ac2b5;
  --gold: #c9a227;             /* luxe gold */
  --shadow: 0 18px 60px rgba(11,27,26,.14);
  --shadow-soft: 0 10px 30px rgba(11,27,26,.10);

  /* Typography */
  --ui-title-font: 'Fraunces', ui-serif, 'Georgia', serif;
  --ui-body-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Layout */
  --max: 1200px;
  --gutter: clamp(18px, 3vw, 28px);
  --radius: 22px;
  --radius-sm: 16px;
  --border: 1px solid rgba(11,27,26,.10);
  --border-strong: 1px solid rgba(11,27,26,.14);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --speed: 220ms;

  /* Legacy aliases (keep old names working) */
  --color-primary: var(--ink);
  --color-secondary: rgba(11,27,26,.70);
  --color-accent: var(--teal);
  --color-background: var(--bg);
  --color-light-gray: rgba(11,27,26,.05);

  --font-title: var(--ui-title-font);
  --font-body: var(--ui-body-font);
  --font-size-base: 16px;
  --line-height-base: 1.7;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;

  --transition: all var(--speed) var(--ease);
}

/* Dark mode (respects OS) */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #070b0c;
    --surface: rgba(18,22,24,.62);
    --surface-strong: rgba(18,22,24,.84);
    --ink: rgba(245,246,246,.92);
    --muted: rgba(245,246,246,.66);
    --border: 1px solid rgba(245,246,246,.12);
    --border-strong: 1px solid rgba(245,246,246,.16);
    --shadow: 0 18px 60px rgba(0,0,0,.38);
    --shadow-soft: 0 10px 30px rgba(0,0,0,.28);
  }
}