/* ============================================================ abruma · Design Tokens ------------------------------------------------------------ Arquitectura en dos capas: 1. PRIMITIVAS → escalas crudas (--color-coral-400…). NO se usan directamente en los componentes. 2. SEMÁNTICAS → qué hace cada color (--bg-canvas, --brand-bg-strong…). Son las únicas que consumen los componentes. Cambiar la marca = tocar primitivas. Cambiar el uso = tocar semánticas. Modo oscuro: pensado, no invertido. Mantiene el ADN cálido. ============================================================ */ :root { /* ---------- PRIMITIVAS ---------- Valores crudos según abruma-guia-cozy.md. NO se usan en componentes; consume las semánticas. */ /* Crema (fondos cálidos · nunca grises fríos) */ --color-crema-0: #FFFFFF; /* blanco puro (tarjetas/surface) */ --color-crema-100: #FFFDF3; /* crema (fondo de la app) */ --color-crema-200: #FBF6EA; /* sunken (huecos suaves: celdas calendario) */ --color-crema-300: #EFE9DC; /* track (pista de segmentados) */ /* Espresso (neutros derivados del marrón base) */ --color-espresso-200: #D6CFC2; --color-espresso-300: #9C918A; /* text-tertiary guía */ --color-espresso-400: #6E5F57; /* text-secondary guía */ --color-espresso-600: #5C4E48; --color-espresso-700: #3E3035; /* sidebar item activo/hover */ --color-espresso-800: #3D2E33; --color-espresso-900: #322429; /* text-primary, sidebar, símbolos */ /* Coral (marca · único color de acción) */ --color-coral-50: #FEF0ED; /* coral lavado (botón soft, burbujas) */ --color-coral-200: #FBC9BD; --color-coral-400: #F8A494; /* coral suave (decorativo, símbolo, launcher) */ --color-coral-600: #DD6A52; /* coral medio (CTA primario, texto blanco) */ --color-coral-700: #D4624E; /* coral profundo (texto/hover sobre claro) */ --color-coral-800: #9E4231; /* texto sobre chip coral */ /* Periwinkle (SOLO títulos de página + panel bienvenida) */ --color-periwinkle-50: #EEF1FF; /* peri-soft (fondos puntuales) */ --color-periwinkle-200: #C4CFFF; --color-periwinkle-400: #91ADFF; /* periwinkle (títulos de página) */ --color-periwinkle-600: #3355CC; /* info/balance (codifica dato) */ --color-periwinkle-800: #3A4FA0; /* texto sobre chip periwinkle */ /* Estados semánticos (solo significado, nunca decoración) */ --color-success-50: #E8F5EE; --color-success-500: #2D7A4F; --color-warning-50: #FEF5E0; --color-warning-500: #8A5A00; --color-error-50: #FDEAEA; --color-error-500: #B83030; --color-info-50: #EEF1FF; --color-info-500: #3355CC; --color-lila-50: #F2EBFB; --color-lila-500: #5B4583; /* IRPF */ /* Pasteles de categoría (chips/etiquetas; todos cumplen AA) */ --color-cat-coral-bg: #FDEEE9; --color-cat-coral: #F8A494; --color-cat-coral-text: #9E4231; --color-cat-peri-bg: #EEF1FF; --color-cat-peri: #91ADFF; --color-cat-peri-text: #3A4FA0; --color-cat-pist-bg: #EEF4E0; --color-cat-pist: #C3D9A0; --color-cat-pist-text: #54663A; --color-cat-apri-bg: #FCEBD7; --color-cat-apri: #F8C89A; --color-cat-apri-text: #8A5A1E; --color-cat-lila-bg: #F2EBFB; --color-cat-lila: #D6C2F0; --color-cat-lila-text: #5B4583; --color-cat-mint-bg: #E2F4EC; --color-cat-mint: #A9DDC9; --color-cat-mint-text: #27664E; /* Aliases de retro-compatibilidad (no usar en código nuevo) */ --color-pistachio: var(--color-cat-pist); --color-apricot: var(--color-cat-apri); --color-lilac: var(--color-cat-lila); --color-mint: var(--color-cat-mint); /* ---------- SEMÁNTICAS (consumir estas) ---------- */ /* Fondos · una sola superficie con color por vista */ --bg-canvas: var(--color-crema-100); /* #FFFDF3 fondo app */ --bg-surface: var(--color-crema-0); /* #FFFFFF tarjetas elevadas */ --bg-surface-alt: var(--color-crema-100); --bg-sunken: var(--color-crema-200); /* huecos suaves */ --bg-track: var(--color-crema-300); /* pista segmentados */ --bg-sidebar: var(--color-espresso-900); /* espresso #322429 */ --bg-sidebar-hover: var(--color-espresso-700); /* sidebar item #3E3035 */ --bg-hover: rgba(50, 36, 41, 0.04); --bg-active: rgba(50, 36, 41, 0.07); /* Texto */ --text-primary: var(--color-espresso-900); /* #322429 */ --text-secondary: var(--color-espresso-400); /* #6E5F57 */ --text-tertiary: var(--color-espresso-300); /* #9C918A */ --text-on-cta: #FFFFFF; /* blanco sobre Coral 600 (CTA) */ --text-on-brand: var(--color-espresso-900); /* espresso sobre Coral 400 decorativo */ --text-on-blue: #FFFFFF; /* blanco sobre gradiente bienvenida (zona oscura) */ /* Marca (3 intensidades · coral única acción) */ --brand-bg-soft: var(--color-coral-50); /* burbujas Brumi, botón soft */ --brand-bg: var(--color-coral-400); /* superficies decorativas */ --brand-bg-strong: var(--color-coral-600); /* CTA primario */ --brand-bg-pressed: var(--color-coral-700); /* hover/pressed */ --brand-text: var(--color-coral-700); /* texto sobre coral lavado */ --brand-text-deep: var(--color-coral-800); /* sobre chip pastel */ --brand-border: rgba(212, 98, 78, 0.22); /* borde botón soft */ /* Bordes (finos, casi invisibles) */ --border-subtle: rgba(50, 36, 41, 0.07); /* tarjetas 0.5px */ --border-default: rgba(50, 36, 41, 0.12); /* inputs */ /* Enlaces */ --link: var(--color-coral-700); /* coral profundo (NO periwinkle) */ --link-hover: var(--color-coral-800); /* Radios · TODO muy redondeado (sensación cozy) */ --radius-sm: 8px; --radius-md: 16px; /* chips, celdas, inputs internos */ --radius-lg: 24px; /* tarjetas, botones de captura */ --radius-xl: 30px; /* panel bienvenida, contenedores grandes */ --radius-full: 999px; /* botones, pills, segmentados, avatares */ /* Padding canónicos guía */ --pad-page-y: 32px; /* padding página vertical */ --pad-page-x: 36px; /* padding página horizontal */ --pad-card: 24px; /* padding interno tarjeta */ --pad-btn-y: 12px; --pad-btn-x: 22px; --sidebar-w: 236px; /* Sombras DIFUSAS tintadas en espresso (efecto «nube flotando») */ --shadow-sm: 0 1px 2px rgba(50, 36, 41, 0.05), 0 2px 8px rgba(50, 36, 41, 0.05); --shadow: 0 2px 6px rgba(50, 36, 41, 0.04), 0 10px 30px rgba(50, 36, 41, 0.06); --shadow-md: 0 4px 18px rgba(50, 36, 41, 0.10); --shadow-float: 0 2px 10px rgba(50, 36, 41, 0.10); /* Foco accesible (WCAG 2.2 AA) · Periwinkle 600 al 35% */ --focus-ring: 0 0 0 3px rgba(51, 85, 204, 0.35); /* Transición estándar */ --transition: .15s ease; /* Tipografía — UNIFICADA Toda la app usa la misma familia. Para cambiarla, edita SOLO la constante APP_FONT en app/includes/config.php (controla --font-base + Google Fonts). Si APP_FONT no inyecta --font-base (página sin layout), cae a Outfit. */ --font-logo: var(--font-base, "Outfit", system-ui, -apple-system, sans-serif); --font-bubble: var(--font-base, "Outfit", system-ui, -apple-system, sans-serif); --font-display: var(--font-base, "Outfit", system-ui, -apple-system, sans-serif); --font-body: var(--font-base, "Outfit", system-ui, -apple-system, sans-serif); --font-accent: var(--font-base, "Outfit", system-ui, -apple-system, sans-serif); } /* ============================================================ MODO OSCURO — fondo Espresso muy oscuro, nunca negro puro. Activar añadiendo la clase .dark al o . ============================================================ */ .dark { --bg-canvas: #1F1518; --bg-surface: #2A1F23; --bg-surface-alt: #322429; --bg-sidebar: #14090C; /* más oscuro que el canvas: sigue siendo el ancla */ --bg-sidebar-hover: #2A1F23; --bg-hover: rgba(229, 220, 200, 0.06); --bg-active: rgba(229, 220, 200, 0.10); --text-primary: var(--color-crema-0); --text-secondary: var(--color-espresso-200); --text-tertiary: var(--color-espresso-300); --border-subtle: rgba(229, 220, 200, 0.10); --border-default: rgba(229, 220, 200, 0.18); /* Tonos de marca → transparencias alfa para que luzcan sin saturar */ --brand-bg-soft: rgba(248, 164, 148, 0.12); --brand-text: var(--color-coral-200); --link: var(--color-periwinkle-400); --link-hover: var(--color-periwinkle-200); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.38); }