/* ==============================================
   INIT.CSS - Sistema de Diseno del Proyecto
   ==============================================
   Este archivo define todas las CSS Variables (tokens)
   del proyecto. Cualquier cambio aqui afecta globalmente.
   
   Uso: Los colores se pueden usar de dos formas:
   1. Como variables CSS: var(--color-text-primary)
   2. Como clases Tailwind: text-primary, bg-surface
      (requiere configuracion en index.css con @theme)
   ============================================== */

/* --- FALLBACK FONTS PARA REDUCIR CLS --- */
/* Metricas ajustadas para coincidir con Manrope/Inter y evitar layout shifts */
@font-face {
    font-family: 'Manrope Fallback';
    src: local('Arial');
    size-adjust: 102%;
    ascent-override: 92%;
    descent-override: 25%;
    line-gap-override: normal;
}

@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 23%;
    line-gap-override: normal;
}

/* --- PALETA DE COLORES --- */
/* NOTA: Los estilos de "project" (azul) son los DEFAULT del sitio */
/* Para usar el tema "stone", aplicar data-theme="default" al html */

:root {
    /* ==============================================
       TEMA "PROJECT" (AZUL) - DEFAULT DEL SITIO
       ==============================================
       Colores corporativos: Azul primario + Verde acento
       Tipografia: Manrope (titulos) + Inter (cuerpo)
       ============================================== */

    /* Colores de Texto */
    --color-text-primary: #111827; /* Carbon oscuro */
    --color-text-secondary: #374151; /* Gris oscuro */
    --color-text-muted: #6b7280; /* Gris medio */
    --color-text-subtle: #9ca3af; /* Gris claro */

    /* Colores de Fondo */
    --color-bg-primary: #f5f5f4; /* Gris calido */
    --color-bg-secondary: #e5e7eb; /* Gris mas oscuro */
    --color-bg-tertiary: #f3f4f6; /* Gris neutro */
    --color-bg-surface: #ffffff; /* Blanco para cards */
    --color-bg-elevated: #ffffff; /* Blanco elevado */

    /* Colores de Borde */
    --color-border-primary: #e6e6e6; /* Borde cards */
    --color-border-secondary: #d1d5db; /* Borde secundario */
    --color-border-subtle: #e5e7eb; /* Borde sutil */

    /* Colores de Acento/Accion - AZUL BRAND */
    --color-accent-primary: #2563eb; /* Azul primario */
    --color-accent-hover: #1d4ed8; /* Azul hover */
    --color-accent-active: #1e40af; /* Azul activo */

    /* Color Acento Verde (para badges, iconos) */
    --color-accent-green: #25d366; /* Verde WhatsApp */
    --color-success: #1a7f4b; /* Verde oscuro para texto */
    --color-warning: #f59e0b;
    --color-error: #e11d48;
    --color-info: #2563eb;

    /* Superficie Oscura (para secciones especiales) */
    --color-surface-inverse: #0b1220;
    --color-text-inverse: #f8fafc;
    --color-link-inverse: #93c5fd;

    /* Focus accesible */
    --color-focus-ring: rgba(37, 99, 235, 0.45);

    /* Colores de Seleccion */
    --color-selection-bg: #dbeafe; /* Azul muy claro */

    /* --- TIPOGRAFIA PROJECT --- */
    /* Incluye fallback con metricas ajustadas para reducir CLS */
    --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
    --font-heading: 'Manrope', 'Manrope Fallback', 'Inter', system-ui, sans-serif;
    --font-mono: ui-monospace, monospace;

    /* Tamanos de Fuente (escala project.md) */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1.0625rem; /* 17px */
    --text-lg: 1.25rem; /* 20px - H3 */
    --text-xl: 1.5rem;
    --text-2xl: clamp(1.75rem, 2.6vw, 2rem); /* H2: 28-32px */
    --text-3xl: clamp(2.25rem, 3.5vw, 2.75rem); /* H1: 36-44px */
    --text-4xl: 2.5rem;
    --text-5xl: 3rem;

    /* Line heights */
    --lh-tight: 1.15;
    --lh-body: 1.6;
    --ls-tight: -0.01em;

    /* --- ESPACIADO --- */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem; /* 8px */
    --spacing-md: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-xl: 2rem; /* 32px */
    --spacing-2xl: 3rem; /* 48px */
    --spacing-3xl: 4rem; /* 64px */

    /* --- BORDES --- */
    --radius-sm: 0.25rem; /* 4px */
    --radius-md: 0.375rem; /* 6px */
    --radius-lg: 0.5rem; /* 8px */
    --radius-xl: 0.75rem; /* 12px */
    --radius-full: 9999px;

    /* --- SOMBRAS --- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* --- TRANSICIONES --- */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;

    /* --- Z-INDEX --- */
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-modal: 200;
    --z-tooltip: 300;
}

/* ==============================================
   TEMA "DEFAULT" (STONE) - Alternativo
   ==============================================
   Tonos stone/neutral (tema original)
   Activa con: data-theme="default" en <html>
   ============================================== */

[data-theme='default'] {
    /* Colores de Texto */
    --color-text-primary: #292524; /* Texto principal, titulos */
    --color-text-secondary: #57534e; /* Texto secundario */
    --color-text-muted: #79716b; /* Texto discreto, labels */
    --color-text-subtle: #a8a29e; /* Texto muy suave, placeholders */

    /* Colores de Fondo */
    --color-bg-primary: #f8f8f6; /* Fondo principal de la pagina */
    --color-bg-secondary: #f0efeb; /* Fondo de secciones alternas */
    --color-bg-tertiary: #f5f5f4; /* Fondo de elementos UI */
    --color-bg-surface: #ffffff; /* Fondo de cards y contenedores */
    --color-bg-elevated: #fcfcfc; /* Fondo ligeramente elevado */

    /* Colores de Borde */
    --color-border-primary: #e5e5e0; /* Bordes principales */
    --color-border-secondary: #e7e5e4; /* Bordes secundarios */
    --color-border-subtle: #f5f5f4; /* Bordes muy sutiles */

    /* Colores de Acento/Accion */
    --color-accent-primary: #292524; /* Botones primarios */
    --color-accent-hover: #1c1917; /* Hover de botones primarios */
    --color-accent-active: #0c0a09; /* Estado activo */

    /* Colores de Estado */
    --color-success: #22c55e;
    --color-warning: #f97316;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* Colores de Seleccion */
    --color-selection-bg: #e7e5e4;

    /* --- TIPOGRAFIA --- */
    --font-heading: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, sans-serif;
    --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, monospace;

    /* Tamanos de Fuente */
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.8125rem; /* 13px */
    --text-base: 0.9375rem; /* 15px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    --text-2xl: 1.5rem; /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem; /* 36px */
    --text-5xl: 3rem; /* 48px */
}

/* --- CLASES UTILITARIAS BASE --- */
/* Estas clases usan las variables para estilos comunes */

.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-subtle {
    color: var(--color-text-subtle);
}

.bg-primary {
    background-color: var(--color-bg-primary);
}

.bg-secondary {
    background-color: var(--color-bg-secondary);
}

.bg-surface {
    background-color: var(--color-bg-surface);
}

.border-primary {
    border-color: var(--color-border-primary);
}

.border-secondary {
    border-color: var(--color-border-secondary);
}

/* RESET GLOBAL DE FUENTES */
body {
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
}

h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 400;
}

/* Clase utilidad para headers light/medium si hace falta override */
.font-heading-medium {
    font-weight: 500;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-wrap: pretty;
}

/* ==============================================
   SINGLE POST STYLES
   ============================================== */

/* Contenedor del single post - ancho maximo 800px */
.single-post-container {
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Imagen destacada con aspect ratio 4:6 (portrait) */
.single-post-featured-image {
    aspect-ratio: 6 / 4;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-xl);
}

