/* ========================================================================== AsesIA — colors_and_type.css · v3 (tech-finance) -------------------------------------------------------------------------- Reference: Linear · Stripe · Vercel · Bloomberg Terminal. Black canvas, white precise type, monoespaciado para datos, una sola chispa de indigo eléctrico. Sin serif, sin gradientes, sin tonos cálidos. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ── Mono palette (black / white / grays) ────────────────────────────── */ --bg: #0A0A0B; /* primary canvas — near-black */ --bg-1: #111114; /* raised surface */ --bg-2: #18181C; /* sunken / table rows */ --bg-3: #1F1F25; /* hover surface */ --line: #26262D; /* hairline border */ --line-2: #3A3A44; /* stronger border */ --fg: #FAFAFA; /* primary text */ --fg-1: #E5E5E7; /* secondary text */ --fg-2: #A1A1A8; /* tertiary — labels, captions */ --fg-3: #6E6E78; /* quaternary — disabled, scaffolding */ --fg-4: #4A4A52; /* very dim */ /* ── Accent: electric indigo — only one ───────────────────────────────── */ --acc: #5B5BD6; /* primary accent */ --acc-hi: #7B7BE5; /* hover */ --acc-dim: #3D3DB2; /* press / pressed */ --acc-glow: rgba(91, 91, 214, 0.4); --acc-soft: rgba(91, 91, 214, 0.10); --acc-border: rgba(91, 91, 214, 0.30); /* ── Data colors — used for status dots, charts ──────────────────────── */ --green: #2DD66E; /* positive · up · success */ --green-dim: rgba(45, 214, 110, 0.12); --red: #FF4E4E; /* negative · down · error */ --red-dim: rgba(255, 78, 78, 0.12); --yellow: #F5C038; /* warning */ --yellow-dim: rgba(245, 192, 56, 0.12); /* ── Light surfaces (rarely used — admin tables can flip) ──────────── */ --light-bg: #FAFAFA; --light-fg: #0A0A0B; --light-line: #E5E5E7; /* ── Typography ──────────────────────────────────────────────────────── */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Sizes — small, dense, technical */ --fs-mega: clamp(3.5rem, 8vw, 7rem); --fs-hero: clamp(2.5rem, 4.5vw, 4rem); --fs-display: clamp(2rem, 3vw, 3rem); --fs-h1: 1.875rem; --fs-h2: 1.5rem; --fs-h3: 1.25rem; --fs-h4: 1.0625rem; --fs-body: 0.9375rem; /* 15px — tighter than usual */ --fs-sm: 0.8125rem; /* 13px */ --fs-xs: 0.75rem; /* 12px */ --fs-micro: 0.6875rem; /* 11px — mono labels */ /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Tracking — tighter for tech precision */ --tracking-tight: -0.03em; --tracking-tighter: -0.04em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-mono: 0.08em; --tracking-mono-caps: 0.14em; --leading-tight: 1.0; --leading-snug: 1.15; --leading-normal: 1.45; --leading-relaxed: 1.6; /* Spacing (4px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* Radii — sharp / technical */ --r-0: 0px; --r-1: 2px; --r-2: 4px; --r-3: 6px; /* default */ --r-4: 8px; --r-pill: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.60); --shadow-glow: 0 0 24px var(--acc-glow); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 400ms; } /* ────────────────────────────────────────────────────────────────────────── Helpers — apply as classes ────────────────────────────────────────────────────────────────────────── */ .t-mega { font-family: var(--font-sans); font-size: var(--fs-mega); font-weight: 800; line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); } .t-hero { font-family: var(--font-sans); font-size: var(--fs-hero); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } .t-display { font-family: var(--font-sans); font-size: var(--fs-display); font-weight: 700; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); } .t-h1 { font-family: var(--font-sans); font-size: var(--fs-h1); font-weight: 700; line-height: var(--leading-snug); letter-spacing: -0.02em; } .t-h2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: 600; line-height: var(--leading-snug); letter-spacing: -0.015em; } .t-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: 600; line-height: var(--leading-snug); } .t-h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; } .t-body { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--leading-relaxed); color: var(--fg-1); } .t-meta { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--fg-2); } /* Mono — for KPIs, codes, status, labels */ .t-mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: var(--tracking-mono); } .t-mono-label { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-mono-caps); color: var(--fg-2); } .t-mono-num { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; } .t-kicker { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-mono-caps); color: var(--acc); } /* Wordmark */ .wordmark { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.04em; color: var(--fg); } .wordmark .ia { color: var(--acc); }