/* iLandly design tokens v1.0 — generado desde docs/brand-guidelines.md */
:root {
  /* Marca */
  --ilandly-orange: #E2871A;        /* CTA, acentos. NO para texto sobre blanco */
  --ilandly-orange-dark: #B2620B;   /* hover / pressed */
  --ilandly-orange-text: #8A4A06;   /* texto naranja sobre claro (6.9:1) */
  --ilandly-orange-soft: #FDF1E2;   /* fondos de realce */
  --ilandly-blue: #4C9AD6;
  --ilandly-blue-dark: #2E6FA8;     /* enlaces (5.3:1) */
  --ilandly-blue-soft: #A2C7EA;
  --ilandly-green: #1FA97A;
  --ilandly-green-dark: #15875F;
  --ilandly-logo-gray: #5B5959;     /* solo logotipo */

  /* Neutros */
  --ilandly-night: #0F1B2A;
  --ilandly-ink: #1B2A3D;
  --ilandly-steel: #5A6470;
  --ilandly-hull: #AEB6BB;
  --ilandly-mist: #E7EBEF;
  --ilandly-cloud: #F5F7F9;
  --ilandly-white: #FFFFFF;

  /* Semánticos */
  --ilandly-success: #1FA97A;
  --ilandly-warning: #F6DB5E;
  --ilandly-error: #DB5A52;
  --ilandly-error-text: #B93A32;
  --ilandly-info: #4C9AD6;
  --ilandly-whatsapp: #25D366;

  /* Roles */
  --bg: var(--ilandly-white);
  --surface: var(--ilandly-cloud);
  --highlight: var(--ilandly-orange-soft);   /* fondo de realce; cambia con el tema */
  --highlight-ink: var(--ilandly-orange-text);
  --border: var(--ilandly-mist);
  --text: var(--ilandly-ink);
  --text-muted: var(--ilandly-steel);
  --cta-bg: var(--ilandly-orange);
  --cta-text: var(--ilandly-ink);

  /* Tipografía */
  --font-heading: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Forma y espacio */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px;
  --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;
  --shadow-card: 0 1px 2px rgba(15,27,42,.06), 0 8px 24px rgba(15,27,42,.06);
  --shadow-lift: 0 12px 32px rgba(226,135,26,.22);
}

/* Modo oscuro: el naranja sí funciona como texto sobre Noche (6.4:1) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ilandly-night);
    --surface: #162435;
    --highlight: #2A2013;
    --highlight-ink: #F0A33F;
    --border: #233347;
    --text: #E7EBEF;
    --text-muted: #9AA7B4;
  }
}
:root[data-theme="dark"] {
  --bg: var(--ilandly-night);
  --surface: #162435;
  --highlight: #2A2013;
  --highlight-ink: #F0A33F;
  --border: #233347;
  --text: #E7EBEF;
  --text-muted: #9AA7B4;
}