/* =========================================================================== ALMA Ecosystem · tokens.css v6.1 (conservative refinement) --------------------------------------------------------------------------- Evolution incremental sobre paleta v6 "Premium Obsidian" sealed (2026-05-15). PALETA · TIPOGRAFIAS · BRAND IDENTITY se preservan verbatim. v6.1 anade: sub-line accents unificados + micro-tokens (spacing/timing/ shadows/hairlines) + jerarquia tipografica con weight contrast extremo. =========================================================================== */ :root { /* ====================================================================== 1. BASE OSCURO · v6 SEALED VERBATIM (no tocar) ====================================================================== */ --fnl-base: #0B0B0F; --fnl-base-light: #10101A; --fnl-base-dark: #08080C; --fnl-surface-1: #16161D; --fnl-surface-2: #1F1F2A; /* ====================================================================== 2. TEXT · CREAM v6 SEALED VERBATIM ====================================================================== */ --fnl-cream: #F8F7F4; --fnl-text-primary: #F8F7F4; --fnl-text-secondary: rgba(248, 247, 244, 0.65); --fnl-text-muted: rgba(248, 247, 244, 0.55); --fnl-text-faint: rgba(248, 247, 244, 0.40); /* v6.1 nuevo · text ghost para microcopy disabled */ --fnl-text-ghost: rgba(248, 247, 244, 0.22); /* ====================================================================== 3. GOLD ACENTO PRINCIPAL · v6 SEALED VERBATIM ====================================================================== */ --fnl-gold: #D4B896; --fnl-gold-base: #D4B896; --fnl-gold-bright: #F0DCB0; --fnl-gold-dark: #A88656; --fnl-gold-deep: #7A5E3A; /* v6.1 nuevo · gold glow rgba para soft shadows */ --fnl-gold-glow: rgba(212, 184, 150, 0.14); /* ====================================================================== 4. TEAL ACENTO SECUNDARIO · v6 SEALED VERBATIM (Systems brand) ====================================================================== */ --fnl-teal: #00C2A8; --fnl-teal-bright: #7FE0CC; --fnl-teal-deep: #008870; /* v6.1 nuevo · teal glow */ --fnl-teal-glow: rgba(0, 194, 168, 0.14); /* ====================================================================== 5. BORDERS · v6 SEALED + REFINEMENTS v6.1 ====================================================================== */ --fnl-border-subtle: rgba(212, 184, 150, 0.12); --fnl-border-strong: rgba(212, 184, 150, 0.24); /* v6 strong-gold */ /* v6.1 nuevo · hairline mas intensa para focus + featured cards */ --fnl-border-intense: rgba(240, 220, 176, 0.48); --fnl-border-cream: rgba(248, 247, 244, 0.10); /* ====================================================================== 6. SURFACES · v6 + v6.1 refinements ====================================================================== */ --fnl-surface: rgba(248, 247, 244, 0.02); /* v6 card bg */ --fnl-surface-hover: rgba(248, 247, 244, 0.04); /* v6 hover */ /* v6.1 nuevo · elevated featured + glass blur */ --fnl-surface-elevated: rgba(248, 247, 244, 0.05); --fnl-surface-glass: rgba(11, 11, 15, 0.72); /* ====================================================================== 7. SUB-LINE ACCENTS (NUEVO v6.1) · sistema unificado cross-paginas ---------------------------------------------------------------------- Cada sub-linea ALMA tiene su acento primario sobre la base obsidian. Variables modulares · se sobreescriben en body[data-line="X"] segun pagina. Default = Systems/Funnel (teal + gold). ====================================================================== */ --alma-systems-accent: #00C2A8; /* Systems · teal */ --alma-systems-tone: #D4B896; /* Systems · gold counter-tone */ --alma-studio-accent: #FF2D55; /* Studio · rojo sealed */ --alma-studio-tone: #D4B896; --alma-sound-accent: #B8A4FF; /* Sound · violet placeholder · sealed final TBD */ --alma-sound-tone: #F0DCB0; --alma-funnel-accent: var(--fnl-teal); --alma-funnel-tone: var(--fnl-gold); /* Default page accent = funnel */ --alma-accent: var(--alma-funnel-accent); --alma-tone: var(--alma-funnel-tone); /* ====================================================================== 8. BACKWARDS-COMPAT ALIASES (v6 sealed) ====================================================================== */ --fnl-accent: var(--fnl-teal); --fnl-accent-bright: var(--fnl-teal-bright); --fnl-accent-dim: rgba(0, 194, 168, 0.12); --fnl-bg-primary: var(--fnl-base); --fnl-bg-elevated: var(--fnl-surface-1); --fnl-border: var(--fnl-border-subtle); /* ====================================================================== 9. TIPOGRAFIA · 3 FAMILIES v6 SEALED VERBATIM ---------------------------------------------------------------------- Inter (body) · Space Grotesk (UI) · Syne (display) v6.1 anade: scale ampliada + weight contrast extremo + letter-spacing refinado. NO swap families. ====================================================================== */ --fnl-font-body: 'Inter', system-ui, -apple-system, sans-serif; --fnl-font-ui: 'Space Grotesk', 'Inter', sans-serif; --fnl-font-display: 'Syne', 'Inter', sans-serif; /* Type scale · v6.1 escala dramatica vs v6 (weight extremo 300 vs 700) */ --fs-hero: clamp(44px, 8.5vw, 132px); /* v6 40-84 · +57% top */ --fs-display-1: clamp(40px, 6vw, 88px); /* section title main */ --fs-display-2: clamp(32px, 4.5vw, 64px); /* v6 36-64 (sealed) */ --fs-h3: clamp(22px, 2.2vw, 32px); --fs-h4: clamp(18px, 1.6vw, 22px); --fs-numeral: clamp(64px, 10vw, 168px); /* counters · v6 56-112 · +50% */ --fs-lead: clamp(16px, 1.3vw, 20px); --fs-body: clamp(15px, 1.05vw, 17px); --fs-small: 13px; --fs-micro: 12px; --fs-eyebrow: 11px; --fs-marker: 10px; /* Weights (Syne ranges 400-800, Inter 300-700, Grotesk 400-700) */ --fw-hero-thin: 300; /* v6.1 nuevo · hero display thin */ --fw-display-thin: 400; --fw-display: 600; /* v6 main */ --fw-display-bold: 700; /* v6 hero (sealed) */ --fw-display-black: 800; /* v6 counters (sealed) */ --fw-body: 400; --fw-body-med: 500; --fw-ui: 500; --fw-ui-strong: 600; /* Letter spacing · v6.1 refined */ --ls-display-tight: -0.028em; /* v6.1 hero · vs v6 -0.025em */ --ls-display-snug: -0.020em; /* v6.1 section · vs v6 -0.02em (sealed) */ --ls-display-loose: -0.015em; --ls-body: -0.003em; --ls-ui: 0.04em; --ls-eyebrow: 0.22em; /* v6.1 · vs v6 0.18em (wider luxe) */ --ls-marker: 0.28em; --ls-cta: 0.14em; /* v6.1 · vs v6 0.06em (wider buttons) */ /* Line height */ --lh-hero: 0.98; /* v6.1 mas tight · vs v6 1.02 */ --lh-display: 1.05; /* v6 sealed */ --lh-body: 1.55; --lh-tight: 1.2; /* ====================================================================== 10. LAYOUT · SPACING v6.1 (conservative bump · NO agresivo v7) ====================================================================== */ --space-section-y: clamp(100px, 14vh, 180px); /* v6 80-140 · +28% top */ --space-section-y-tight: clamp(72px, 10vh, 120px); --space-container: clamp(24px, 5vw, 64px); --space-stack-xl: clamp(64px, 9vh, 100px); --space-stack-lg: clamp(40px, 6vh, 64px); --space-stack-md: clamp(20px, 3vh, 32px); --space-stack-sm: 12px; --space-stack-xs: 6px; --container-narrow: 720px; --container-default: 1180px; --container-wide: 1380px; --container-bleed: 1560px; /* ====================================================================== 11. RADIUS · v6 SEALED + extras ====================================================================== */ --radius-xs: 2px; --radius-sm: 6px; --radius-md: 12px; /* v6 sealed default */ --radius-lg: 16px; /* v6.1 nuevo · refined cards */ --radius-xl: 24px; --radius-full: 999px; /* ====================================================================== 12. SHADOWS · v6 SEALED + refinements multi-layer ====================================================================== */ --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.25); --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.35); /* v6 heavy sealed */ --shadow-dashboard: 0 24px 80px rgba(212, 184, 150, 0.08), 0 12px 40px rgba(0, 0, 0, 0.5); /* v6 sealed */ /* v6.1 nuevo · multi-layer refined */ --shadow-elev: 0 32px 96px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--fnl-border-subtle) inset; --shadow-gold-glow: 0 0 0 1px var(--fnl-border-strong), 0 24px 80px var(--fnl-gold-glow); --shadow-teal-glow: 0 0 0 1px rgba(0, 194, 168, 0.32), 0 24px 80px var(--fnl-teal-glow); /* ====================================================================== 13. MOTION TIMING · v6.1 refined ease-out elegant ---------------------------------------------------------------------- v6 usaba 0.3s default + expo.out GSAP. v6.1 estandariza 320-480ms con cubic-bezier custom para microinteractions mas pulidas. ====================================================================== */ --ease-luxe: cubic-bezier(0.16, 1, 0.3, 1); /* expo out */ --ease-luxe-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-in-luxe: cubic-bezier(0.7, 0, 0.84, 0); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 180ms; --dur-base: 320ms; /* v6.1 default microinteractions */ --dur-med: 480ms; /* v6.1 hover transitions · vs v6 300ms */ --dur-slow: 720ms; --dur-cinema: 1100ms; /* v6.1 reveals · vs v6 expo.out 0.7s */ /* ====================================================================== 14. Z-INDEX SCALE ====================================================================== */ --z-base: 1; --z-sticky: 50; --z-nav: 100; --z-sticky-cta: 90; --z-modal: 1000; } /* === Sub-line overrides via data attribute ============================== */ body[data-line="systems"] { --alma-accent: var(--alma-systems-accent); --alma-tone: var(--alma-systems-tone); --alma-accent-bright: #7FE0CC; --alma-accent-deep: #008870; } body[data-line="studio"] { --alma-accent: var(--alma-studio-accent); --alma-tone: var(--alma-studio-tone); --alma-accent-bright: #FF7090; --alma-accent-deep: #B81F40; } body[data-line="sound"] { --alma-accent: var(--alma-sound-accent); --alma-tone: var(--alma-sound-tone); --alma-accent-bright: #D4C5FF; --alma-accent-deep: #8472CC; } body[data-line="funnel"] { --alma-accent: var(--alma-funnel-accent); --alma-tone: var(--alma-funnel-tone); --alma-accent-bright: #7FE0CC; --alma-accent-deep: #008870; } body[data-line="home"] { --alma-accent: rgba(248, 247, 244, 0.85); --alma-tone: rgba(248, 247, 244, 0.65); --alma-accent-bright: #F8F7F4; --alma-accent-deep: rgba(248, 247, 244, 0.45); } body[data-line="home"] { background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(248,247,244,0.04) 0%, transparent 60%), var(--fnl-base); } /* === Reduced motion respect ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }