/* ============================================================ PROSIAR · Design Tokens Plataforma de preparación Saber 11 Variables CSS listas para :root — incluye estados y modo oscuro. ============================================================ */ :root { /* ---------- Color · base (roles) ---------- */ --color-bg: #F3EDE1; /* Arena · fondo cálido */ --color-surface: #FFFFFF; /* Tarjetas / superficies */ --color-surface-sunken: #FAF4E8; /* Superficie hundida */ --color-text: #14322A; /* Verde tinta · texto */ --color-text-muted: #5A6F67; /* Texto secundario */ --color-border: #E0D9CA; /* Bordes / divisores */ --color-primary: #1B6B57; /* Verde profundo · identidad */ --color-secondary: #2FA882; /* Verde vivo · progreso */ --color-accent: #E8693B; /* Coral · la chispa (uso mínimo) */ /* ---------- Color · estados ---------- */ /* Primario */ --color-primary-hover: #1A6250; --color-primary-active: #195848; --color-primary-disabled-bg: #DCE7E2; --color-primary-disabled-fg: #9FB2AA; --color-on-primary: #FFFFFF; /* Secundario (texto oscuro para cumplir AA) */ --color-secondary-hover: #289674; --color-secondary-active: #237A5C; --color-secondary-disabled-bg: #DEEFE6; --color-secondary-disabled-fg: #9FB2AA; --color-on-secondary: #14322A; /* Acento coral · botón usa la versión fuerte (AA texto grande) */ --color-accent-strong: #C66B38; --color-accent-hover: #A85635; --color-accent-active: #8F4B2F; --color-accent-disabled-bg: #F8E6DC; --color-accent-disabled-fg: #C9A692; --color-on-accent: #FFFFFF; /* ---------- Color · semántico ---------- */ --color-success: #2F9E70; --color-success-soft: #E0F0E8; --color-success-text: #216B4E; --color-attention: #DDA63A; /* Ámbar cálido · nunca rojo de alarma */ --color-attention-soft: #F7EDD6; --color-attention-text: #8A6A1E; --color-info: #1B6B57; --color-info-soft: #E3EDEA; --color-care: #C76B4E; /* Error sereno · terracota apagada */ --color-care-soft: #F3E2DA; /* ---------- Tipografía · familias ---------- */ --font-display: 'Poppins', system-ui, sans-serif; /* Títulos */ --font-body: 'Inter', system-ui, sans-serif; /* Texto / enunciados */ /* Pesos */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Tamaños (escala modular 1.25 · base 16) */ --text-display: 39px; --text-h1: 31px; --text-h2: 25px; --text-h3: 21px; --text-h4: 18px; --text-body-l: 19px; /* enunciados largos */ --text-body: 16px; --text-body-s: 14px; --text-caption: 13px; --text-label: 13px; --text-button: 16px; /* Interlineado */ --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.25; --leading-reading: 1.6; /* enunciados */ --leading-body: 1.65; /* ---------- Espaciado · base 4 px ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---------- Radios ---------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; /* ---------- Sombras · suaves ---------- */ --shadow-sm: 0 1px 2px rgba(20, 50, 42, 0.06); --shadow-md: 0 4px 16px rgba(20, 50, 42, 0.08); --shadow-lg: 0 12px 32px rgba(20, 50, 42, 0.10); } /* ============================================================ Modo oscuro — activar con ============================================================ */ [data-theme="dark"] { /* Base */ --color-bg: #0E2A22; --color-surface: #14322A; --color-surface-raised: #173E33; --color-surface-sunken: #0B221C; --color-text: #ECF3EF; --color-text-muted: #8F9C97; --color-border: #1C5343; --color-primary: #3BAD8A; --color-secondary: #2FA882; --color-accent: #EC845E; /* Estados */ --color-primary-hover: #49BE99; --color-primary-active: #34A07E; --color-primary-disabled-bg: #1B3B31; --color-primary-disabled-fg: #56736A; --color-on-primary: #0E2A22; --color-secondary-hover: #46BC97; --color-secondary-active: #2A9074; --color-on-secondary: #0E2A22; --color-accent-strong: #EC845E; --color-accent-hover: #F0966F; --color-accent-active: #D9744F; --color-on-accent: #0E2A22; /* Semántico */ --color-success: #46B583; --color-success-soft: #17342A; --color-success-text: #8FE0C2; --color-attention: #E6B656; --color-attention-soft: #33301E; --color-attention-text: #E6B656; --color-info: #3BAD8A; --color-info-soft: #17342A; --color-care: #DE9070; --color-care-soft: #33231C; /* Sombras (más marcadas sobre fondo oscuro) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); }