/* ============================================================= CryptoSwap — Design Tokens Paleta monocromática dark con acentos semánticos. Overrideable: el color primario se inyecta inline desde base.html (vía env BRAND_PRIMARY_COLOR) al final de . ============================================================= */ :root { color-scheme: dark; /* Backgrounds */ --bg-base: #000000; --bg-card: #0A0A0A; --bg-card-alt: #0F0F0F; --bg-hover: #141414; /* Borders */ --border: #1F1F1F; --border-hover: #2A2A2A; --border-focus: #EDEDED; /* Text */ --text-primary: #EDEDED; --text-secondary: #A1A1A1; --text-muted: #888888; --text-dim: #666666; --text-faint: #555555; --text-ghost: #333333; /* Semantic — uso MUY restringido */ --accent-live: #22c55e; /* status verde "en vivo" / OK */ --accent-danger: #ef4444; /* validaciones de error */ --accent-warn: #fbbf24; /* warnings */ --accent-info: #22d3ee; /* info / cyan */ /* Brand (overrideable vía env) — Bloomberg Terminal palette */ --brand-primary: #ff6b00; --brand-primary-hover: #ff8838; --brand-primary-subtle: rgba(255, 107, 0, 0.12); --brand-primary-contrast: #000000; /* Radii — Bloomberg uses sharp panels */ --radius-sm: 0px; --radius-md: 2px; --radius-lg: 3px; --radius-xl: 4px; --radius-2xl: 6px; /* Fonts — JetBrains Mono everywhere, Archivo for display */ --font-sans: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-serif: 'Archivo', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-display: 'Archivo', 'Inter', system-ui, sans-serif; } /* Aplicar la fuente global al body para que el cambio cascadee */ html, body { font-family: var(--font-sans); font-feature-settings: "ss01", "ss02"; } h1, h2, h3, h4, h5, h6, .brand-title, .display, .h-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }