/* ============================================================ DarCrist Design System — Tokens v1.0 Fuente única de verdad para colores, tipografía, espaciado, sombras, radios, z-index, transiciones y layout. Nunca editar valores directamente en los componentes, siempre usar estos tokens. ============================================================ */ :root { /* ── PALETA DE COLOR ──────────────────────────────────── */ /* Fondos */ --dc-bg: #07070e; --dc-bg-2: #0c0c1a; --dc-bg-3: #111122; --dc-surface: #16162a; --dc-surface-2: #1e1e35; --dc-surface-3: #252540; --dc-surface-4: #2d2d50; /* Acento gold (marca principal) */ --dc-gold: #c9a55a; --dc-gold-light: #e0b96a; --dc-gold-dark: #a8893a; --dc-gold-dim: rgba(201, 165, 90, 0.18); --dc-gold-glow: rgba(201, 165, 90, 0.30); /* Texto */ --dc-text: #f0f0f5; --dc-text-2: #c4c4d4; --dc-text-muted: #8888a8; --dc-text-faint: #55556a; --dc-text-inv: #07070e; /* Bordes / líneas */ --dc-line: rgba(255, 255, 255, 0.055); --dc-line-2: rgba(255, 255, 255, 0.10); --dc-line-3: rgba(255, 255, 255, 0.16); /* Pilares de negocio */ --dc-fab-accent: #c9a55a; /* Fabricación Digital */ --dc-wear-accent: #e8d5b0; /* DarCrist Wear */ /* Semánticos */ --dc-success: #22c55e; --dc-warning: #f59e0b; --dc-error: #ef4444; --dc-info: #3b82f6; /* Sociales */ --dc-wa: #25d366; --dc-tg: #0088cc; --dc-ig-from: #833ab4; --dc-ig-to: #fcb045; --dc-tt: #010101; /* ── TIPOGRAFÍA ───────────────────────────────────────── */ --dc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --dc-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; /* Escala de tamaño */ --dc-text-2xs: 0.625rem; /* 10px */ --dc-text-xs: 0.6875rem; /* 11px */ --dc-text-sm: 0.8125rem; /* 13px */ --dc-text-base: 1rem; /* 16px */ --dc-text-md: 1.0625rem; /* 17px */ --dc-text-lg: 1.125rem; /* 18px */ --dc-text-xl: 1.25rem; /* 20px */ --dc-text-2xl: 1.5rem; /* 24px */ --dc-text-3xl: 1.875rem; /* 30px */ --dc-text-4xl: 2.25rem; /* 36px */ --dc-text-5xl: 3rem; /* 48px */ --dc-text-6xl: 3.75rem; /* 60px */ --dc-text-7xl: 4.5rem; /* 72px */ --dc-text-8xl: 6rem; /* 96px */ /* Pesos */ --dc-fw-light: 300; --dc-fw-normal: 400; --dc-fw-medium: 500; --dc-fw-semi: 600; --dc-fw-bold: 700; --dc-fw-black: 900; /* Interlineado */ --dc-leading-none: 1.0; --dc-leading-tight: 1.15; --dc-leading-snug: 1.3; --dc-leading-normal: 1.6; --dc-leading-loose: 1.8; /* Tracking */ --dc-tracking-tight: -0.03em; --dc-tracking-snug: -0.02em; --dc-tracking-normal: 0; --dc-tracking-wide: 0.05em; --dc-tracking-wider: 0.10em; --dc-tracking-widest: 0.18em; /* ── ESPACIADO ────────────────────────────────────────── */ --dc-sp-0: 0; --dc-sp-px: 1px; --dc-sp-1: 0.25rem; /* 4px */ --dc-sp-2: 0.5rem; /* 8px */ --dc-sp-3: 0.75rem; /* 12px */ --dc-sp-4: 1rem; /* 16px */ --dc-sp-5: 1.25rem; /* 20px */ --dc-sp-6: 1.5rem; /* 24px */ --dc-sp-7: 1.75rem; /* 28px */ --dc-sp-8: 2rem; /* 32px */ --dc-sp-10: 2.5rem; /* 40px */ --dc-sp-12: 3rem; /* 48px */ --dc-sp-14: 3.5rem; /* 56px */ --dc-sp-16: 4rem; /* 64px */ --dc-sp-20: 5rem; /* 80px */ --dc-sp-24: 6rem; /* 96px */ --dc-sp-28: 7rem; /* 112px */ --dc-sp-32: 8rem; /* 128px */ --dc-sp-40: 10rem; /* 160px */ --dc-sp-48: 12rem; /* 192px */ /* ── RADIOS ───────────────────────────────────────────── */ --dc-r-xs: 3px; --dc-r-sm: 6px; --dc-r-md: 10px; --dc-r-lg: 14px; --dc-r-xl: 20px; --dc-r-2xl: 28px; --dc-r-3xl: 40px; --dc-r-full: 9999px; /* ── SOMBRAS ──────────────────────────────────────────── */ --dc-shadow-xs: 0 1px 3px rgba(0,0,0,0.25); --dc-shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --dc-shadow-md: 0 4px 20px rgba(0,0,0,0.45); --dc-shadow-lg: 0 8px 40px rgba(0,0,0,0.55); --dc-shadow-xl: 0 16px 64px rgba(0,0,0,0.65); --dc-shadow-2xl: 0 24px 80px rgba(0,0,0,0.70); --dc-shadow-gold: 0 0 32px rgba(201,165,90,0.25); --dc-shadow-gold-lg: 0 0 64px rgba(201,165,90,0.20); --dc-shadow-inner: inset 0 1px 0 rgba(255,255,255,0.06); /* ── TRANSICIONES ─────────────────────────────────────── */ --dc-ease: cubic-bezier(0.25, 0.1, 0.25, 1.0); --dc-ease-out: cubic-bezier(0.00, 0.0, 0.20, 1.0); --dc-ease-in: cubic-bezier(0.40, 0.0, 1.00, 1.0); --dc-ease-inout: cubic-bezier(0.40, 0.0, 0.20, 1.0); --dc-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --dc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1.0); --dc-dur-instant: 80ms; --dc-dur-fast: 150ms; --dc-dur-base: 250ms; --dc-dur-slow: 400ms; --dc-dur-slower: 600ms; --dc-dur-slowest: 900ms; /* Shorthands */ --dc-t-fast: var(--dc-dur-fast) var(--dc-ease-out); --dc-t-base: var(--dc-dur-base) var(--dc-ease-out); --dc-t-slow: var(--dc-dur-slow) var(--dc-ease-out); --dc-t-spring: var(--dc-dur-slow) var(--dc-ease-spring); /* ── Z-INDEX ──────────────────────────────────────────── */ --dc-z-below: -1; --dc-z-base: 0; --dc-z-raised: 10; --dc-z-float: 50; --dc-z-sticky: 100; --dc-z-overlay: 200; --dc-z-nav: 800; --dc-z-mega: 790; --dc-z-drawer: 900; --dc-z-modal: 1000; --dc-z-toast: 1100; --dc-z-cursor: 9999; /* Daria mantenida en 9000 para compatibilidad con main.js */ /* ── LAYOUT ───────────────────────────────────────────── */ --dc-container: 1280px; --dc-container-lg: 1120px; --dc-container-md: 960px; --dc-container-sm: 720px; --dc-container-xs: 560px; --dc-nav-h: 72px; --dc-nav-h-mobile: 60px; /* Gutter de sección */ --dc-section-px: clamp(1.25rem, 5vw, 4rem); --dc-section-py: clamp(4rem, 8vw, 7rem); } /* ── BREAKPOINTS (documentación, usar en @media) ────────── xs: 480px — móvil grande sm: 640px — tablet pequeña md: 768px — tablet lg: 1024px — desktop pequeño xl: 1280px — desktop 2xl:1536px — desktop grande ─────────────────────────────────────────────────────── */