/* ==============================================
   FASE 1: COMPONENTES BASE
   ==============================================
   Estilos para botones, cards, alertas y utilidades
   segun project-extends.md
   ============================================== */

/* --- BOTONES --- */
/* Altura minima tactil de 44px segun accesibilidad */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.625rem 1.25rem;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.btn:focus-visible {
    outline: 2px solid var(--color-focus-ring, var(--color-accent-primary));
    outline-offset: 2px;
}

/* Boton Primario - Fondo brand */
.btn--primary {
    background-color: var(--color-accent-primary);
    color: white;
    border-color: var(--color-accent-primary);
}

.btn--primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.btn--primary:active {
    background-color: var(--color-accent-active);
    border-color: var(--color-accent-active);
}

/* Boton Secundario - Outline */
.btn--secondary {
    background-color: transparent;
    color: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
}

.btn--secondary:hover {
    background-color: var(--color-accent-primary);
    color: white;
}

/* Boton Ghost - Sin borde */
.btn--ghost {
    background-color: transparent;
    color: var(--color-text-primary);
    border-color: transparent;
}

.btn--ghost:hover {
    background-color: var(--color-bg-secondary);
}

/* Boton Blanco (para fondos oscuros) */
.btn--white {
    background-color: white;
    color: var(--color-accent-primary);
    border-color: white;
}

.btn--white:hover {
    background-color: var(--color-bg-secondary);
}

/* --- CARDS --- */

.card {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-secondary);
}

.card--elevated {
    box-shadow: var(--shadow-sm);
}

.card--interactive {
    cursor: pointer;
}

.card--interactive:hover {
    box-shadow: var(--shadow-lg);
}

/* --- ALERTAS --- */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.alert--ok,
.alert--success {
    background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
}

.alert--error {
    background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
    color: var(--color-error);
    border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
}

.alert--warning {
    background-color: color-mix(in srgb, var(--color-warning) 10%, transparent);
    color: var(--color-warning);
    border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
}

.alert--info {
    background-color: color-mix(in srgb, var(--color-info) 10%, transparent);
    color: var(--color-info);
    border: 1px solid color-mix(in srgb, var(--color-info) 30%, transparent);
}

/* --- UTILIDADES DE COLOR (TEMA PROJECT) --- */

.text-brand {
    color: var(--color-accent-primary);
}

.text-accent-green {
    color: var(--color-accent-green);
}

.text-info {
    color: var(--color-info);
}

.text-success {
    color: var(--color-success);
}

.text-error {
    color: var(--color-error);
}

.text-warning {
    color: var(--color-warning);
}

.text-inverse {
    color: var(--color-text-inverse);
}

.bg-brand {
    background-color: var(--color-accent-primary);
}

.bg-accent-green {
    background-color: var(--color-accent-green);
}

.surface-inverse {
    background-color: var(--color-surface-inverse);
    color: var(--color-text-inverse);
}

.surface-alt {
    background-color: var(--color-bg-secondary);
}

/* --- FOCUS VISIBLE (ACCESIBILIDAD) --- */
/* Focus solo visible con teclado, no con mouse */

*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--color-focus-ring, var(--color-accent-primary));
    outline-offset: 2px;
}

/* Links con focus visible */
a:focus-visible {
    outline: 2px solid var(--color-focus-ring, var(--color-accent-primary));
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Inputs y formularios */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-focus-ring, var(--color-accent-primary));
    outline-offset: 1px;
}

/* Checkboxes y radios */
input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
    outline: 2px solid var(--color-focus-ring, var(--color-accent-primary));
    outline-offset: 2px;
}

/* --- UTILIDADES ADICIONALES --- */

/* Skip link para accesibilidad */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface-inverse);
    color: var(--color-text-inverse);
    z-index: var(--z-modal);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
}

/* Clase para ocultar visualmente pero mantener accesible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}