/* ============================================================================ QuantumPrize — Design Tokens (v0) ---------------------------------------------------------------------------- Drop-in re-tematización del DS de Prexio. Mismas variables semánticas + extras propias de pricing intelligence (price-up/down/flat, score scale). Light por defecto SIEMPRE. Dark sólo si pongo [data-theme="dark"] en el . ============================================================================ */ :root { /* ── Surfaces — neutros fríos (zinc), data-friendly ─────────────────── */ --bg: #fafafa; --surface: #ffffff; --surface-2: #f4f4f5; --surface-3: #e4e4e7; /* ── Text — escala zinc, sharper que warm-grays de Prexio ───────────── */ --text: #09090b; --text-2: #3f3f46; --text-3: #71717a; --text-4: #a1a1aa; /* ── Borders & dividers ─────────────────────────────────────────────── */ --border: rgba(9, 9, 11, 0.08); --border-strong: rgba(9, 9, 11, 0.14); --divider: rgba(9, 9, 11, 0.05); /* ── Brand — crimson confiado tipo Stripe/Bloomberg ─────────────────── */ --accent: #B91C1C; --accent-hover: #991B1B; --accent-soft: rgba(185, 28, 28, 0.08); --accent-tint: rgba(185, 28, 28, 0.04); /* ── Estados semánticos generales ───────────────────────────────────── */ --success: #16A34A; --success-soft: rgba(22, 163, 74, 0.10); --warning: #F59E0B; --warning-soft: rgba(245, 158, 11, 0.10); --danger: #DC2626; --danger-soft: rgba(220, 38, 38, 0.10); --info: #2563EB; --info-soft: rgba(37, 99, 235, 0.10); /* ── Semánticas de PRECIO — deliberadamente separadas del brand ─────── */ --price-up: #EF4444; /* subió */ --price-up-soft: rgba(239, 68, 68, 0.10); --price-down: #16A34A; /* bajó */ --price-down-soft: rgba(22, 163, 74, 0.10); --flat: #71717a; /* sin cambio */ --flat-soft: rgba(113, 113, 122, 0.10); --volatility-hot: #F97316; /* price war, anomalía */ --volatility-soft: rgba(249, 115, 22, 0.10); /* ── Score scale (Deal/Promo/Stability/Match/etc — Lighthouse-style) ── */ --score-excellent: #16A34A; /* ≥ 80 */ --score-good: #84CC16; /* 60-79 */ --score-warn: #F59E0B; /* 40-59 */ --score-bad: #EF4444; /* < 40 */ /* ── Shadows — mínimas, "instrumento" no "tarjeta flotante" ─────────── */ --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.05); --shadow-sm: 0 1px 3px rgba(9, 9, 11, 0.06), 0 1px 2px rgba(9, 9, 11, 0.04); --shadow-md: 0 4px 12px rgba(9, 9, 11, 0.06), 0 2px 4px rgba(9, 9, 11, 0.03); /* ── Radius — un escalón más angular que Prexio ─────────────────────── */ --r-xs: 4px; --r-sm: 6px; /* botones, inputs, chips */ --r-md: 8px; /* cards */ --r-lg: 12px; /* modales */ --r-pill: 999px; /* ── Typography ─────────────────────────────────────────────────────── */ --font: 'Google Sans Flex', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, monospace; /* ── Layout shell ───────────────────────────────────────────────────── */ --shell-header-h: 56px; --shell-sidebar-w: 240px; --shell-sidebar-w-collapsed: 64px; } /* ── Dark mode: SOLO opt-in vía [data-theme="dark"] ───────────────────────── (Sacado el @media (prefers-color-scheme: dark): light gana siempre, sin importar la preferencia del SO. Para probar dark, poné data-theme="dark" en el .) */ [data-theme="dark"] { --bg: #09090B; --surface: #18181B; --surface-2: #27272A; --surface-3: #3F3F46; --text: #FAFAFA; --text-2: #D4D4D8; --text-3: #A1A1AA; --text-4: #71717A; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --divider: rgba(255, 255, 255, 0.05); --accent: #EF4444; --accent-hover: #DC2626; --accent-soft: rgba(239, 68, 68, 0.12); --accent-tint: rgba(239, 68, 68, 0.06); --success: #22C55E; --warning: #FBBF24; --danger: #EF4444; --info: #3B82F6; --price-up: #F87171; --price-up-soft: rgba(248, 113, 113, 0.14); --price-down: #22C55E; --price-down-soft: rgba(34, 197, 94, 0.14); --flat: #A1A1AA; --flat-soft: rgba(161, 161, 170, 0.12); --volatility-hot: #FB923C; } /* ── Base reset/global ──────────────────────────────────────────────────── */ html { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-variation-settings: 'opsz' 14, 'wght' 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font); color: var(--text); font-variation-settings: 'wght' 600; letter-spacing: -0.01em; margin: 0 0 12px; } h1 { font-size: 24px; letter-spacing: -0.02em; } h2 { font-size: 18px; } h3 { font-size: 15px; } h4 { font-size: 13px; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } ::selection { background: var(--accent-soft); } /* Utility: tabular numerals — usar en cualquier número/precio/score */ .qp-num, .qp-tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }