/* ============================================================ Energroup design tokens — THE single source of truth for color, type, and spacing across the whole web app. Loaded FIRST in base.html (before Bootstrap, pagination.css, and modals.css) so every later stylesheet and template can read var(--…) off :root. PHASE 0 CONTRACT: introducing this file is a NO-OP visually. Every value below equals a color/size already in use somewhere in the app today. The two pre-existing token sets are re-pointed here as aliases: · modals.css --eg-* → canonical brand/slate tokens · pagination.css --ep-* → legacy zinc tokens (kept identical for now) The slate ramp is the canonical neutral scale (it is already the most-used and matches the modal design system, see documentation/modal-design-spec.md). The zinc ramp is LEGACY — it exists only so the pagination + zinc dashboards keep their exact look until a later phase migrates them onto slate. Conventions: · Semantic colors come in triples: --x (solid) / --x-bg (soft tint) / --x-fg (text-on-tint). · Never hardcode a hex in a template or component stylesheet — reference a token. New work that needs a value not here should ADD a token, not invent a literal. ============================================================ */ :root { /* ── Brand / primary accent ─────────────────────────────────── The de-facto app accent (Tailwind blue-500), already adopted by the modal system and ~16 dashboards via --eg-accent. */ --brand: #3b82f6; /* blue-500 */ --brand-hover: #2563eb; /* blue-600 */ --brand-soft: #eff6ff; /* blue-50 — tints, hover surfaces */ --brand-fg: #ffffff; /* text/icon on a solid brand fill */ /* ── Semantic colors (solid / soft-bg / fg-on-soft) ─────────── Bases use the Tailwind-600 family to match the slate/brand theme. These are the ONE true value per state; the app currently spreads each of these across 5–7 competing hexes — migrate onto these. */ --success: #16a34a; --success-bg: #d1fae5; --success-fg: #065f46; --danger: #dc2626; --danger-bg: #fee2e2; --danger-fg: #991b1b; --warning: #d97706; --warning-bg: #fef3c7; --warning-fg: #92400e; --info: #0ea5e9; --info-bg: #e0f2fe; --info-fg: #075985; /* ── Neutral ramp — SLATE (canonical) ───────────────────────── The single grey scale the app should standardize on. */ --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0; --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; /* ── Surface / border / text aliases (slate-derived) ────────── Use these names in components instead of raw ramp steps. */ --surface: #ffffff; /* cards, inputs, modal section cards */ --surface-muted: var(--neutral-50); /* page canvas, modal body */ --surface-header: var(--neutral-100); /* header bars */ --border: var(--neutral-200); /* borders, dividers */ --text: var(--neutral-800); /* body + titles */ --text-muted: var(--neutral-500); /* subtitles, labels */ --text-faint: var(--neutral-400); /* placeholders, disabled */ --table-row-hover: var(--neutral-100); /* ── Type scale ─────────────────────────────────────────────── 8 steps. UI base is 0.875rem (14px), matching base.html body. */ --fs-2xs: 0.6875rem; /* 11px — micro labels, table chrome */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.875rem; /* 14px — default UI text */ --fs-md: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px — section/card titles */ --fs-2xl: 1.5rem; /* 24px — page titles */ --fs-display: 2rem; /* 32px — KPI numbers, hero figures */ --lh-tight: 1; /* big numbers */ --lh-ui: 1.3; /* dense UI, titles */ --lh-prose: 1.5; /* paragraphs */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ── Spacing scale (4px base) ─────────────────────────────────── */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ /* ── Radii ────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ── Elevation ────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06); --shadow: 0 2px 8px rgba(0, 0, 0, .08); --shadow-lg: 0 10px 40px rgba(0, 0, 0, .12); /* ── Focus ────────────────────────────────────────────────────── */ --focus-ring: 0 0 0 0.25rem rgba(59, 130, 246, .25); --focus-border: var(--brand); /* ── LEGACY zinc ramp ───────────────────────────────────────── DO NOT use in new work. Exists so pagination.css and the zinc dashboards (estados_de_cuenta, transacciones_edc, dashboard, bonus_dashboard, security_events) keep their exact current look until a later phase migrates them onto the slate ramp above. */ --zinc-50: var(--neutral-50); --zinc-100: var(--neutral-100); --zinc-200: var(--neutral-200); --zinc-400: var(--neutral-400); --zinc-500: var(--neutral-500); --zinc-900: var(--neutral-900); --zinc-950: var(--neutral-900); }