/* ════════════════════════════════════════════════════════════════ KYVEN v2 · DESIGN TOKENS ════════════════════════════════════════════════════════════════ Variables CSS del sistema visual v2. ESTRATEGIA: Sobrescribimos las variables originales (--gold, --sage, etc.) con los nuevos valores. Todo el CSS existente que usa estas variables recibe automáticamente los nuevos colores. ⚠️ NO modifiques los nombres de las variables existentes. Si Carlos las usa en su CSS o JS, mantenlas. Solo cambia los valores. ⚠️ Las variables nuevas tienen prefijo --kv-* para evitar colisión con las originales. ════════════════════════════════════════════════════════════════ */ :root { /* ────────────────────────────────────────────────────────────── PALETA V2 · OVERRIDE ────────────────────────────────────────────────────────────── */ /* Forest Deep · backgrounds GC-2.2 · Indirección var(--kvn-X, fallback) · flag OFF: app idéntica bit-a-bit · flag ON: tokens geneva.css aplican (cream + Patek green). */ --bg: var(--kvn-bg-app, #06110E); /* main bg · forest → cream con flag */ --bg-deep: #050a08; /* phone shell · preservar literal */ --card: var(--kvn-card-primary, #26392F); /* card base · forest → Patek green */ --card-hi: var(--kvn-card-hero, #2F4639); /* card elevated · hero cards */ --card-soft: #3A5546; /* card on top of card */ --stroke: rgba(230,226,218,0.12); /* card border default */ --stroke-hi: rgba(230,226,218,0.16); /* card border emphasis */ /* Paper · textos · jerarquía clara */ --t1: var(--kvn-cream-on-card, #E6E2DA); /* texto principal · titulos · datos */ --t2: rgba(230,226,218,0.74); /* texto secundario · body */ --t3: var(--text-tertiary); /* meta · labels · descripciones */ --t4: var(--text-tertiary); /* hint · disabled · Fase 4 unificación: subido para legibilidad */ /* Audit v4 · Fix #1 · tokens nuevos para texto terciario crítico (WCAG AA pass). --text-tertiary 0.82 alpha · contraste sobre #06110E 6.1:1 (AA con margen). Reemplaza el literal var(--text-tertiary) en 8 selectores específicos (.brief-greet-sub · .brief-hero-eyebrow|label|state-sub · .weekly-eb · .manage-eyebrow-count · .subnav-btn:not(.active) · .ins-v5-tab:not(.on)). Ver bloque AUDIT v4 en overrides.css. */ --text-tertiary: rgba(230,226,218,0.92); --text-quaternary: rgba(230,226,218,0.65); /* solo captions decorativos no críticos */ /* Satellite Gold · RESERVADO · solo números heroicos + monograma + nav active */ --gold: var(--kvn-gold-mate, #C8A45A); /* GC-2.2 · gold → satin mate flag ON */ --gold-soft: var(--kvn-gold-mate-bright,#B8924A); /* gradients origen */ --gold-mute: var(--kvn-gold-mate-dim, #9A7A3A); /* satellites de números */ --gold-line: var(--kvn-border-gold, rgba(200,164,90,0.30)); /* borders sutiles */ --gold-glow: rgba(200,164,90,0.18); /* glow sutil · preservar */ /* P4.1 · v3.0 audit · subir opacity 0.42 → 0.85 para pasar WCAG AA · contraste sobre #26392F antes 1.93 (fail) → ~4.6 (AA pass). */ --gold-eyebrow: rgba(200,164,90,0.85); /* Sage · canal positivo emocional · estado óptimo · Dr. K alive dot */ --sage: var(--kvn-sage-on-card, #6BA88E); /* GC-2.2 · sage → soft-on-card flag ON */ --sage-soft: var(--kvn-sage-pill, #85BEAA); /* hover · Dr. K monogram italic */ --sage-mute: var(--kvn-sage-on-cream,#4E8470); /* gradients */ --sage-bg: rgba(107,168,142,0.10); /* backgrounds sutiles sage */ /* Clay · canal de atención (no alarma) · MODERADO · warning suave */ --clay: #C8A87A; /* Ruby · canal de alerta clínica · N2 · usar muy poco */ --ruby: #A63D2F; /* Win · sutil glow para sage-soft */ --win: #E8C4A0; /* ────────────────────────────────────────────────────────────── SISTEMA DE SPACING · 5 VALORES ÚNICOS Todo el CSS v2 usa SOLO estos valores. Nunca números mágicos. ────────────────────────────────────────────────────────────── */ --sp-1: 8px; /* gaps micro · entre elementos en row */ --sp-2: 16px; /* padding interior cards · gap entre items */ --sp-3: 32px; /* respiración entre cards · sub-secciones */ --sp-4: 64px; /* aire entre secciones grandes */ --sp-5: 96px; /* momentos editoriales · respiración cinematográfica */ /* Compatibilidad con clases legacy de Carlos · no romper */ --pad-hero: 24px; --pad-card: 16px; --pad-row: 16px; --section-top: 64px; --section-bot: 16px; /* ────────────────────────────────────────────────────────────── SOMBRAS · PRINCIPIO: una sola superficie visual De triples a una sola sombra muy sutil. ────────────────────────────────────────────────────────────── */ /* P1.1 · v3.0 audit pixel-perfect · sombras externas reales para levantar cards sobre fondo forest. Antes: inset 0.02 alpha · invisible. Ahora: triple capa hero · simple media card · suave para settings. */ --sh-hero: 0 4px 8px rgba(0,0,0,0.5), 0 16px 32px rgba(0,0,0,0.4), 0 32px 64px rgba(0,0,0,0.35); --sh-card: 0 6px 24px rgba(0,0,0,0.4); --sh-soft: 0 4px 14px rgba(0,0,0,0.22); --sh-drk: 0 12px 30px rgba(0,0,0,0.45); /* ────────────────────────────────────────────────────────────── GLOW · solo screen-level, NO en cada card ────────────────────────────────────────────────────────────── */ /* CHEF FIX 7 · glow-ambient · opacidad 0.10→0.22 + alcance 60%→80% para que el matiz sage sea visible en TODO el .app-shell tras CHEF FIX 1 (inset:0). ANTES: maqueta usaba 0.10 en .phone fijo 844px con frame redondo · concentraba el efecto. Producción en viewport real iPhone Pro Max (~852px) sin status bar diluía el gradient en mancha apenas perceptible (G-R=+6 vs maqueta +14-16). Solución: subir opacidad + extender alcance · matiz sage forest consistente. */ /* PALETA MASTER · glow ambient screen-level sutil · glow-card eliminado (principio "una sola superficie visual · NO glow en cada card") */ --glow-ambient: radial-gradient(circle at 50% -10%, rgba(107,168,142,0.08) 0%, transparent 55%); --glow-card: none; /* ────────────────────────────────────────────────────────────── TIPOGRAFÍA · stack ────────────────────────────────────────────────────────────── */ --serif: 'Playfair Display', Georgia, serif; /* hero titles · Dr. K quotes */ --mono: 'JetBrains Mono', 'SF Mono', monospace; /* eyebrows · meta · timestamps */ --sans: 'Inter', system-ui, -apple-system, sans-serif; /* body · números · UI */ /* ────────────────────────────────────────────────────────────── RADIUS · sistema consistente ────────────────────────────────────────────────────────────── */ --kv-radius-sm: 8px; --kv-radius-md: 12px; --kv-radius-lg: 14px; --kv-radius-xl: 18px; --kv-radius-pill: 99px; /* ────────────────────────────────────────────────────────────── MOTION · easings + duraciones ────────────────────────────────────────────────────────────── */ --kv-ease-out: cubic-bezier(.32,.72,0,1); /* exits · slides */ --kv-ease-in-out: cubic-bezier(.4,0,.2,1); /* default */ --kv-ease-snap: cubic-bezier(.34,1.56,.64,1); /* tap feedback */ --kv-dur-fast: 150ms; --kv-dur-med: 250ms; --kv-dur-slow: 400ms; --kv-dur-cinema: 700ms; /* weekly review transitions */ /* ────────────────────────────────────────────────────────────── Z-INDEX · sistema · evitar conflictos con CSS legacy ────────────────────────────────────────────────────────────── */ --kv-z-base: 1; --kv-z-nav: 2; --kv-z-drk-pres: 5; --kv-z-overlay: 20; --kv-z-weekly: 30; --kv-z-onboarding: 40; --kv-z-toast: 60; --kv-z-modal: 80; } /* ════════════════════════════════════════════════════════════════ ESTADO AMBIENTAL · responde a recovery del usuario ════════════════════════════════════════════════════════════════ Cuando JS añade clases al body, el glow ambient cambia. Esto permite que la app "respire" con el estado del usuario. USO desde JS (sin romper nada · solo añade clase al body): document.body.classList.add('kv-state-optimal'); // recovery >=67 document.body.classList.add('kv-state-moderate'); // recovery 34-66 document.body.classList.add('kv-state-low'); // recovery <34 ════════════════════════════════════════════════════════════════ */ body.kv-state-optimal { --glow-ambient: radial-gradient(circle at 50% -10%, rgba(107,168,142,0.14) 0%, transparent 55%); } body.kv-state-moderate { --glow-ambient: radial-gradient(circle at 50% -10%, rgba(107,168,142,0.08) 0%, transparent 55%); } body.kv-state-low { --glow-ambient: radial-gradient(circle at 50% -10%, rgba(200,168,122,0.06) 0%, transparent 55%); } /* ════════════════════════════════════════════════════════════════ FONT LOADING · si Carlos aún no las carga, las incluimos ════════════════════════════════════════════════════════════════ Si en index.html ya tiene los a Google Fonts, ignora esto. Si no, añadir en : ════════════════════════════════════════════════════════════════ */