/* ============================================================ SECRETS MATCH · DESIGN TOKENS Sistema dual: DARK (afuera del club) + LIGHT (adentro). v1.0 — Mayo 2026 ============================================================ */ :root { /* ─────────── DARK · landing + onboarding pre-verificación ─── */ --ink-950: #0E0B0D; --ink-900: #141012; --ink-800: #1C1719; --ink-700: #2A2326; --bone-50: #F2EDE6; --bone-200: #C9C0B6; --bone-400: #8B8285; --wine-700: #4A1420; --wine-500: #6B1F2E; --wine-300: #8B3A4C; --gold-500: #C9A875; --gold-300: #DCC196; /* ─────────── DARK · variante "secreto prohibido" (Ashley Madison) ─── */ --noir-950: #0A0405; /* negro tintado rojo */ --noir-900: #110709; --noir-800: #1A0C10; --crimson-700: #5C0A14; /* rojo lacre profundo */ --crimson-500: #8B0F1E; /* rojo Ashley Madison */ --crimson-300: #B81D33; /* labios rojos */ --crimson-200: #D94661; /* hover claro */ --velvet-500: #3D0E1C; /* terciopelo profundo */ --velvet-300: #B8425A; /* rosa terciopelo */ --crimson-alpha-25: rgba(184, 29, 51, 0.25); --crimson-alpha-60: rgba(184, 29, 51, 0.60); --noir-alpha-90: rgba(10, 4, 5, 0.90); --noir-alpha-70: rgba(10, 4, 5, 0.70); --noir-alpha-40: rgba(10, 4, 5, 0.40); /* alpha helpers — para hairlines y overlays */ --bone-alpha-15: rgba(242, 237, 230, 0.15); --bone-alpha-30: rgba(242, 237, 230, 0.30); --bone-alpha-60: rgba(242, 237, 230, 0.60); --gold-alpha-30: rgba(201, 168, 117, 0.30); --wine-alpha-25: rgba(107, 31, 46, 0.25); --ink-alpha-85: rgba(14, 11, 13, 0.85); /* ─────────── LIGHT · app interna (dashboard/browse/etc) ─── */ --paper-50: #FAF7F2; --paper-100: #F2EDE6; --paper-200: #E8E0D5; --paper-300: #D4C9B8; --ink-text: #1A1517; --ink-muted: #4A4448; --ink-faint: #7A7378; /* ─────────── Semantic · estados ─── */ --danger: #B91C1C; --danger-bg: #FEE2E2; --success: #15803D; --success-bg:#D1FAE5; --warning: #B45309; --warning-bg:#FEF3C7; /* ─────────── Tipografía (v2 — fuera de la training-data default list) ─── */ --font-serif: 'Bodoni Moda', 'Bodoni 72', 'Didot', 'Times New Roman', serif; --font-sans: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; --track-eyebrow: 0.18em; /* uppercase labels */ --track-display: -0.02em; /* serif H1/H2 grandes */ --track-body: 0; --track-mono: 0.02em; --lh-display: 0.95; --lh-heading: 1.15; --lh-body: 1.55; --lh-prose: 1.60; /* ─────────── Escala modular base 8 ─── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px; /* ─────────── Radios ─── */ --r-sm: 4px; /* inputs */ --r-md: 8px; /* cards menores */ --r-lg: 16px; /* modales, cards grandes */ --r-xl: 24px; /* sheets */ --r-pill: 999px; /* botones, chips */ /* ─────────── Sombras (capas, no plomazos) ─── */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --glow-wine: 0 0 40px rgba(107, 31, 46, 0.25); --glow-gold: 0 0 32px rgba(201, 168, 117, 0.15); /* ─────────── Motion ─── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-base: 280ms; --dur-slow: 480ms; /* ─────────── Contenedores ─── */ --container-narrow: 640px; --container-prose: 720px; --container-default: 1024px; --container-wide: 1280px; /* ─────────── Z-index scale ─── */ --z-base: 1; --z-sticky: 10; --z-overlay: 100; --z-modal: 1000; --z-toast: 2000; } /* ============================================================ THEME APPLICATION - → landing + onboarding pre-verif - → dashboard + browse + app interna ============================================================ */ .theme-dark { --bg: var(--ink-950); --bg-elevated: var(--ink-900); --bg-surface: var(--ink-800); --border: var(--bone-alpha-15); --border-strong:var(--bone-alpha-30); --text: var(--bone-50); --text-muted: var(--bone-200); --text-faint: var(--bone-400); --accent: var(--wine-500); --accent-hover: var(--wine-300); --accent-soft: var(--wine-700); --accent-2: var(--gold-500); --accent-2-hover: var(--gold-300); background-color: var(--bg); color: var(--text); color-scheme: dark; } /* DARK NOIR · variante hot para landing pública (Ashley Madison feel) */ .theme-noir { --bg: var(--noir-950); --bg-elevated: var(--noir-900); --bg-surface: var(--noir-800); --border: var(--bone-alpha-15); --border-strong:var(--bone-alpha-30); --text: var(--bone-50); --text-muted: var(--bone-200); --text-faint: var(--bone-400); --accent: var(--crimson-500); --accent-hover: var(--crimson-300); --accent-soft: var(--crimson-700); --accent-2: var(--velvet-300); --accent-2-hover: var(--crimson-200); background-color: var(--bg); color: var(--text); color-scheme: dark; } .theme-light { --bg: var(--paper-50); --bg-elevated: #FFFFFF; --bg-surface: var(--paper-100); --border: var(--paper-300); --border-strong:#B8AC97; --text: var(--ink-text); --text-muted: var(--ink-muted); --text-faint: var(--ink-faint); --accent: var(--wine-500); --accent-hover: var(--wine-700); --accent-soft: #F5E6E9; --accent-2: var(--gold-500); --accent-2-hover: #A78A5C; background-color: var(--bg); color: var(--text); color-scheme: light; } /* ============================================================ FOUNDATIONAL RESET (minimal — no normalize.css) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: var(--lh-body); font-feature-settings: "ss01", "cv11"; /* Inter: stylistic alternates */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; } a { color: inherit; text-decoration: none; } /* ============================================================ TYPOGRAPHIC PRIMITIVES Usables como utility classes en HTML ============================================================ */ .eyebrow { font-family: var(--font-sans); font-size: 0.75rem; /* 12px — sube de 11 para mejor lectura sobre dark */ font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-muted); /* sube de faint a muted: contraste AA */ } .display-1 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(56px, 11vw, 112px); line-height: var(--lh-display); letter-spacing: var(--track-display); color: var(--text); } .display-2 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(40px, 6vw, 72px); line-height: 1.0; letter-spacing: var(--track-display); color: var(--text); } .display-3 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 4vw, 36px); line-height: 1.3; color: var(--text); } .lead { font-family: var(--font-serif); font-weight: 400; font-style: normal; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45; color: var(--text-muted); max-width: var(--container-narrow); } .body { font-family: var(--font-sans); font-size: 16px; line-height: var(--lh-body); color: var(--text-muted); } .body-prose { font-family: var(--font-serif); font-size: 17px; line-height: var(--lh-prose); color: var(--text-muted); max-width: 65ch; } .caption { font-family: var(--font-sans); font-size: 12px; color: var(--text-faint); } /* ============================================================ COMPONENT PRIMITIVES ============================================================ */ /* Pill button — ghost (primario en dark) */ .btn-pill-ghost { display: inline-flex; align-items: center; gap: var(--s-2); padding: 18px 32px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.05em; color: var(--text); background: transparent; border: 1px solid var(--bone-alpha-60); border-radius: var(--r-pill); cursor: pointer; transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .theme-dark .btn-pill-ghost:hover { background: var(--bone-50); color: var(--ink-950); border-color: var(--bone-50); } .theme-light .btn-pill-ghost { border-color: var(--ink-text); } .theme-light .btn-pill-ghost:hover { background: var(--ink-text); color: var(--paper-50); } /* Underline link con offset */ .link-underline { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-muted); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: var(--bone-alpha-30); transition: color var(--dur-base) var(--ease-out), text-decoration-color var(--dur-base) var(--ease-out); } .link-underline:hover { color: var(--text); text-decoration-color: var(--text); } /* Hairline separator */ .hairline { border: 0; height: 1px; background: var(--border); margin: 0; } /* Accessibility — focus ring sin gritar */ :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; border-radius: var(--r-sm); } /* Motion respect */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Grain overlay para hero — aplicar a contenedor que lleve este modifier */ .grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: overlay; opacity: 0.06; z-index: 1; }