/* ============================================================================ De.Bi — Design Tokens (FUENTE DE VERDAD · color de marca) CSS nativo, sin build. Cada color de marca es el paso -500 de su escala. ---------------------------------------------------------------------------- 3 niveles: Primitivos → Semánticos → Componentes. Este archivo da servicio tanto a base.css (nombres largos: --font-weight-*, --font-size-*) como a components.css portado del prototipo (nombres cortos: --fw-*, --fs-*, --lh-*). Ambos conviven como alias de los mismos valores. Migración desde el prototipo en gris: solo cambiaron los PRIMITIVOS; los semánticos y componentes conservan sus nombres. Por eso el front estilizado es el mismo markup del prototipo apuntando a estos tokens. ============================================================================ */ :root { /* === PRIMITIVOS ========================================================= */ /* --- Índigo (Chakra Corona / primario · SOLO texto y contraste) -------- */ --color-indigo-50: #EEEBF5; --color-indigo-100: #D5CEE7; --color-indigo-200: #B0A4D0; --color-indigo-300: #8B7AB8; --color-indigo-400: #63509F; --color-indigo-500: #3B2A70; /* ← MARCA */ --color-indigo-600: #33245F; --color-indigo-700: #291D4C; --color-indigo-800: #1F1639; --color-indigo-900: #150F26; /* --- Lima (Chakra Raíz / secundario · energía, interacción) ------------ */ --color-lima-50: #FBFBE1; --color-lima-100: #F6F7B5; --color-lima-200: #EFF17C; --color-lima-300: #E7EB47; --color-lima-400: #E0E52E; --color-lima-500: #D8DC13; /* ← MARCA */ --color-lima-600: #B4B80F; --color-lima-700: #8C900C; --color-lima-800: #656808; --color-lima-900: #3E4005; /* --- Rosa (acento expresivo) ------------------------------------------- */ --color-rosa-50: #FEF0FC; --color-rosa-100: #FEDBF8; --color-rosa-200: #FDBDF2; --color-rosa-300: #FCA8EE; --color-rosa-400: #FB9DEB; --color-rosa-500: #FB92E8; /* ← MARCA */ --color-rosa-600: #E869D2; --color-rosa-700: #C544AF; --color-rosa-800: #93317F; --color-rosa-900: #5E1F51; /* --- Crema (lienzo cálido principal) ----------------------------------- */ --color-crema-500: #FDEDD4; /* ← MARCA */ /* --- Arena (neutro cálido; Crema vira a esta escala) ------------------- */ --color-arena-50: #FAF8F5; --color-arena-100: #F0EBE4; --color-arena-200: #E2DBD0; --color-arena-300: #C9C0B2; --color-arena-400: #A89E8D; --color-arena-500: #857B6B; --color-arena-600: #655D50; --color-arena-700: #47413A; --color-arena-800: #302B25; --color-arena-900: #1F1C18; --color-white: #ffffff; /* === SEMÁNTICOS: propósito de uso ====================================== */ --bg-canvas: var(--color-white); --bg-surface: var(--color-arena-50); --bg-surface-2: var(--color-crema-500); /* crema cálida para alternar secciones */ --bg-inverse: var(--color-indigo-500); /* bloques contenidos (footer/promo), no secciones amplias */ --bg-promo: var(--color-indigo-600); --text-primary: var(--color-indigo-500); --text-secondary: var(--color-indigo-700); --text-muted: var(--color-arena-600); --text-on-inverse: var(--color-crema-500); --text-price: var(--color-indigo-500); --text-sale: var(--color-arena-600); --accent: var(--color-rosa-500); /* Focus visible en Índigo (no Rosa): Rosa sobre fondos claros no alcanza el 3:1 que WCAG pide para indicadores de UI. a11y > doctrina de color aquí. */ --focus-ring: var(--color-indigo-500); --border-subtle: var(--color-arena-200); --border-strong: var(--color-arena-400); --border-ink: var(--color-indigo-500); /* === COMPONENTES: ámbito UI ============================================ */ --header-bg: var(--color-white); --header-border: var(--color-arena-200); /* Botón primario = Índigo (consistente con brand/index.html y base.css). Si se prefiere la doctrina "Lima = acción" del BRAND_CONTEXT, cambiar solo estas 2 líneas: bg → var(--color-lima-500); text → var(--color-indigo-500). */ --button-primary-bg: var(--color-indigo-500); --button-primary-text: var(--color-crema-500); --button-primary-hover: var(--color-indigo-600); --button-primary-bg-hover: var(--color-indigo-600); /* alias usado por base.css */ --button-ghost-bg: transparent; --button-ghost-text: var(--color-indigo-500); --button-ghost-border: var(--color-indigo-500); --card-bg: var(--color-white); --card-border: var(--color-arena-200); --placeholder-bg: var(--color-arena-100); --placeholder-line: var(--color-arena-300); --chip-bg: var(--color-arena-100); --chip-active-bg: var(--color-indigo-500); --chip-active-text: var(--color-crema-500); --swatch-ring: var(--color-indigo-500); /* === TIPOGRAFÍA: familia ÚNICA Outfit (nunca serif) ==================== */ --font-family-base: 'Outfit', system-ui, -apple-system, sans-serif; /* Nombres largos (base.css) */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-heading: 1.14; --line-height-body: 1.55; /* Alias cortos (components.css portado del prototipo) */ --fw-light: var(--font-weight-light); --fw-regular: var(--font-weight-regular); --fw-medium: var(--font-weight-medium); --fw-semibold: var(--font-weight-semibold); --fw-bold: var(--font-weight-bold); --lh-heading: var(--line-height-heading); --lh-body: var(--line-height-body); --tracking-caps: 0.14em; /* === ESCALA TIPOGRÁFICA ================================================ */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.25rem; --font-size-xl: 1.75rem; --font-size-2xl: 2.5rem; --font-size-3xl: clamp(2.5rem, 6vw, 4rem); --fs-xs: var(--font-size-xs); --fs-sm: var(--font-size-sm); --fs-md: var(--font-size-md); --fs-lg: var(--font-size-lg); --fs-xl: var(--font-size-xl); --fs-2xl: var(--font-size-2xl); --fs-3xl: var(--font-size-3xl); /* === ESPACIADO / RADIOS / SOMBRAS ====================================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem; --space-7: 6rem; /* Radios de MARCA (geometría orgánica, curvas fluidas). */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-pill: 999px; --radius-btn: var(--radius-pill); /* botones pill, como brand/index.html */ --shadow-sm: 0 1px 2px rgba(59, 42, 112, .06); --shadow-md: 0 10px 30px rgba(59, 42, 112, .08); --container: 1240px; --header-h: 116px; }