/* Hallmark · tokens · FUMANJI * theme: custom · vibe: "grafito y luz azul" * paper-band: dark (grafito) por defecto · display: grotesk-sans · accent: cool (267) * anchor: #5271FF — azul corporativo, extraido de Logo-v1-original.png * * ESTRUCTURA * 1. Constantes de marca — no cambian entre temas * 2. Escalas — tipografia, espacio, radio, tiempo * 3. Roles · GRAFITO (:root) — el tema por defecto del sitio * 4. Roles · claro — solo con el interruptor [data-theme="light"] * * Los componentes SOLO consumen roles. Nunca un --n-* crudo, nunca un hex suelto. */ :root { /* ══ 1 · CONSTANTES DE MARCA ══ */ --blue: oklch(61% 0.212 267); /* #5271FF */ --blue-press: oklch(53% 0.220 267); --blue-lift: oklch(68% 0.190 267); --blue-soft: oklch(76% 0.140 267); /* Rampa clara, para el tema con interruptor */ --n-0: oklch(99.4% 0.002 267); --n-25: oklch(98.2% 0.003 267); --n-50: oklch(96.6% 0.004 267); --n-100:oklch(93.8% 0.005 267); --n-200:oklch(89.5% 0.006 267); --n-300:oklch(80% 0.008 267); --n-400:oklch(65% 0.010 267); --n-600:oklch(40% 0.014 267); --n-950:oklch(9.5% 0.010 267); /* Rampa grafito: gris oscuro con una gota de frio. Ni negro puro (#000 se lee sintetico) ni azulado. */ --gr-950: oklch(11% 0.004 265); --gr-900: oklch(14% 0.005 265); --gr-850: oklch(17.5% 0.005 265); /* el papel del sitio */ --gr-800: oklch(21% 0.006 265); --gr-750: oklch(24.5% 0.007 265); --gr-700: oklch(29% 0.008 265); --gr-600: oklch(38% 0.010 265); --gr-400: oklch(58% 0.010 265); --gr-200: oklch(74% 0.008 265); --gr-050: oklch(96% 0.004 265); /* ══ 2 · ESCALAS ══ */ --font-display: "Segoe UI Variable Display", "SF Pro Display", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-body: "Segoe UI Variable Text", "SF Pro Text", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; --t-2xs: 0.6875rem; --t-xs: 0.75rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.125rem; --t-xl: 1.375rem; --t-2xl: 1.75rem; --t-3xl: clamp(2rem, 3.2vw, 2.75rem); --t-4xl: clamp(2.5rem, 5vw, 4rem); --t-hero:clamp(2.75rem, 6.4vw, 5.75rem); --lh-tight: 1.02; --lh-snug: 1.22; --lh-body: 1.6; --lh-loose: 1.7; --tr-hero: -0.042em; --tr-head: -0.028em; --tr-flat: -0.011em; --tr-wide: 0.09em; --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms; --dur-4: 720ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --z-base: 1; --z-sticky: 15; --z-nav: 25; --z-modal: 40; --measure: 58ch; --page: 1200px; --pad: clamp(1.25rem, 4vw, 2.5rem); /* ══ 3 · ROLES · GRAFITO (por defecto) ══ En oscuro la elevacion se comunica con LUZ: lo que sube, aclara. */ --bg: var(--gr-850); --bg-raised: var(--gr-800); --bg-sunk: var(--gr-900); --fg: var(--gr-050); --fg-2: var(--gr-200); --fg-3: var(--gr-400); --line: var(--gr-700); --line-soft: var(--gr-750); --line-firm: var(--gr-600); --accent: var(--blue); --accent-text: var(--blue-soft); --accent-hover:var(--blue-lift); --on-accent: oklch(99% 0 0); --accent-wash: oklch(26% 0.055 267); --accent-glow: oklch(61% 0.212 267 / 0.40); /* Banda: sube en claridad, no baja */ --band-bg: var(--gr-750); --band-fg: var(--gr-050); --band-fg-2: var(--gr-200); --band-line: var(--gr-600); --band-card: var(--gr-800); --band-accent:var(--blue-soft); --band-halo: 32%; --mcard-a: oklch(30% 0.045 267); --mcard-b: oklch(14% 0.010 265); --mcard-shadow: 0 30px 64px -30px oklch(2% 0 0 / 0.85); --glass-bg: color-mix(in srgb, var(--gr-800) 68%, transparent); --glass-edge: oklch(40% 0.012 265 / 0.85); --glass-sheen: oklch(100% 0 0 / 0.09); --nav-bg: color-mix(in srgb, var(--gr-850) 78%, transparent); /* Metales del Club, calibrados para leerse sobre grafito */ --niv-bronce: oklch(70% 0.105 58); --niv-plata: oklch(84% 0.020 250); --niv-oro: oklch(83% 0.135 88); --niv-black: var(--blue-soft); --ok: oklch(76% 0.16 155); --warn: oklch(81% 0.14 78); --off: var(--gr-600); --sh-1: 0 1px 2px oklch(2% 0 0 / 0.4); --sh-2: 0 1px 2px oklch(2% 0 0 / 0.45), 0 4px 14px -4px oklch(2% 0 0 / 0.5); --sh-3: 0 1px 2px oklch(2% 0 0 / 0.5), 0 10px 28px -10px oklch(2% 0 0 / 0.6), 0 28px 64px -28px oklch(2% 0 0 / 0.7); --sh-accent: 0 10px 34px -12px var(--accent-glow); --scrim: oklch(6% 0.004 265 / 0.66); --hero-lum: 24; /* Degradados del fondo: un halo azul arriba y una caida vertical del grafito */ --wash-1: radial-gradient(120% 62% at 50% -12%, color-mix(in srgb, var(--blue) 13%, transparent) 0%, transparent 62%); --wash-2: linear-gradient(180deg, color-mix(in srgb, var(--gr-800) 55%, transparent) 0%, transparent 34%, color-mix(in srgb, var(--gr-950) 45%, transparent) 100%); color-scheme: dark; } /* ══ 4 · ROLES · CLARO (solo con el interruptor) ══ */ :root[data-theme="light"] { --bg: var(--n-0); --bg-raised: var(--n-25); --bg-sunk: var(--n-50); --fg: var(--n-950); --fg-2: var(--n-600); --fg-3: var(--n-400); --line: var(--n-200); --line-soft: var(--n-100); --line-firm: var(--n-300); --accent-text: var(--blue); --accent-hover: var(--blue-press); --accent-wash: oklch(96.5% 0.028 267); --accent-glow: oklch(61% 0.212 267 / 0.28); --band-bg: var(--n-950); --band-fg: oklch(97% 0.004 267); --band-fg-2: oklch(70% 0.010 267); --band-line: oklch(24% 0.014 267); --band-card: oklch(13.5% 0.014 267); --band-halo: 26%; --mcard-a: oklch(20% 0.030 267); --mcard-b: oklch(11% 0.012 267); --mcard-shadow: 0 30px 60px -30px oklch(9.5% 0.01 267 / 0.9); --glass-bg: color-mix(in srgb, var(--n-0) 62%, transparent); --glass-edge: color-mix(in srgb, var(--n-300) 60%, transparent); --glass-sheen: oklch(100% 0 0 / 0.7); --nav-bg: color-mix(in srgb, var(--n-0) 74%, transparent); --niv-bronce: oklch(52% 0.105 58); --niv-plata: oklch(56% 0.020 250); --niv-oro: oklch(62% 0.135 88); --niv-black: var(--blue); --ok: oklch(58% 0.15 155); --warn: oklch(64% 0.15 68); --off: var(--n-400); --sh-1: 0 1px 2px oklch(9.5% 0.01 267 / 0.05); --sh-2: 0 1px 2px oklch(9.5% 0.01 267 / 0.05), 0 4px 12px -4px oklch(9.5% 0.01 267 / 0.08); --sh-3: 0 1px 2px oklch(9.5% 0.01 267 / 0.06), 0 8px 24px -8px oklch(9.5% 0.01 267 / 0.12), 0 24px 56px -24px oklch(9.5% 0.01 267 / 0.16); --sh-accent: 0 8px 28px -10px var(--accent-glow); --scrim: oklch(9.5% 0.01 267 / 0.4); --hero-lum: 16; --wash-1: radial-gradient(120% 62% at 50% -12%, color-mix(in srgb, var(--blue) 7%, transparent) 0%, transparent 60%); --wash-2: linear-gradient(180deg, color-mix(in srgb, var(--n-50) 80%, transparent) 0%, transparent 30%); color-scheme: light; }