/* * tokens.css — Sistema de diseño: variables CSS globales. * Todos los colores, tipografía, espaciados y sombras se definen aquí. * Los componentes en base.css solo usan var(--...), nunca valores en bruto. * * El atributo [data-theme="dark"] en activa la paleta oscura * sobreescribiendo las mismas variables. */ /* ─── Fuentes ──────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* ─── Modo claro (por defecto) ─────────────────────────────────────────────── */ :root { /* Paleta principal */ --color-bg: #f5f3f0; --color-surface: #ffffff; --color-surface-elevated: #edeae5; --color-border: #ddd9d3; --color-border-subtle: #eae7e2; /* Texto */ --color-text-primary: #1c1917; --color-text-secondary: #78716c; --color-text-muted: #a8a29e; /* Acento: rojo Mordor */ --color-accent: #c0392b; --color-accent-hover: #a93226; --color-accent-fg: #ffffff; /* Header — siempre oscuro para contraste, independiente del tema */ --color-header-bg: #1c1917; --color-header-text: #f5f3f0; --color-header-border: #2d2a27; /* Estados */ --color-success: #16a34a; --color-warning: #ca8a04; --color-error: #dc2626; --color-pending: #78716c; /* Sombras */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* Tema "liquid glass" — superficies translúcidas que se aplican encima del fondo de la app. Mantenemos la paleta Mordor; lo que cambia es la opacidad y el blur de fondo. Las variables se usan en .app-card, .admin-card, .header-user, .theme-selector, etc. */ --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-elevated: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.55); --glass-highlight: rgba(255, 255, 255, 0.9); --glass-blur: 18px; --glass-saturate: 150%; --glass-shadow: 0 6px 22px rgba(28, 25, 23, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6); /* Sombra de "elevación" al pasar el ratón sobre una tarjeta de app. */ --app-card-hover-shadow: 0 14px 38px rgba(28, 25, 23, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7); /* Tinte del fondo de la página — manchas radiales de color que dan al "cristal" algo que refractar; sin esto el efecto liquidglass no se ve. */ --page-tint-1: rgba(192, 57, 43, 0.10); --page-tint-2: rgba(230, 126, 34, 0.08); --page-tint-3: rgba(41, 128, 185, 0.06); /* Tipografía */ --font-family: 'Inter', system-ui, -apple-system, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semi: 600; --line-height-tight: 1.25; --line-height-normal: 1.5; /* Espaciado (escala de 4px) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* Bordes redondeados */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Transiciones */ --transition-fast: 120ms ease; --transition-normal: 220ms ease; } /* ─── Modo oscuro ───────────────────────────────────────────────────────────── Es el MISMO diseño del modo claro, pasado a oscuro: se conserva la estructura, el acento rojo Mordor y el efecto "liquid glass" (mismo blur/saturate, que se heredan de :root). Solo cambia la paleta a neutros oscuros y limpios —no marrón "embarrado"— invirtiendo las relaciones del claro: el fondo es el tono más oscuro, las superficies se levantan por encima, y el texto se aclara. Los tintes de página se mantienen tan sutiles como en claro (sin exceso de rojo). */ [data-theme="dark"] { /* Paleta principal — espejo oscuro del claro (bg más oscuro; surface por encima; elevated un paso más; el claro usaba neutros cálidos "piedra"). */ --color-bg: #1a1816; --color-surface: #242120; --color-surface-elevated: #2e2a28; --color-border: #393431; --color-border-subtle: #2a2725; /* Texto — inverso del claro, manteniendo la jerarquía y el contraste. */ --color-text-primary: #f5f3f0; --color-text-secondary: #b3aaa2; --color-text-muted: #837b74; /* Acento: mismo rojo Mordor del claro, apenas avivado para que respire sobre fondo oscuro (no el naranja del dark anterior). */ --color-accent: #cf4436; --color-accent-hover: #b8392b; --color-accent-fg: #ffffff; /* Header — un punto más oscuro que las superficies para que destaque. */ --color-header-bg: #141210; --color-header-text: #f5f3f0; --color-header-border: #2a2725; /* Estados — mismas tintas del claro, avivadas lo justo para el fondo oscuro. */ --color-success: #22c55e; --color-warning: #eab308; --color-error: #ef4444; --color-pending: #a8a29e; /* Sombras — más densas para que las "tarjetas de cristal" tengan profundidad. */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7); /* Liquid glass — mismo cristal que el claro pero sobre superficie oscura. blur/saturate se heredan de :root (no se redefinen a propósito). */ --glass-bg: rgba(38, 35, 32, 0.55); --glass-bg-elevated: rgba(38, 35, 32, 0.72); --glass-border: rgba(255, 255, 255, 0.10); --glass-highlight: rgba(255, 255, 255, 0.16); --glass-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); /* Misma elevación al hover, pero con realce tenue (no la línea blanca del claro). */ --app-card-hover-shadow: 0 14px 38px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); /* Tintes de página — tan sutiles como en claro (mismas tintas y opacidades), para que el cristal refracte algo de color sin teñir de rojo toda la página. */ --page-tint-1: rgba(192, 57, 43, 0.10); --page-tint-2: rgba(230, 126, 34, 0.07); --page-tint-3: rgba(41, 128, 185, 0.07); }