/*
  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 */

  /* ---------------------------------------------------------------- */
  /* PALETA UNIFICADA — ODDEYE · síntesis de los tres fundadores       */
  /* Oro (Ancestral) + Azul (Mediterráneo) + Terracota (Solar), sobre   */
  /* una piedra oscura propia. Para piezas donde la marca habla con    */
  /* una sola voz: about, pitch deck, merch.                           */
  /* ---------------------------------------------------------------- */
  --unificada-bg: #17140F;           /* Piedra unificada */
  --unificada-bg-raised: #201B14;    /* derivado, superficies elevadas */
  --unificada-bg-overlay: #282117;   /* derivado, paneles/tarjetas */
  --unificada-border: #342A1F;       /* derivado, bordes sutiles */
  --unificada-fg: var(--ancestral-fg);         /* Blanco hueso, compartido por las tres paletas */
  --unificada-fg-muted: var(--ancestral-fg-muted);
  --unificada-gold: var(--ancestral-gold);     /* Oro ritual, de Odei */
  --unificada-azul: var(--mediterraneo-azul);  /* Azul fenicio, de Jota */
  --unificada-terracota: var(--solar-terracota); /* Terracota vivo, de Xuri */

  /* ---------------------------------------------------------------- */
  /* 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);
  --color-gold-text: var(--ancestral-gold);
  --color-gold-rgb: 196 163 90;
  --color-accent-rgb: 135 81 244;
  --color-nav-bg: rgb(13 11 9 / 0.82);
  --logo-filter: invert(94%);
  --hero-glow: radial-gradient(circle, #3D2B1F 0%, rgb(61 43 31 / 0.5) 45%, transparent 75%);

  /* ---------------------------------------------------------------- */
  /* TIPOGRAFÍA                                                        */
  /* ---------------------------------------------------------------- */
  --font-display: 'Mon Cheri', 'Bodoni Moda', Georgia, serif;
  --font-accent: 'Public Sans', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Public Sans', -apple-system, 'Helvetica Neue', Helvetica, Arial, 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);
}

/* -------------------------------------------------------------------- */
/* TEMAS DE INTERFAZ ALTERNATIVOS — toggle de paleta                     */
/* Ancestral es el tema por defecto (:root, arriba). Estos overrides      */
/* reasignan los tokens --color-* cuando <html data-theme="..."> cambia.  */
/* -------------------------------------------------------------------- */
[data-theme="mediterraneo"] {
  /* Fondo claro (arena) a petición del usuario: se invierten los roles bg/fg
     de la paleta Mediterráneo respecto a como se listan en tokens.json,
     usando solo colores ya aprobados de esa paleta. */
  --color-bg: var(--mediterraneo-fg);          /* Arena blanquecina #E8DDD0 */
  --color-bg-raised: #DED0BC;
  --color-bg-overlay: #D4C3AA;
  --color-border: #C2AF93;
  --color-fg: var(--mediterraneo-bg);          /* Tierra oscura #1A1612 */
  --color-fg-muted: #5A4736;                   /* ocre oscurecido, AA sobre arena y overlay */
  --color-accent: var(--mediterraneo-azul);
  --color-accent-text: #2F5A6C;                /* azul oscurecido para texto, ~5.6:1 sobre arena */
  --color-accent-contrast: var(--mediterraneo-fg);
  --color-gold: var(--mediterraneo-terracota); /* uso decorativo (glow, isotipo) */
  --color-gold-text: #5C3C1F;                  /* terracota oscurecida para texto, AA sobre arena y overlay */
  --color-gold-rgb: 196 149 106;
  --color-accent-rgb: 74 124 142;
  --color-nav-bg: rgb(232 221 208 / 0.82);
  --logo-filter: none;
  --hero-glow: radial-gradient(circle, rgb(196 149 106 / 0.4) 0%, rgb(196 149 106 / 0.16) 45%, transparent 75%);
}

[data-theme="solar"] {
  --color-bg: var(--solar-bg);
  --color-bg-raised: #EFDBB2;
  --color-bg-overlay: #E9D2A0;
  --color-border: rgb(27 78 107 / 0.18);
  --color-fg: var(--solar-indigo);
  --color-fg-muted: #2F5E75;                   /* índigo sólido, no alpha: AA sobre marfil y overlay */
  --color-accent: var(--solar-terracota);
  --color-accent-text: #A84A1E;                /* terracota oscurecida para texto, ~4.65:1 sobre marfil */
  --color-accent-contrast: var(--solar-bg);
  --color-gold: var(--solar-ambar);            /* uso decorativo (glow, isotipo) */
  --color-gold-text: #6B4409;                  /* ámbar oscurecido para texto, AA sobre marfil y overlay */
  --color-gold-rgb: 240 192 64;
  --color-accent-rgb: 212 98 42;
  --color-nav-bg: rgb(245 230 200 / 0.82);
  --logo-filter: none;
  --hero-glow: radial-gradient(circle, #F0C040 0%, rgb(240 192 64 / 0.35) 45%, transparent 75%);
}

[data-theme="unificada"] {
  --color-bg: var(--unificada-bg);
  --color-bg-raised: var(--unificada-bg-raised);
  --color-bg-overlay: var(--unificada-bg-overlay);
  --color-border: var(--unificada-border);
  --color-fg: var(--unificada-fg);
  --color-fg-muted: var(--unificada-fg-muted);
  --color-accent: var(--unificada-terracota);
  --color-accent-text: #E38A5C;                /* terracota aclarada para texto, AA sobre piedra oscura */
  --color-accent-contrast: var(--unificada-fg);
  --color-gold: var(--unificada-gold);
  --color-gold-text: var(--unificada-gold);
  --color-gold-rgb: 196 163 90;
  --color-accent-rgb: 212 98 42;
  --color-nav-bg: rgb(23 20 15 / 0.82);
  --logo-filter: invert(94%);
  --hero-glow: radial-gradient(circle, var(--unificada-azul) 0%, rgb(74 124 142 / 0.3) 45%, transparent 75%);
}