@charset "UTF-8"; /* ============================================================================= * style.tokens.css · Joyería Acacio * Sistema de design tokens (variables CSS) — fuente única de verdad. * * ┌─ Paleta cromática (cálida, dark) * ├─ Escala tipográfica fluida (utopia.fyi · base 16 / max 20 · ratio 1.2) * ├─ Escala de espaciado (base 4, progresión 4·6·8·12·16·24·32·48·64·96) * ├─ Sombras (4 niveles + glow dorado) * ├─ Radios (xs … 2xl) * ├─ Easings + duraciones * ├─ Z-index (escala discreta 1·10·20·30·40·50·60·100·200·300) * └─ Container widths * * Compat: Safari 16+, Chrome 110+, Firefox 110+ (necesitamos color-mix y oklch). * El archivo se carga ANTES de style.css en el . * * NOTA: las variables legacy (--gold-soft, --gold-dim, --gold-faint, --shadow-md, etc.) * se MANTIENEN porque el JSX del bundle todavía las referencia. Internamente las * derivamos con color-mix() en lugar de copiar valores rgba a mano. * ============================================================================= */ :root { /* ─── 1. Paleta cromática base ───────────────────────────────────────────── * Toda la paleta vive en OKLCH lo más posible (mejor mezcla con color-mix). * Pero exponemos los hex como token primario porque el bundle JS los lee. */ /* Backgrounds */ --bg: #07070a; /* página */ --bg-2: #0b0b0d; /* header / footer / cards densas */ --panel: #141418; /* card primaria */ --panel-2: #1b1b21; /* card secundaria / glass */ --panel-3: #22222a; /* hover sutil */ /* Lines / borders (alpha sobre bg) */ --line: rgb(255 255 255 / 8%); --line-soft: rgb(255 255 255 / 5%); --line-gold: linear-gradient(90deg, transparent, color-mix(in oklch, var(--gold) 55%, transparent), transparent); /* Texto */ --text: #f5f1e8; /* base */ --muted: #b8b0a1; /* secundario, contrast 7.5:1 AAA */ /* ANTES: #7a7466 → ratio 4.2:1 (FALLA AA para <18px). * AHORA: #8a8270 → ratio 4.71:1 sobre #07070a (PASA AA). */ --muted-2: #8a8270; /* Oro — el alma del branding */ --gold: #d4af37; /* primario */ --gold-2: #e8c870; /* highlight (más claro) */ --gold-deep: #a88628; /* sombra (más oscuro) */ --gold-light: #f5e3a4; /* shimmer apex */ /* Derivados con color-mix(in oklch). Mantenemos los nombres legacy * (--gold-soft/--gold-dim/--gold-faint) porque el JSX los lee. * Las variantes --gold-a* son las que usa el CSS internamente. */ --gold-soft: color-mix(in oklch, var(--gold) 55%, transparent); --gold-dim: color-mix(in oklch, var(--gold) 25%, transparent); --gold-faint: color-mix(in oklch, var(--gold) 8%, transparent); --gold-ghost: color-mix(in oklch, var(--gold) 3%, transparent); /* Escala alfa del oro · uso interno frecuente */ --gold-a3: color-mix(in oklch, var(--gold) 3%, transparent); --gold-a5: color-mix(in oklch, var(--gold) 5%, transparent); --gold-a6: color-mix(in oklch, var(--gold) 6%, transparent); --gold-a8: color-mix(in oklch, var(--gold) 8%, transparent); --gold-a10: color-mix(in oklch, var(--gold) 10%, transparent); --gold-a14: color-mix(in oklch, var(--gold) 14%, transparent); --gold-a18: color-mix(in oklch, var(--gold) 18%, transparent); --gold-a20: color-mix(in oklch, var(--gold) 20%, transparent); --gold-a28: color-mix(in oklch, var(--gold) 28%, transparent); --gold-a30: color-mix(in oklch, var(--gold) 30%, transparent); --gold-a32: color-mix(in oklch, var(--gold) 32%, transparent); --gold-a40: color-mix(in oklch, var(--gold) 40%, transparent); --gold-a45: color-mix(in oklch, var(--gold) 45%, transparent); --gold-a55: color-mix(in oklch, var(--gold) 55%, transparent); --gold-a60: color-mix(in oklch, var(--gold) 60%, transparent); --gold-a70: color-mix(in oklch, var(--gold) 70%, transparent); /* Semánticos (estado) */ --ok: #41d795; --ok-soft: color-mix(in oklch, var(--ok) 10%, transparent); --warn: #f0a842; --warn-soft: color-mix(in oklch, var(--warn) 10%, transparent); --bad: #ff6b6b; --bad-soft: color-mix(in oklch, var(--bad) 10%, transparent); /* WhatsApp brand */ --wa-1: #25d366; --wa-2: #128c7e; /* ─── 2. Tipografía ──────────────────────────────────────────────────────── */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Escala fluida (genera con utopia.fyi · 16/20 · 1.2/1.333) * Cada step usa clamp(min, base + vw, max). Se ve igual en mobile 360px * y en desktop 1920px con transición suave entre ambos. */ --step--2: clamp(0.6944rem, 0.6664rem + 0.1399vw, 0.7813rem); /* 11.1 → 12.5px */ --step--1: clamp(0.8333rem, 0.7906rem + 0.2135vw, 0.9375rem); /* 13.3 → 15px */ --step-0: clamp(1rem, 0.9375rem + 0.3125vw, 1.125rem); /* 16 → 18px */ --step-1: clamp(1.2rem, 1.1086rem + 0.4570vw, 1.4063rem); /* 19.2 → 22.5px */ --step-2: clamp(1.44rem, 1.3098rem + 0.6511vw, 1.7578rem); /* 23 → 28px */ --step-3: clamp(1.728rem, 1.5453rem + 0.9134vw, 2.1973rem); /* 27.6 → 35px */ --step-4: clamp(2.0736rem, 1.8208rem + 1.2641vw, 2.7466rem); /* 33.2 → 44px */ --step-5: clamp(2.4883rem, 2.1404rem + 1.7395vw, 3.4332rem); /* 39.8 → 55px */ --step-6: clamp(2.9860rem, 2.5102rem + 2.3789vw, 4.2915rem); /* 47.8 → 69px */ /* Line-heights — los textos cortos = 1.1, los largos = 1.55 */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Letter-spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.16em; --tracking-widest: 0.22em; /* ─── 3. Espaciado (base 4) ──────────────────────────────────────────────── */ --space-3xs: 0.25rem; /* 4 */ --space-2xs: 0.375rem; /* 6 */ --space-xs: 0.5rem; /* 8 */ --space-sm: 0.75rem; /* 12 */ --space-md: 1rem; /* 16 */ --space-lg: 1.5rem; /* 24 */ --space-xl: 2rem; /* 32 */ --space-2xl: 3rem; /* 48 */ --space-3xl: 4rem; /* 64 */ --space-4xl: 6rem; /* 96 */ /* Section padding fluido */ --section-py: clamp(3rem, 7vw, 6rem); /* ─── 4. Sombras ─────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 3px rgb(0 0 0 / 0.4); --shadow-sm: 0 4px 18px rgb(0 0 0 / 0.4); --shadow-md: 0 12px 32px rgb(0 0 0 / 0.45); --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.55); --shadow-xl: 0 32px 80px rgb(0 0 0 / 0.65); --shadow-gold: 0 18px 60px color-mix(in oklch, var(--gold) 18%, transparent); --shadow-wa: 0 14px 40px color-mix(in oklch, var(--wa-1) 40%, transparent); /* Inner shadows reutilizables */ --shadow-inset-line: inset 0 1px 0 color-mix(in oklch, var(--gold-light) 12%, transparent); --shadow-focus-gold: 0 0 0 3px color-mix(in oklch, var(--gold) 22%, transparent); /* ─── 5. Radios ──────────────────────────────────────────────────────────── */ --radius-xs: 0.25rem; --radius-sm: 0.5rem; --radius-md: 0.85rem; --radius-lg: 1.25rem; --radius-xl: 1.65rem; --radius-2xl: 2rem; --radius-full: 9999px; /* ─── 6. Easings + duraciones ───────────────────────────────────────────── */ --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1); /* default UI */ --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);/* bounce sutil */ --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1); /* simétrico */ --ease-linear: linear; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 380ms; --dur-xslow: 700ms; /* ─── 7. Z-index — escala discreta. Nunca uses números fuera de aquí. ─── */ --z-base: 0; --z-content: 10; --z-sticky: 30; --z-header: 40; --z-overlay: 50; --z-fab: 60; --z-modal: 100; --z-lightbox: 200; --z-toast: 300; --z-skip: 1000; /* ─── 8. Container ──────────────────────────────────────────────────────── * --container se redefine por breakpoint en style.css. Aquí el default. */ --container: 84rem; --container-narrow: 56rem; --container-text: 42rem; /* ─── 9. Misc ───────────────────────────────────────────────────────────── * Color-scheme + accent-color para que widgets nativos (range, checkbox, * scrollbar de Firefox) usen el oro de la marca sin más config. */ color-scheme: dark; accent-color: var(--gold); } /* Forced colors mode (Windows High Contrast). Sobreescribir UNICAMENTE * los colores. Mantener radios/espaciados intactos. * No usamos `@media (forced-colors)` aquí — eso va en style.css. */