/** * OS TigerLab Design System v2 — TOKENS * Single source of truth para colores, espaciado, tipografía, sombras, z-index, radii, etc. * * Capas (de baja a alta abstracción): * 1. Primitive → valores crudos (color-emerald-500, space-4) * 2. Semantic → significado (color-bg-primary, color-text-default) * 3. Component → uso específico (btn-primary-bg, card-bg) * 4. Layout → estructura global (container-max, nav-h) * * Política de carga (UNA por plantilla; no mezclar sin motivo): * · Landing / checkout / legales / panel: después de styles.css (o panel.css). * Los tokens semánticos y aliases legacy ganan sobre el bloque :root inicial * del monolito; ver equivalencias más abajo. * · cursos/*.html (curso-intro): curso-intro.css primero (layout 800px), luego DS. * * Migración númerica legacy (--space-* en styles antes de aliases) ⇄ escala base 4px: * --space-5 viejos 24px ⇒ hoy alias --space-5 = --sp-5 (20px); rutas tipo * var(--space-24): var(--space-5) se re-bridgea abajo como --space-24: --sp-6. * * Light mode: aplica overrides semánticos. * Dark es default (data-theme="dark" o ausencia de atributo). */ /* ================================================================== */ /* CAPA 1 · PRIMITIVE TOKENS */ /* ================================================================== */ :root { /* ---- Color · Zinc (neutrals para backgrounds/borders/text) ---- */ --c-zinc-50: #FAFAFA; --c-zinc-100: #F5F5F5; --c-zinc-200: #E5E5E5; --c-zinc-300: #D4D4D4; --c-zinc-400: #A3A3A3; --c-zinc-500: #737373; --c-zinc-600: #525252; --c-zinc-700: #404040; --c-zinc-800: #262626; --c-zinc-900: #171717; --c-zinc-950: #0A0A0A; /* ---- Color · Emerald (accent primario, "OsTigerLab green") ---- */ --c-emerald-50: #ECFDF5; --c-emerald-100: #D1FADF; --c-emerald-200: #A7F3CC; --c-emerald-300: #6EE7B0; --c-emerald-400: #34D399; --c-emerald-500: #00FF9C; /* MARCA — accent canónico */ --c-emerald-600: #00E08A; --c-emerald-700: #00B47A; --c-emerald-800: #047857; --c-emerald-900: #065F46; --c-emerald-950: #022C22; /* ---- Color · Cyan (accent secundario "tech links") ---- */ --c-cyan-50: #ECFEFF; --c-cyan-100: #CFFAFE; --c-cyan-200: #A5F3FC; --c-cyan-300: #67E8F9; --c-cyan-400: #22D3EE; --c-cyan-500: #00B4FF; /* MARCA — accent secundario */ --c-cyan-600: #0891B2; --c-cyan-700: #0E7490; --c-cyan-800: #155E75; --c-cyan-900: #164E63; /* ---- Color · Amber (warning) ---- */ --c-amber-50: #FFFBEB; --c-amber-100: #FEF3C7; --c-amber-200: #FDE68A; --c-amber-300: #FCD34D; --c-amber-400: #FBBF24; --c-amber-500: #F59E0B; --c-amber-600: #D97706; --c-amber-700: #B45309; /* ---- Color · Red (danger) ---- */ --c-red-50: #FEF2F2; --c-red-100: #FEE2E2; --c-red-200: #FECACA; --c-red-300: #FCA5A5; --c-red-400: #F87171; --c-red-500: #EF4444; --c-red-600: #DC2626; --c-red-700: #B91C1C; /* ---- Color · Blue (info) ---- */ --c-blue-50: #EFF6FF; --c-blue-100: #DBEAFE; --c-blue-300: #93C5FD; --c-blue-500: #3B82F6; --c-blue-600: #2563EB; --c-blue-700: #1D4ED8; /* ---- Spacing scale base 4px (REDUCIDA: solo 14 valores) ---- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* ---- Radius scale (REDUCIDA: 4 valores) ---- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 9999px; /* ---- Border weights ---- */ --bw-1: 1px; --bw-2: 2px; --bw-4: 4px; /* ---- Shadow primitives (5 niveles) ---- */ --sh-1: 0 1px 2px rgba(0,0,0,.20); --sh-2: 0 2px 6px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.18); --sh-3: 0 6px 16px rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.20); --sh-4: 0 12px 28px rgba(0,0,0,.34), 0 4px 8px rgba(0,0,0,.22); --sh-5: 0 24px 48px rgba(0,0,0,.40), 0 8px 16px rgba(0,0,0,.26); --sh-ambient: 0 0 0 1px rgba(255,255,255,.04); /* ---- Z-index scale documentada ---- * Jerarquía explícita. Si añadís un componente flotante nuevo, * usá uno de estos tokens (no inventes números mágicos). * * base 1 : layer base (containers comunes) * sticky 100 : nav-sticky, headers sticky, curso-header * dropdown 500 : menús desplegables, popovers * fab 999 : botón flotante persistente (cookie FAB) — debajo de modales * modal 1000 : modales centrados, cookie-banner barra inferior * modal-stack 1001 : modal abierto SOBRE otro modal (cookie pref) * mp-overlay 2147483000 : reservado a SDK Mercado Pago (iframes) * toast 5000 : toasts/notifications standard * drawer 5200 : drawers laterales (notes-bookmarks) * drawer-cart 5300 : cart drawer (sobre drawer general) * toast-success 5500 : toast celebratorio (rewards) * spotlight 5700 : onboarding spotlight (sobre toasts; bajo confetti) * confetti 5800 : overlay de confetti (sobre todo lo anterior) * skip 9999 : skip-link accesibilidad (máxima prioridad lógica) */ --z-1: 1; --z-base: 1; --z-sticky: 100; --z-dropdown: 500; --z-fab: 999; --z-modal: 1000; --z-modal-stack: 1001; --z-mp-overlay: 2147483000; --z-toast: 5000; --z-drawer: 5200; --z-drawer-cart: 5300; --z-toast-success: 5500; --z-spotlight: 5700; --z-confetti: 5800; --z-skip: 9999; /* ---- Typography · Families ---- */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* ---- Typography · Modular scale (ratio 1.250 — Major Third) ---- */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: 1.875rem; /* 30px */ --fs-4xl: 2.25rem; /* 36px */ --fs-5xl: 3rem; /* 48px */ --fs-6xl: 3.75rem; /* 60px */ /* line-height pareado por tamaño */ --lh-xs: 1.5; --lh-sm: 1.5; --lh-base: 1.625; --lh-lg: 1.55; --lh-xl: 1.5; --lh-2xl: 1.4; --lh-3xl: 1.3; --lh-4xl: 1.2; --lh-5xl: 1.1; --lh-6xl: 1.05; /* letter-spacing pareado */ --ls-tight: -0.02em; --ls-base: 0; --ls-wide: 0.02em; --ls-wider: 0.04em; --ls-eyebrow: 0.08em; /* Pesos */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* Inter contextual features (ss01 = recortes alternos, cv11 = single-storey a) */ --font-features-body: "ss01" on, "cv11" on; /* ---- Breakpoints (también accesibles desde JS) ---- */ --bp-xs: 360px; --bp-sm: 640px; --bp-md: 960px; --bp-lg: 1280px; --bp-xl: 1536px; /* ---- Safe-area insets (mobile notches) ---- */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* ================================================================== */ /* CAPA 2 · SEMANTIC TOKENS · DEFAULT (DARK) */ /* ================================================================== */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Backgrounds */ --color-bg-primary: var(--c-zinc-950); /* #0A0A0A — body */ --color-bg-secondary: #0D0D0D; /* alternativa sutil */ --color-bg-elevated: var(--c-zinc-800); /* #262626 — cards/elevated */ --color-bg-muted: #161616; /* zonas muteadas */ --color-bg-overlay: rgba(0,0,0,0.72); /* modal backdrop */ --color-bg-glass: rgba(30,30,30,0.55); /* glass card */ /* Texto */ --color-text-primary: var(--c-zinc-100); /* #F5F5F5 */ --color-text-secondary: var(--c-zinc-300); /* #D4D4D4 */ --color-text-muted: var(--c-zinc-400); /* #A3A3A3 */ --color-text-disabled: var(--c-zinc-600); --color-text-inverse: var(--c-zinc-950); --color-text-on-accent: var(--c-zinc-950); /* sobre verde — negro para contraste */ /* Accent */ --color-accent: var(--c-emerald-500); /* #00FF9C */ --color-accent-hover: var(--c-emerald-600); /* #00E08A */ --color-accent-active: var(--c-emerald-700); --color-accent-soft: rgba(0,255,156,.12); --color-accent-ring: rgba(0,255,156,.32); --color-accent-2: var(--c-cyan-500); /* #00B4FF */ --color-accent-2-hover: var(--c-cyan-600); --color-accent-2-soft: rgba(0,180,255,.12); /* Estados semánticos */ --color-success: var(--c-emerald-500); --color-success-bg: rgba(0,255,156,.10); --color-success-border: rgba(0,255,156,.30); --color-warning: var(--c-amber-400); --color-warning-bg: rgba(251,191,36,.10); --color-warning-border: rgba(251,191,36,.30); --color-danger: var(--c-red-500); --color-danger-hover: var(--c-red-600); --color-danger-bg: rgba(239,68,68,.10); --color-danger-border: rgba(239,68,68,.30); --color-info: var(--c-cyan-500); --color-info-bg: rgba(0,180,255,.10); --color-info-border: rgba(0,180,255,.30); /* Bordes */ --color-border-subtle: rgba(245,245,245,.06); --color-border-default: rgba(245,245,245,.10); --color-border-strong: rgba(245,245,245,.16); --color-border-accent: rgba(0,255,156,.40); /* Focus ring (visible y consistente, AA compliant) */ --focus-ring-color: var(--c-emerald-500); --focus-ring-offset: 2px; --focus-ring-shadow: 0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-accent-ring); /* Shadows resolvers */ --shadow-1: var(--sh-1); --shadow-2: var(--sh-2); --shadow-3: var(--sh-3); --shadow-4: var(--sh-4); --shadow-5: var(--sh-5); /* Superficie de card: highlight superior (dark) */ --card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* ================================================================== */ /* CAPA 2 · SEMANTIC TOKENS · LIGHT MODE */ /* ================================================================== */ :root[data-theme="light"] { color-scheme: light; /* Backgrounds */ --color-bg-primary: #FFFFFF; --color-bg-secondary: #F7F7F7; --color-bg-elevated: #FFFFFF; --color-bg-muted: var(--c-zinc-100); --color-bg-overlay: rgba(15,15,15,0.45); --color-bg-glass: rgba(255,255,255,0.78); /* Texto (contraste AA verificado contra bg blanco) */ --color-text-primary: #0F0F0F; --color-text-secondary: var(--c-zinc-700); --color-text-muted: var(--c-zinc-500); --color-text-disabled: var(--c-zinc-400); --color-text-inverse: var(--c-zinc-50); --color-text-on-accent: #0A0A0A; /* Accent (en light, verde brillante #00FF9C falla AA → usamos emerald-700) */ --color-accent: var(--c-emerald-700); /* #00B47A — AA pass */ --color-accent-hover: var(--c-emerald-800); --color-accent-active: var(--c-emerald-900); --color-accent-soft: rgba(0,180,122,.10); --color-accent-ring: rgba(0,180,122,.28); --color-accent-2: var(--c-cyan-700); --color-accent-2-hover: var(--c-cyan-800); --color-accent-2-soft: rgba(14,116,144,.10); /* Estados (más oscuros para AA en light) */ --color-success: var(--c-emerald-700); --color-success-bg: rgba(0,180,122,.10); --color-success-border: rgba(0,180,122,.28); --color-warning: var(--c-amber-700); --color-warning-bg: rgba(180,83,9,.08); --color-warning-border: rgba(180,83,9,.24); --color-danger: var(--c-red-600); --color-danger-hover: var(--c-red-700); --color-danger-bg: rgba(220,38,38,.08); --color-danger-border: rgba(220,38,38,.24); --color-info: var(--c-blue-600); --color-info-bg: rgba(37,99,235,.08); --color-info-border: rgba(37,99,235,.24); /* Bordes (sobre fondos claros) */ --color-border-subtle: rgba(15,15,15,.06); --color-border-default: rgba(15,15,15,.10); --color-border-strong: rgba(15,15,15,.16); --color-border-accent: rgba(0,180,122,.40); /* Focus ring */ --focus-ring-color: var(--c-emerald-700); --focus-ring-shadow: 0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-accent-ring); /* Shadows en light: más sutiles */ --shadow-1: 0 1px 2px rgba(0,0,0,.06); --shadow-2: 0 2px 6px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow-3: 0 6px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06); --shadow-4: 0 12px 28px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06); --shadow-5: 0 24px 48px rgba(0,0,0,.14), 0 8px 16px rgba(0,0,0,.08); --card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.88); } /* Auto-switch a light si el usuario prefiere y NO seteó tema explícito */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --color-bg-primary: #FFFFFF; --color-bg-secondary: #F7F7F7; --color-bg-elevated: #FFFFFF; --color-bg-muted: var(--c-zinc-100); --color-bg-overlay: rgba(15,15,15,0.45); --color-bg-glass: rgba(255,255,255,0.78); --color-text-primary: #0F0F0F; --color-text-secondary: var(--c-zinc-700); --color-text-muted: var(--c-zinc-500); --color-text-on-accent: #0A0A0A; --color-accent: var(--c-emerald-700); --color-accent-hover: var(--c-emerald-800); --color-accent-soft: rgba(0,180,122,.10); --color-accent-ring: rgba(0,180,122,.28); --color-accent-2: var(--c-cyan-700); --color-success: var(--c-emerald-700); --color-warning: var(--c-amber-700); --color-danger: var(--c-red-600); --color-info: var(--c-blue-600); --color-border-subtle: rgba(15,15,15,.06); --color-border-default: rgba(15,15,15,.10); --color-border-strong: rgba(15,15,15,.16); --shadow-1: 0 1px 2px rgba(0,0,0,.06); --shadow-2: 0 2px 6px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow-3: 0 6px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06); --shadow-4: 0 12px 28px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06); --shadow-5: 0 24px 48px rgba(0,0,0,.14), 0 8px 16px rgba(0,0,0,.08); --card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.88); } } /* ================================================================== */ /* CAPA 3 · COMPONENT TOKENS */ /* ================================================================== */ :root { /* Button */ --btn-h-sm: 32px; --btn-h-md: 44px; --btn-h-lg: 52px; --btn-px-sm: var(--sp-3); --btn-px-md: var(--sp-5); --btn-px-lg: var(--sp-6); --btn-radius: var(--r-md); --btn-fs-sm: var(--fs-sm); --btn-fs-md: var(--fs-base); --btn-fs-lg: var(--fs-lg); /* Card */ --card-bg: var(--color-bg-elevated); --card-border: 1px solid var(--color-border-default); --card-radius: var(--r-lg); --card-padding: var(--sp-6); --card-shadow: var(--shadow-3); /* Input */ --input-h: 44px; --input-h-lg: 52px; --input-bg: var(--color-bg-elevated); --input-border: var(--color-border-default); --input-radius: var(--r-md); --input-px: var(--sp-4); /* Modal */ --modal-bg: var(--color-bg-elevated); --modal-radius: var(--r-lg); --modal-w-sm: 400px; --modal-w-md: 560px; --modal-w-lg: 800px; /* Toast */ --toast-bg: var(--color-bg-elevated); --toast-radius: var(--r-md); --toast-w: 360px; /* Tooltip */ --tooltip-bg: var(--c-zinc-100); --tooltip-fg: var(--c-zinc-950); --tooltip-radius: var(--r-sm); /* Dropdown */ --dropdown-bg: var(--color-bg-elevated); --dropdown-radius: var(--r-md); --dropdown-shadow: var(--shadow-3); /* Badge */ --badge-h: 22px; --badge-fs: var(--fs-xs); --badge-radius: var(--r-pill); --badge-px: var(--sp-2); } :root[data-theme="light"] { --tooltip-bg: var(--c-zinc-900); --tooltip-fg: var(--c-zinc-50); } /* ================================================================== */ /* CAPA 4 · LAYOUT TOKENS */ /* ================================================================== */ :root { --container-narrow: 480px; --container-prose: 720px; --container-max: 1200px; --container-wide: 1440px; --grid-cols: 12; --grid-gap: clamp(16px, 2vw, 24px); --nav-h: 66px; --nav-h-mobile: 62px; --footer-pad-y: var(--sp-12); } @media (max-width: 640px) { :root { --nav-h: var(--nav-h-mobile); } } /* ================================================================== */ /* ALIASES LEGACY (compat con styles.css existente) */ /* Estos mantienen funcionando el código viejo sin romper. */ /* DEPRECADOS: nuevo código debe usar tokens v2. */ /* ================================================================== */ :root { /* Bridge a tokens viejos */ --bg: var(--color-bg-primary); --bg-elevated: var(--color-bg-elevated); --bg-muted: var(--color-bg-muted); --bg-alt: var(--color-bg-secondary); --text: var(--color-text-primary); --text-muted: var(--color-text-muted); --text-soft: var(--color-text-secondary); --accent: var(--color-accent); --accent-sec: var(--color-accent-2); --accent-hover: var(--color-accent-hover); --border: var(--color-border-default); --border-soft: var(--color-border-subtle); --border-strong: var(--color-border-strong); /* Spacing legacy → reapuntados a la nueva escala */ --space-1: var(--sp-1); --space-2: var(--sp-2); --space-3: var(--sp-3); --space-4: var(--sp-4); --space-5: var(--sp-5); --space-6: var(--sp-6); --space-7: 36px; --space-8: var(--sp-12); --space-9: var(--sp-16); --space-xs: var(--sp-1); --space-sm: var(--sp-2); --space-md: var(--sp-4); --space-lg: var(--sp-5); --space-xl: var(--sp-6); /* Números heredados (evitan cadenas rotas tras remap 1–9 a --sp-*) */ --space-10: var(--sp-20); /* ~80px */ --space-11: var(--sp-24); /* ~96px */ --space-12: var(--sp-3); /* nombre confuso legacy = 12px */ --space-14: 0.875rem; --space-16: var(--sp-4); --space-18: 1.125rem; --space-20: 1.25rem; --space-24: var(--sp-6); --space-28: 1.75rem; --space-32: var(--sp-8); --space-36: 2.25rem; --space-40: var(--sp-10); --space-48: var(--sp-12); --space-56: 3.5rem; --space-64: var(--sp-16); --space-80: var(--sp-20); --space-96: var(--sp-24); /* Typography legacy ⇄ DS */ --font-heading: var(--font-display); /* Radius legacy */ --radius: var(--r-lg); --radius-xs: var(--r-sm); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); /* Shadows legacy */ --shadow-sm: var(--shadow-1); --shadow: var(--shadow-2); --shadow-md: var(--shadow-2); --shadow-lg: var(--shadow-3); --shadow-soft: var(--shadow-3); --shadow-card: var(--shadow-3); --shadow-hover: var(--shadow-3); }