/*
  ODDEYE — Design Tokens
  Fuente: oddeye_brand.md (Branding 2026)
  Fondo Ancestral fijado a #0D0B09 (negro pizarra) con rampas derivadas para uso en UI.
  Un solo acento de interfaz (Púrpura fenicio) bloqueado en todo el sistema; las otras
  paletas (Mediterráneo, Solar) son paletas de marca para piezas de comunicación, no
  temas alternativos de esta interfaz.
*/

:root {
  /* ---------------------------------------------------------------- */
  /* PALETA ANCESTRAL — Odei · marca principal, fondos oscuros         */
  /* ---------------------------------------------------------------- */
  --ancestral-bg: #0D0B09;           /* Negro pizarra */
  --ancestral-bg-raised: #16120E;    /* derivado, superficies elevadas */
  --ancestral-bg-overlay: #1E1811;   /* derivado, paneles/tarjetas */
  --ancestral-border: #2A2119;       /* derivado, bordes sutiles */
  --ancestral-fg: #EFE6DF;           /* Blanco hueso */
  --ancestral-fg-muted: #B7A99B;     /* derivado, texto secundario */
  --ancestral-purple: #8751F4;       /* Púrpura fenicio */
  --ancestral-purple-text: #A47AFF;  /* derivado, uso en texto/iconos sobre fondo oscuro */
  --ancestral-gold: #C4A35A;         /* Oro ritual */
  --ancestral-cave: #3D2B1F;         /* Marrón cueva */

  /* ---------------------------------------------------------------- */
  /* PALETA MEDITERRÁNEO — Jota · comunicación con cliente             */
  /* ---------------------------------------------------------------- */
  --mediterraneo-bg: #1A1612;        /* Tierra oscura */
  --mediterraneo-fg: #E8DDD0;        /* Arena blanquecina */
  --mediterraneo-terracota: #C4956A; /* Terracota dorada */
  --mediterraneo-azul: #4A7C8E;      /* Azul fenicio */
  --mediterraneo-ocre: #8B7355;      /* Ocre antiguo */

  /* ---------------------------------------------------------------- */
  /* PALETA SOLAR — Xuri · redes sociales, piezas expresivas           */
  /* ---------------------------------------------------------------- */
  --solar-bg: #F5E6C8;               /* Marfil solar */
  --solar-terracota: #D4622A;        /* Terracota vivo */
  --solar-indigo: #1B4E6B;           /* Índigo marino */
  --solar-ambar: #F0C040;            /* Ámbar */

  /* ---------------------------------------------------------------- */
  /* TEMA DE INTERFAZ (bloqueado a Ancestral, acento único: púrpura)   */
  /* ---------------------------------------------------------------- */
  --color-bg: var(--ancestral-bg);
  --color-bg-raised: var(--ancestral-bg-raised);
  --color-bg-overlay: var(--ancestral-bg-overlay);
  --color-border: var(--ancestral-border);
  --color-fg: var(--ancestral-fg);
  --color-fg-muted: var(--ancestral-fg-muted);
  --color-accent: var(--ancestral-purple);
  --color-accent-text: var(--ancestral-purple-text);
  --color-accent-contrast: var(--ancestral-bg);
  --color-gold: var(--ancestral-gold);

  /* ---------------------------------------------------------------- */
  /* TIPOGRAFÍA                                                        */
  /* ---------------------------------------------------------------- */
  --font-display: 'Mon Cheri', 'Bodoni Moda', Georgia, serif;
  --font-accent: 'Bodoni Moda', Georgia, serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;

  --type-hero: clamp(3rem, 8vw, 7.5rem);
  --type-h1: clamp(2.25rem, 5vw, 4.5rem);
  --type-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --type-h3: clamp(1.25rem, 2vw, 1.75rem);
  --type-body-lg: 1.25rem;
  --type-body: 1rem;
  --type-small: 0.875rem;
  --type-micro: 0.75rem;

  /* ---------------------------------------------------------------- */
  /* ESPACIADO (escala 8pt, generosa — VISUAL_DENSITY: 3)              */
  /* ---------------------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;
  --space-9: 11rem;

  --container-max: 1360px;
  --container-pad: clamp(1.5rem, 5vw, 4rem);

  /* ---------------------------------------------------------------- */
  /* RADIOS Y BORDES (sistema: todo anguloso, un único acento de radio) */
  /* ---------------------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--color-border);

  /* ---------------------------------------------------------------- */
  /* MOVIMIENTO                                                        */
  /* ---------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;

  /* ---------------------------------------------------------------- */
  /* SOMBRA (tintada al fondo, nunca negro puro)                       */
  /* ---------------------------------------------------------------- */
  --shadow-card: 0 24px 60px -20px rgb(13 11 9 / 0.65);
}