/* ═══════════════════════════════════════════════════════════════════════════ VigilForge Design Tokens — Phase 1 additions Extends static/css/main.css, which already owns the color scale (--bg-*, --color-*, --text-*, --border-*), radius (--r-sm..--r-2xl) and shadow (--shadow-*, --glow-*) tokens, plus the dark/light theme switch via [data-theme]. Never duplicate those here — reference them with var(). This file formalizes the scales main.css didn't define yet: type, spacing, z-index layers, and elevation aliases. ═══════════════════════════════════ */ :root { /* ── Brand display font — matches the logo's angular, cut-corner │ letterforms. Wordmark/tagline ONLY (.brand-vigil/.brand-forge in │ main.css) — never body copy or UI text; Chakra Petch is a display │ face and hurts scanability at paragraph size or in dense UI. ─ */ --font-display: 'Chakra Petch', var(--font-mono); /* ── Type scale — 1.25 (major third) ratio, 16px base ─────────────────── */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5625rem; /* ~25px */ --text-2xl: 1.953rem; /* ~31px */ --text-3xl: 2.441rem; /* ~39px */ --text-4xl: 3.052rem; /* ~49px */ --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.75; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* ── Spacing scale — 4px grid ──────────────────────────────────────────── */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* ── Radius — rounds out main.css's --r-sm..--r-2xl ───────────────────── */ --r-none: 0; --r-full: 9999px; /* ── Z-index layers — semantic names, not raw numbers ─────────────────── */ --z-base: 0; --z-content: 10; --z-dropdown: 100; --z-sticky: 150; --z-fixed: 200; --z-overlay: 500; --z-modal: 1000; --z-toast: 1100; --z-tooltip: 1200; /* ── Elevation — semantic aliases over main.css's theme-reactive shadows ─ */ --elevation-0: none; --elevation-1: var(--shadow-sm); --elevation-2: var(--shadow-md); --elevation-3: var(--shadow-lg); --elevation-4: var(--shadow-xl); } /* ── User text-size preference ──────────────────────────────────────────── Scales the root font-size, which scales every rem-based type/spacing token with it (paddings grow along with text, so nothing feels cramped). Set via data-text-scale on by text-scale-init.js / text-scale- switcher.js — same pattern as the [data-theme] switch. Default (no attribute, or "normal") is the browser's 16px baseline, untouched. */ html[data-text-scale="large"] { font-size: 112.5%; } html[data-text-scale="larger"] { font-size: 125%; } /* Light-theme override — hover tint for the new component layer only (main.css already handles --shadow-* per theme; --elevation-* inherits that automatically through var() indirection above). */ [data-theme="light"] { --elevation-tint: rgba(15, 23, 42, 0.06); } :root, [data-theme="dark"] { --elevation-tint: rgba(0, 0, 0, 0.35); }