/* Tema Claro - Appunty */
@import 'theme-config.css';

:root {
    /* Colores Principales / Acento */
    --primary: #1E6FDB;
    /* Azul de marca Appunty */
    --primary-hover: #1659B3;
    /* Hover acorde al azul */
    --primary-dark: var(--primary-hover);
    --primary-light: rgba(30, 111, 219, 0.1);
    --primary-fade: color-mix(in srgb, var(--primary) 8%, transparent);
    --secondary: #5C9CE6;
    /* Azul claro complementario */
    --chart-primary: #1E6FDB;
    /* Alinear gráficos con la marca */

    --text-main: var(--text-primary);
    --text-light: var(--text-secondary);
    --bg-page: var(--background-main);
    --bg-card: var(--background-card);
    --divider: var(--border-color);
    --transition: var(--transition-normal);

    /* Fondos - Planes Premium Style */
    --background-chrome: #FFFFFF;
    /* Barra lateral/superior puras */
    --background-main: #F5F5F7;
    /* Off-white con más contraste */
    --background-card: #FFFFFF;
    --background-element: #E8E8ED;
    /* Elementos interactivos con más contraste */

    /* Colores de Texto - High Contrast Minimal */
    --text-primary: #1D1D1F;
    /* Casi negro, elegante */
    --text-secondary: #6E6E73;
    /* Gris neutro */

    /* Sombras - Ultra Soft Diffused */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.09);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-soft: var(--shadow-card);
    --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.10);

    /* Estados de Elementos */
    --element-hover: #F5F5F7;
    --element-active: #E8E8ED;
    --element-disabled: #D1D5DB;

    /* Bordes */
    --border-color: #D1D1D6;
    /* Más visible */
    --border-focus: #1E6FDB;

    /* Inputs y Formularios */
    --input-background: #FFFFFF;
    --input-border: #D1D1D6;
    --input-text: #1D1D1F;
    --input-placeholder: #86868B;

    /* Botones */
    --button-primary: #1D1D1F;
    /* Botones principales NEGROS (estilo planes) */
    --button-primary-hover: #000000;
    --button-secondary: #E5E5EA;
    --button-secondary-hover: #D1D1D6;

    /* Notificaciones y Estados */
    --notification-info-bg: color-mix(in srgb, var(--info) 12%, transparent);
    --notification-success-bg: color-mix(in srgb, var(--success) 12%, transparent);
    --notification-warning-bg: color-mix(in srgb, var(--warning) 12%, transparent);
    --notification-error-bg: color-mix(in srgb, var(--error) 12%, transparent);

    /* Tipografía */
    --font-h1: 2.5em;
    --font-h2: 2em;
    --font-h3: 1.5em;
    --font-h4: 1.3em;
    --font-normal: 1em;
    --font-small: 0.9em;
    --font-xs: 0.8em;

    /* Pesos de Fuente */
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 600;
    /* Inter standard bold */

    /* Espaciado */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius - More rounded */
    --radius-sm: 8px;
    --radius-md: 16px;
    /* Coincide con planes */
    --radius-lg: 24px;
    --radius-m: var(--radius-md);
    --radius-l: var(--radius-lg);
    --radius-full: 50%;

    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    /* Apple-like smooth */
}