/* ============================================================ RR AUDIOCAR PRO — Design System Tokens ------------------------------------------------------------ ÚNICA fuente de verdad. Si un valor no está acá, NO se usa. Convención de nombres: --rrac-- ============================================================ */ :root { /* ============================================================ COLOR — Brand ============================================================ */ --rrac-brand-50: #fff1f2; --rrac-brand-100: #ffe1e3; --rrac-brand-200: #ffc8cd; --rrac-brand-300: #ffa0a8; --rrac-brand-400: #ff6973; --rrac-brand-500: #e63946; /* PRIMARY */ --rrac-brand-600: #cf2734; --rrac-brand-700: #ad1d29; --rrac-brand-800: #8f1d27; --rrac-brand-900: #5d1118; /* ============================================================ COLOR — Neutrals (slate cálido) ============================================================ */ --rrac-ink-0: #ffffff; --rrac-ink-25: #fcfcfd; --rrac-ink-50: #f7f8fa; --rrac-ink-100: #f0f2f5; --rrac-ink-200: #e4e7eb; --rrac-ink-300: #cdd2d9; --rrac-ink-400: #a3aab4; --rrac-ink-500: #767e8a; --rrac-ink-600: #555c67; --rrac-ink-700: #3a4049; --rrac-ink-800: #1f2329; --rrac-ink-900: #0b0d10; /* ============================================================ COLOR — Semánticos ============================================================ */ --rrac-success-50: #ecfdf5; --rrac-success-500: #10b981; --rrac-success-600: #059669; --rrac-success-700: #047857; --rrac-warning-50: #fffbeb; --rrac-warning-500: #f59e0b; --rrac-warning-600: #d97706; --rrac-danger-50: #fef2f2; --rrac-danger-500: #ef4444; --rrac-danger-600: #dc2626; --rrac-info-50: #eff6ff; --rrac-info-500: #3b82f6; --rrac-info-600: #2563eb; --rrac-ship-500: #00a650; /* envío gratis / cuotas */ --rrac-star-500: #fbbf24; /* ============================================================ ROLES SEMÁNTICOS — usar SIEMPRE estos, no los anteriores. ============================================================ */ --rrac-bg: var(--rrac-ink-50); --rrac-bg-subtle: var(--rrac-ink-100); --rrac-surface: var(--rrac-ink-0); --rrac-surface-alt: var(--rrac-ink-25); --rrac-border: var(--rrac-ink-200); --rrac-border-strong: var(--rrac-ink-300); --rrac-text: var(--rrac-ink-900); --rrac-text-soft: var(--rrac-ink-700); --rrac-text-muted: var(--rrac-ink-500); --rrac-text-inverse: var(--rrac-ink-0); --rrac-primary: var(--rrac-brand-500); --rrac-primary-hover: var(--rrac-brand-600); --rrac-primary-soft: var(--rrac-brand-50); --rrac-primary-stroke: var(--rrac-brand-100); --rrac-success: var(--rrac-success-500); --rrac-warning: var(--rrac-warning-500); --rrac-danger: var(--rrac-danger-500); --rrac-ship: var(--rrac-ship-500); /* ============================================================ TIPOGRAFÍA ============================================================ */ --rrac-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --rrac-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Escala modular (base 16px) */ --rrac-text-2xs: 11px; --rrac-text-xs: 12px; --rrac-text-sm: 13px; --rrac-text-base: 14px; --rrac-text-md: 15px; --rrac-text-lg: 16px; --rrac-text-xl: 18px; --rrac-text-2xl: 20px; --rrac-text-3xl: 24px; --rrac-text-4xl: 28px; --rrac-text-5xl: 32px; --rrac-text-6xl: 40px; --rrac-text-7xl: 48px; --rrac-text-8xl: 60px; --rrac-weight-regular: 400; --rrac-weight-medium: 500; --rrac-weight-semibold: 600; --rrac-weight-bold: 700; --rrac-weight-black: 800; --rrac-leading-none: 1; --rrac-leading-tight: 1.15; --rrac-leading-snug: 1.3; --rrac-leading-normal: 1.5; --rrac-leading-relaxed: 1.65; --rrac-tracking-tighter: -0.04em; --rrac-tracking-tight: -0.02em; --rrac-tracking-normal: 0; --rrac-tracking-wide: 0.02em; --rrac-tracking-wider: 0.06em; /* ============================================================ SPACING (base 4px) ============================================================ */ --rrac-space-0: 0; --rrac-space-1: 4px; --rrac-space-2: 8px; --rrac-space-3: 12px; --rrac-space-4: 16px; --rrac-space-5: 20px; --rrac-space-6: 24px; --rrac-space-7: 28px; --rrac-space-8: 32px; --rrac-space-10: 40px; --rrac-space-12: 48px; --rrac-space-14: 56px; --rrac-space-16: 64px; --rrac-space-20: 80px; --rrac-space-24: 96px; --rrac-space-32: 128px; /* ============================================================ RADIUS ============================================================ */ --rrac-radius-none: 0; --rrac-radius-xs: 2px; --rrac-radius-sm: 4px; --rrac-radius-md: 6px; --rrac-radius-lg: 8px; --rrac-radius-xl: 12px; --rrac-radius-2xl: 16px; --rrac-radius-3xl: 20px; --rrac-radius-4xl: 24px; --rrac-radius-full: 9999px; /* ============================================================ SHADOWS — sistema layered tipo Apple ============================================================ */ --rrac-shadow-xs: 0 1px 2px 0 rgba(11, 13, 16, 0.04); --rrac-shadow-sm: 0 1px 2px 0 rgba(11, 13, 16, 0.05), 0 1px 3px 0 rgba(11, 13, 16, 0.06); --rrac-shadow-md: 0 2px 4px -1px rgba(11, 13, 16, 0.06), 0 4px 12px -2px rgba(11, 13, 16, 0.08); --rrac-shadow-lg: 0 4px 6px -1px rgba(11, 13, 16, 0.06), 0 12px 24px -8px rgba(11, 13, 16, 0.12); --rrac-shadow-xl: 0 8px 12px -4px rgba(11, 13, 16, 0.08), 0 24px 40px -12px rgba(11, 13, 16, 0.16); --rrac-shadow-2xl: 0 16px 32px -8px rgba(11, 13, 16, 0.12), 0 32px 64px -16px rgba(11, 13, 16, 0.24); --rrac-shadow-brand-sm: 0 1px 2px 0 rgba(230, 57, 70, 0.18), 0 2px 6px -1px rgba(230, 57, 70, 0.20); --rrac-shadow-brand-md: 0 4px 10px -2px rgba(230, 57, 70, 0.22), 0 8px 20px -4px rgba(230, 57, 70, 0.18); --rrac-shadow-inset-sm: inset 0 1px 2px 0 rgba(11, 13, 16, 0.06); --rrac-ring-brand: 0 0 0 3px rgba(230, 57, 70, 0.22); --rrac-ring-info: 0 0 0 3px rgba(59, 130, 246, 0.22); /* ============================================================ MOTION ============================================================ */ --rrac-ease-linear: linear; --rrac-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --rrac-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --rrac-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --rrac-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --rrac-dur-instant: 80ms; --rrac-dur-fast: 150ms; --rrac-dur-base: 220ms; --rrac-dur-slow: 320ms; --rrac-dur-slower: 480ms; /* ============================================================ Z-INDEX ============================================================ */ --rrac-z-base: 0; --rrac-z-raised: 1; --rrac-z-dropdown: 10; --rrac-z-sticky: 20; --rrac-z-fixed: 30; --rrac-z-overlay: 40; --rrac-z-modal: 50; --rrac-z-popover: 60; --rrac-z-toast: 70; --rrac-z-tooltip: 80; --rrac-z-max: 99; /* ============================================================ LAYOUT ============================================================ */ --rrac-container-sm: 640px; --rrac-container-md: 768px; --rrac-container-lg: 1024px; --rrac-container-xl: 1200px; --rrac-container-2xl: 1280px; --rrac-container-3xl: 1440px; --rrac-container: 1280px; /* default */ --rrac-gutter-mobile: 16px; --rrac-gutter-tablet: 24px; --rrac-gutter-desktop: 32px; /* ============================================================ COMPONENTES — tokens compartidos ============================================================ */ --rrac-btn-h-sm: 32px; --rrac-btn-h-md: 40px; --rrac-btn-h-lg: 48px; --rrac-btn-h-xl: 56px; --rrac-input-h: 44px; --rrac-input-radius: var(--rrac-radius-xl); --rrac-input-border: var(--rrac-border); --rrac-card-radius: var(--rrac-radius-2xl); --rrac-card-padding: var(--rrac-space-5); --rrac-drawer-w: 420px; --rrac-drawer-shadow: var(--rrac-shadow-2xl); --rrac-overlay-bg: rgba(11, 13, 16, 0.55); --rrac-header-h: 72px; --rrac-header-bg: rgba(255, 255, 255, 0.85); --rrac-header-blur: saturate(180%) blur(14px); } /* ============================================================ DARK MODE — preparado, no activado. Para activar: ============================================================ */ /* [data-theme="dark"] { --rrac-bg: var(--rrac-ink-900); --rrac-bg-subtle: var(--rrac-ink-800); --rrac-surface: var(--rrac-ink-800); --rrac-surface-alt: var(--rrac-ink-700); --rrac-border: var(--rrac-ink-700); --rrac-border-strong: var(--rrac-ink-600); --rrac-text: var(--rrac-ink-25); --rrac-text-soft: var(--rrac-ink-200); --rrac-text-muted: var(--rrac-ink-400); --rrac-text-inverse: var(--rrac-ink-900); --rrac-header-bg: rgba(11, 13, 16, 0.85); } */