/* ============================================================================ CYC FACTURACION — tokens.css Unica fuente de verdad del sistema visual: color, radios, sombras, tipografia fluida, espaciado, movimiento y layout. POR QUE este archivo solo tiene variables: el tema claro/oscuro se resuelve reasignando tokens en un solo lugar; asi ninguna hoja posterior necesita reglas duplicadas por tema. Regla dura del proyecto: NINGUN color hex suelto fuera de este archivo. La fuente Inter se carga con en el del HTML (unica dependencia externa permitida). Aqui solo se declara la pila tipografica como token, para no bloquear el render con un @import encadenado. ========================================================================= */ /* --------------------------------------------------------------------------- 1. TEMA CLARO (por defecto) ------------------------------------------------------------------------ */ :root{ /* --- Fondo y superficies --- */ --bg: #FBFCFE; /* lienzo de la app */ --bg-elev: #F3F7FD; /* zonas hundidas / barras */ --surface: #FFFFFF; /* tarjetas, modales */ --surface-2: #F7FAFF; /* inputs, segmented, chips */ /* Pieza que debe verse ELEVADA sobre --surface-2 (pildora del segmented). En claro basta el blanco; en oscuro hay que subir luminosidad, porque --surface es mas OSCURO que --surface-2 y se veria hundida. */ --surface-raised: #FFFFFF; /* --- Texto --- */ --text: #0B1B33; /* titulos y cuerpo */ --text-muted: #5B6B85; /* secundario, labels */ /* POR QUE #64748B y no el #8A99B3 anterior: aquel daba 2.82:1 sobre --bg y FALLABA AA en texto real (.field__label, .tabbar__btn, .eyebrow, .tile__badge, .strength__text, .captcha__hint, .auth__legal). Este da 4.76:1 y sigue leyendose como terciario. El valor del tema oscuro ya pasaba, por eso alli NO se toca. */ --text-soft: #64748B; /* terciario, placeholders, hints */ /* --- Bordes --- */ --border: #E6ECF5; --border-strong: #D3DEEE; /* --- Marca --- */ --primary: #0A66FF; --primary-2: #3B8BFF; /* fin del gradiente 135deg */ --primary-ink: #FFFFFF; /* texto sobre primary */ --primary-soft: #EAF2FF; /* fondos tenues de marca */ /* --- Semanticos --- */ --success: #12B76A; --success-soft: #E7F8F0; --danger: #F04438; --danger-soft: #FEECEB; --warning: #F79009; --warning-soft: #FFF6E8; /* --- Tintas semanticas: SOLO para TEXTO sobre los fondos *-soft --- POR QUE existen: los colores de arriba estan calibrados como RELLENO (barras, bordes, iconos). Usados como texto sobre su propio *-soft dan 2.2-3.8:1 y no cumplen AA. Estas versiones oscurecidas si lo cumplen. Regla: relleno = --danger / --success / --warning / --primary; texto = --danger-ink / --success-ink / --warning-ink / --primary-ink-soft. */ --danger-ink: #B42318; --success-ink: #067647; --warning-ink: #B54708; --primary-ink-soft:#0B4FCC; /* texto de marca sobre --primary-soft */ /* --- Foco (halo de accesibilidad) --- */ --ring: rgba(10,102,255,.35); /* Halo de foco para campos en ERROR. POR QUE no reusar --danger-soft: en claro es casi blanco y sobre la tarjeta blanca el campo enfocado se veia identico al no enfocado (sin indicador de foco). */ --ring-danger: rgba(240,68,56,.38); /* --- Velos: se usan sobre fondos oscurecidos/con blur --- */ --scrim: rgba(11,27,51,.34); --ripple-ink: rgba(255,255,255,.45); /* ripple sobre boton primario */ --ripple-dark: rgba(10,102,255,.18); /* ripple sobre boton claro */ /* ------------------------------------------------------------------------- 2. RADIOS ---------------------------------------------------------------------- */ --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-full: 999px; /* ------------------------------------------------------------------------- 3. SOMBRAS (multicapa: una capa de contacto + una de dispersion) POR QUE multicapa: una sola sombra se ve "pegada"; dos capas dan la profundidad suave tipo iOS/macOS. ---------------------------------------------------------------------- */ --sh-1: 0 1px 2px rgba(11,27,51,.06), 0 1px 3px rgba(11,27,51,.04); --sh-2: 0 4px 12px rgba(11,27,51,.07), 0 2px 4px rgba(11,27,51,.04); --sh-3: 0 12px 32px rgba(11,27,51,.10), 0 4px 8px rgba(11,27,51,.05); --sh-primary: 0 8px 24px rgba(10,102,255,.28); --sh-primary-lg: 0 14px 34px rgba(10,102,255,.34); --sh-danger: 0 8px 24px rgba(240,68,56,.24); --sh-success: 0 8px 24px rgba(18,183,106,.24); /* Sombra de la ilustracion del panel de marca (drop-shadow de SVG). POR QUE token y no literal: era el unico hex suelto fuera de este archivo y ademas una sombra negra al 10% es invisible en tema oscuro. */ --sh-art: 0 12px 24px rgba(11,27,51,.10); /* ------------------------------------------------------------------------- 4. TIPOGRAFIA Escala FLUIDA con clamp(): un solo valor sirve de celular a escritorio, sin media queries de tamano. ---------------------------------------------------------------------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: clamp(.72rem, .70rem + .15vw, .80rem); --fs-sm: clamp(.82rem, .79rem + .18vw, .90rem); --fs-md: clamp(.94rem, .90rem + .20vw, 1.00rem); --fs-lg: clamp(1.05rem, .99rem + .30vw, 1.15rem); --fs-xl: clamp(1.20rem, 1.10rem + .50vw, 1.40rem); --fs-2xl: clamp(1.50rem, 1.30rem + 1.00vw, 1.85rem); --fs-3xl: clamp(1.90rem, 1.50rem + 2.00vw, 2.60rem); --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.15; /* titulos */ --lh-snug: 1.35; /* subtitulos */ --lh-base: 1.55; /* cuerpo */ /* Apretar el tracking en titulos es la firma tipografica de Apple */ --ls-tight: -.02em; --ls-title: -.03em; --ls-wide: .04em; /* ------------------------------------------------------------------------- 5. ESPACIADO (escala de 4px) ---------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ------------------------------------------------------------------------- 6. MOVIMIENTO --ease-out : entradas y salidas (desaceleracion larga, muy Apple) --ease-spring : rebote corto para pildoras, tarjetas y checks --ease-in-out : cambios simetricos (morph del tema) ---------------------------------------------------------------------- */ --dur-fast: 160ms; --dur: 260ms; --dur-slow: 420ms; --dur-xslow: 700ms; --dur-aurora: 26s; /* deriva del fondo: lenta a proposito */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* ------------------------------------------------------------------------- 7. LAYOUT ---------------------------------------------------------------------- */ --maxw-form: 440px; --maxw-content: 1120px; --header-h: 60px; --tap: 44px; /* area tactil minima accesible */ --field-h: 56px; --btn-h: 52px; /* Safe areas de iPhone resueltas como token (con fallback 0px) */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* ------------------------------------------------------------------------- 8. AURORA (fondo vivo) — intensidad por tema ---------------------------------------------------------------------- */ --aurora-op-1: .40; --aurora-op-2: .30; --aurora-blur: 90px; /* Capas apiladas */ --z-base: 0; --z-aurora: -1; --z-header: 50; --z-modal: 80; --z-toast: 90; --z-loader: 100; color-scheme: light; } /* --------------------------------------------------------------------------- 9. TEMA OSCURO — AUTOMATICO (preferencia del sistema) Se excluye [data-theme="light"] para que la eleccion manual del usuario guardada en localStorage('cyc_theme') gane sobre el sistema. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg: #0A1120; --bg-elev: #0F1830; --surface: #131D33; --surface-2: #18243D; --surface-raised:#28375A; --text: #EAF1FB; --text-muted: #9FB0CA; --text-soft: #7789A5; --border: #233149; --border-strong: #2E4062; --primary: #4D93FF; --primary-2: #7FB2FF; --primary-ink: #061226; --primary-soft: #152744; /* Semanticos: mas luminosos para mantener contraste AA sobre fondo oscuro */ --success: #3DDC97; --success-soft: #10301F; --danger: #FF6B5E; --danger-soft: #3A1614; --warning: #FFB13D; --warning-soft: #38260B; /* Tintas de texto: en oscuro los luminosos YA cumplen AA sobre los fondos *-soft, asi que la tinta vuelve al color luminoso. */ --danger-ink: #FF6B5E; --success-ink: #3DDC97; --warning-ink: #FFB13D; --primary-ink-soft:#7FB2FF; --ring: rgba(77,147,255,.45); --ring-danger: rgba(255,107,94,.45); --scrim: rgba(3,8,18,.62); --ripple-ink: rgba(255,255,255,.28); --ripple-dark: rgba(127,178,255,.22); /* Sombras mas profundas: en oscuro la sombra suave desaparece */ --sh-1: 0 1px 2px rgba(0,0,0,.50), 0 1px 3px rgba(0,0,0,.35); --sh-2: 0 6px 16px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.38); --sh-3: 0 18px 44px rgba(0,0,0,.58), 0 6px 14px rgba(0,0,0,.42); --sh-primary: 0 10px 28px rgba(10,72,190,.55); --sh-primary-lg: 0 16px 40px rgba(10,72,190,.62); --sh-danger: 0 10px 28px rgba(160,40,32,.50); --sh-success: 0 10px 28px rgba(12,110,68,.50); /* En oscuro la sombra al 10% no existe: se sube opacidad y difusion */ --sh-art: 0 16px 32px rgba(0,0,0,.55); --aurora-op-1: .30; --aurora-op-2: .22; color-scheme: dark; } } /* --------------------------------------------------------------------------- 10. TEMA OSCURO — MANUAL (switch #themeToggle) Bloque identico al anterior; existe aparte para que el usuario pueda forzar oscuro aunque su sistema este en claro. ------------------------------------------------------------------------ */ :root[data-theme="dark"]{ --bg: #0A1120; --bg-elev: #0F1830; --surface: #131D33; --surface-2: #18243D; --surface-raised:#28375A; --text: #EAF1FB; --text-muted: #9FB0CA; --text-soft: #7789A5; --border: #233149; --border-strong: #2E4062; --primary: #4D93FF; --primary-2: #7FB2FF; --primary-ink: #061226; --primary-soft: #152744; --success: #3DDC97; --success-soft: #10301F; --danger: #FF6B5E; --danger-soft: #3A1614; --warning: #FFB13D; --warning-soft: #38260B; /* Tintas de texto: ver comentario del bloque automatico */ --danger-ink: #FF6B5E; --success-ink: #3DDC97; --warning-ink: #FFB13D; --primary-ink-soft:#7FB2FF; --ring: rgba(77,147,255,.45); --ring-danger: rgba(255,107,94,.45); --scrim: rgba(3,8,18,.62); --ripple-ink: rgba(255,255,255,.28); --ripple-dark: rgba(127,178,255,.22); --sh-1: 0 1px 2px rgba(0,0,0,.50), 0 1px 3px rgba(0,0,0,.35); --sh-2: 0 6px 16px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.38); --sh-3: 0 18px 44px rgba(0,0,0,.58), 0 6px 14px rgba(0,0,0,.42); --sh-primary: 0 10px 28px rgba(10,72,190,.55); --sh-primary-lg: 0 16px 40px rgba(10,72,190,.62); --sh-danger: 0 10px 28px rgba(160,40,32,.50); --sh-success: 0 10px 28px rgba(12,110,68,.50); --sh-art: 0 16px 32px rgba(0,0,0,.55); --aurora-op-1: .30; --aurora-op-2: .22; color-scheme: dark; }