/* ============================================================ TOKENS — tres niveles Nivel 1: primitivos | Nivel 2: semánticos | Nivel 3: componente Regla: los componentes solo usan tokens de nivel 2 o 3. ============================================================ */ :root { /* ── Nivel 1: Primitivos ── */ /* Escala de color ink */ --color-ink: #1a1a1a; --color-ink-rgb: 26, 26, 26; --color-ink-94: rgba(26, 26, 26, 0.94); --color-ink-80: rgba(26, 26, 26, 0.80); --color-ink-70: rgba(26, 26, 26, 0.70); --color-ink-60: rgba(26, 26, 26, 0.60); --color-ink-40: rgba(26, 26, 26, 0.40); --color-ink-20: rgba(26, 26, 26, 0.20); --color-ink-10: rgba(26, 26, 26, 0.10); /* Escala de blanco */ --color-white: #ffffff; --color-white-92: rgba(255, 255, 255, 0.92); --color-white-70: rgba(255, 255, 255, 0.70); --color-white-65: rgba(255, 255, 255, 0.65); --color-white-55: rgba(255, 255, 255, 0.55); --color-white-35: rgba(255, 255, 255, 0.35); --color-white-30: rgba(255, 255, 255, 0.30); --color-white-28: rgba(255, 255, 255, 0.28); --color-white-25: rgba(255, 255, 255, 0.25); --color-white-20: rgba(255, 255, 255, 0.20); --color-white-18: rgba(255, 255, 255, 0.18); --color-white-15: rgba(255, 255, 255, 0.15); --color-white-12: rgba(255, 255, 255, 0.12); --color-white-10: rgba(255, 255, 255, 0.10); --color-white-08: rgba(255, 255, 255, 0.08); /* Superficies */ --color-bg: #f0ede6; --color-bg-alt: #e8e4db; /* Acento */ --color-rose: #ffc5d3; --color-rose-75: rgba(255, 197, 211, 0.75); --color-rose-70: rgba(255, 197, 211, 0.70); --color-rose-dim: rgba(255, 197, 211, 0.15); /* Slot de acento — cambiá solo esto para migrar a otro color */ --color-accent: var(--color-rose); --color-accent-75: var(--color-rose-75); --color-accent-70: var(--color-rose-70); --color-accent-dim: var(--color-rose-dim); /* Radio */ --radius-1: 4px; --radius-2: 8px; --radius-3: 12px; --radius-4: 16px; --radius-full: 100px; /* Z-index — escala nombrada por rol */ --z-base: 1; /* elementos levantados dentro de un componente */ --z-raised: 10; /* cards, tooltips flotantes */ --z-dropdown: 50; /* menús desplegables */ --z-nav: 100; /* navegación sticky */ --z-overlay: 200; /* overlays de página */ --z-modal: 300; /* modales */ --z-toast: 400; /* notificaciones sobre todo */ /* Breakpoints — referencia (no usables en @media sin PostCSS) */ /* --bp-sm: 600px — tablet portrait */ /* --bp-md: 900px — tablet landscape */ /* --bp-lg: 1280px — desktop */ /* Espaciado — base 4px, escala Tailwind (número = unidades de 4px) */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-30: 7.5rem; /* 120px */ /* Tipografías */ --font-sans: 'DM Sans', sans-serif; --font-display: 'Bricolage Grotesque', sans-serif; --font-serif: 'Lora', serif; /* Font weights — 4 valores usados en BORR */ --fw-regular: 400; /* cuerpo */ --fw-medium: 500; /* UI, etiquetas */ --fw-bold: 700; /* énfasis, nav */ --fw-extrabold: 800; /* display, headings */ /* Line heights — escala Material/Tailwind adaptada */ --lh-tight: 1.1; /* display, headings grandes */ --lh-snug: 1.3; /* sub-headings */ --lh-base: 1.5; /* UI labels, captions */ --lh-relaxed: 1.6; /* cuerpo, párrafos */ --lh-loose: 1.75; /* bloques de texto extenso */ /* Easing */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Duración — referencia HIG/Material */ --duration-fast: 100ms; /* hover, focus rings */ --duration-base: 200ms; /* mayoría de transiciones */ --duration-slow: 400ms; /* entradas, expansiones */ --duration-very-slow: 800ms; /* reveal animations */ /* Escala tipográfica — 7 pasos */ --fs-2xs: 0.625rem; /* 10px — decorativo puro */ --fs-xs: 0.6875rem; /* 11px — etiquetas, badges, nav */ --fs-sm: 0.75rem; /* 12px — texto secundario */ --fs-caption: 0.875rem; /* 14px — bullets, captions */ --fs-base: 1rem; /* 16px — cuerpo principal */ --fs-md: 1.125rem; /* 18px — énfasis, precios */ --fs-2xl: 2rem; /* 32px — pull quote */ /* ── Nivel 2: Semánticos ── */ /* Texto sobre fondo claro */ --text: var(--color-ink); --text-secondary: var(--color-ink-80); --text-muted: var(--color-ink-70); /* Texto sobre fondo oscuro */ --text-on-dark: var(--color-white); --text-on-dark-secondary: var(--color-white-70); --text-on-dark-muted: var(--color-white-55); --text-on-dark-strong: var(--color-white-92); /* Texto acento */ --text-accent: var(--color-accent); --text-accent-on-dark: var(--color-accent-75); --text-accent-dim: var(--color-accent-70); /* Superficies */ --surface: var(--color-bg); --surface-alt: var(--color-bg-alt); --surface-dark: var(--color-ink); --surface-white: var(--color-white); --surface-accent: var(--color-accent-dim); /* Bordes */ --border-subtle: var(--color-ink-10); --border-medium: var(--color-ink-20); --border-strong: var(--color-white-55); /* borde visible sobre fondos oscuros */ /* Espaciado semántico — alias por rol, no por tamaño */ --space-xs: var(--space-2); /* 8px — gaps mínimos, separadores */ --space-sm: var(--space-4); /* 16px — padding interno de componente */ --space-md: var(--space-6); /* 24px — gap entre elementos */ --space-lg: var(--space-10); /* 40px — separación entre grupos */ --space-xl: var(--space-16); /* 64px — padding de sección */ --space-2xl: var(--space-24); /* 96px — separación entre secciones */ --space-3xl: var(--space-30); /* 120px — padding macro */ /* Sizing semántico */ --radius-sm: var(--radius-2); --radius-md: var(--radius-3); --radius-lg: var(--radius-4); --radius-btn: var(--radius-full); /* Roles tipográficos globales */ --font: var(--font-sans); --ease: var(--ease-standard); /* Sombras — elevación */ --shadow-subtle: 0 1px 3px rgba(var(--color-ink-rgb),0.08); --shadow-medium: 0 4px 12px rgba(var(--color-ink-rgb),0.12); --shadow-pronounced: 0 8px 24px rgba(var(--color-ink-rgb),0.16); --shadow-xl: 0 16px 48px rgba(var(--color-ink-rgb),0.20); /* modales, drawers */ /* Sombras — estados */ --shadow-inset: inset 0 1px 3px rgba(var(--color-ink-rgb),0.08); /* pressed, inputs */ --shadow-accent: 0 4px 16px rgba(255,197,211,0.25); /* glow de acento */ /* Glassmorphism — valores primitivos */ --glass-blur: 12px; --glass-blur-sm: 6px; --glass-blur-lg: 24px; /* Glass sobre fondo oscuro — cards, panels sobre dark o imagen */ --glass-dark-bg: var(--color-white-10); --glass-dark-bg-hover: rgba(255,255,255,0.16); /* valor único sin alias de escala */ --glass-dark-border: var(--color-white-18); /* Glass sobre fondo claro — nav, drawers sobre sand */ --glass-light-bg: rgba(240,237,230,0.85); --glass-light-border: rgba(var(--color-ink-rgb),0.08); /* ── Nivel 3: Componente ── */ --btn-radius: var(--radius-btn); --btn-font-size: var(--fs-xs); --btn-letter-spacing: 0.22em; } /* ── Dark mode — overrides semánticos ── */ [data-theme="dark"] { --text: var(--color-white); --text-secondary: var(--color-white-70); --text-muted: var(--color-white-55); --surface: #111111; --surface-alt: rgba(255,255,255,0.06); --surface-white: rgba(255,255,255,0.09); --surface-dark: #000000; --surface-accent: rgba(255,197,211,0.08); --border-subtle: rgba(255,255,255,0.08); --border-medium: rgba(255,255,255,0.16); --shadow-subtle: 0 1px 3px rgba(0,0,0,0.30); --shadow-medium: 0 4px 12px rgba(0,0,0,0.40); --shadow-pronounced: 0 8px 24px rgba(0,0,0,0.50); --shadow-xl: 0 16px 48px rgba(0,0,0,0.60); color-scheme: dark; }