/**
 * SUNTERRA MedSpa — Brand Tokens v1.2.0
 * Single source of truth for design system implementation.
 * Generated: 2026-04-27
 *
 * Usage:
 *   <link rel="stylesheet" href="sunterra-tokens.css">
 *   .my-element { color: var(--brand-primary); }
 */

:root {
  /* ── PRIMARY — Terracota dominante ───────────────── */
  --brand-primary: #D97757;         /* Terracota cálido */
  --brand-primary-light: #E89A7E;   /* Hover, highlights */
  --brand-primary-dark: #B85C3D;    /* Pressed, profundidad */

  /* ── SECONDARY — Cafés (acentos sutiles) ────────── */
  --brand-secondary: #6B4423;       /* Café medio */
  --brand-secondary-light: #8B6244; /* Café medio claro */
  --brand-secondary-dark: #4A2E17;  /* Café profundo */

  /* ── NEUTROS ──────────────────────────────────── */
  --brand-neutral-darkest: #2A1E15;
  --brand-neutral-dark: #4A3828;
  --brand-neutral-mid: #8B6F55;
  --brand-neutral-light: #EDD9C4;
  --brand-neutral-lightest: #FAF5EC;

  /* ── BACKGROUNDS / TEXT ───────────────────────── */
  --brand-bg: #FAF5EC;              /* Background dominante (light mode) */
  --brand-bg-card: #FFFFFF;         /* Cards / surfaces */
  --brand-bg-warm: #EDD9C4;         /* Surfaces cálidas alternativas */
  --brand-text: #2A1E15;            /* Texto primario sobre crema */
  --brand-text-dim: #4A3828;        /* Texto secundario */
  --brand-text-muted: #6B4423CC;    /* Texto muted */

  /* ── SEMANTIC ─────────────────────────────────── */
  --brand-success: #6B7B5E;
  --brand-warning: #D9A557;
  --brand-error: #B8422A;
  --brand-info: #8B6F55;

  /* ── BORDERS / SHADOWS ────────────────────────── */
  --brand-border: rgba(217, 119, 87, 0.22);
  --brand-border-soft: rgba(107, 68, 35, 0.14);
  --brand-shadow-sm: 0 1px 3px rgba(74, 46, 23, 0.06), 0 4px 12px rgba(74, 46, 23, 0.04);
  --brand-shadow-md: 0 4px 14px rgba(74, 46, 23, 0.08), 0 8px 24px rgba(74, 46, 23, 0.06);

  /* ── TIPOGRAFÍA ────────────────────────────────── */
  --brand-font-display: 'Playfair Display', Georgia, serif;
  --brand-font-heading: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --brand-font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  --brand-font-accent: 'Montserrat', sans-serif;

  /* ── ESCALA TIPOGRÁFICA (modular 1.25) ────────── */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 48px;
  --text-4xl: 64px;
  --text-hero: 88px;

  /* ── ESPACIO (4px grid) ───────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── BORDER RADIUS ────────────────────────────── */
  --brand-radius-sm: 6px;
  --brand-radius-md: 12px;
  --brand-radius-lg: 20px;
  --brand-radius-pill: 999px;

  /* ── MOTION ───────────────────────────────────── */
  --brand-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --brand-duration-fast: 200ms;
  --brand-duration-mid: 400ms;
  --brand-duration-slow: 700ms;
}

/* Modo oscuro opcional (cuando se requiera surface dark) */
[data-theme="dark"] {
  --brand-bg: #2A1E15;
  --brand-bg-card: #4A3828;
  --brand-bg-warm: #4A2E17;
  --brand-text: #FAF5EC;
  --brand-text-dim: rgba(250, 245, 236, 0.72);
  --brand-text-muted: rgba(250, 245, 236, 0.48);
  --brand-border: rgba(217, 119, 87, 0.22);
  --brand-border-soft: rgba(255, 255, 255, 0.10);
}

/* Body defaults sugeridos */
body {
  background: var(--brand-bg);
  color: var(--brand-text);
  font-family: var(--brand-font-body);
  font-size: var(--text-base);
  line-height: 1.65;
}

/* Headings defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--brand-font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--brand-text);
}

/* Acento primario en em tags (HR Sunterra) */
em {
  color: var(--brand-primary);
  font-style: normal;
  font-weight: 600;
}