/* Infinity Design System — compiled tokens Generated from tokens.json. Do not hand-edit color/type/spacing/radius/shadow values here — change tokens.json and recompile. Theme model: "grid" (dark, default) and "surface" (light). No [data-theme] attribute -> grid. Consumers that offer a light mode set (or toggle prefers-color-scheme handling themselves — see README "Consuming this system"). */ :root, [data-theme="grid"] { color-scheme: dark; /* color */ --bg-base: #05070c; --bg-panel: #0d121c; --bg-panel-raised: #131a26; --border-default: #1f2a3a; --border-strong: #4f6c8e; --ink: #eef6ff; --ink-muted: #93a6bd; --ink-on-fill: #04121a; --accent-cyan: #35e0ff; --accent-orange: #ff9d4d; --success: #2fe6a7; --warning: #ffcf5c; --danger: #ff5c7a; --focus-ring: var(--accent-cyan); --grid-line: rgba(53, 224, 255, 0.12); /* shadow / glow */ --glow-sm: 0 0 0 1px rgba(53, 224, 255, 0.5), 0 0 8px rgba(53, 224, 255, 0.35); --glow-md: 0 0 0 1px rgba(53, 224, 255, 0.55), 0 0 24px rgba(53, 224, 255, 0.3); --glow-danger: 0 0 0 1px rgba(255, 92, 122, 0.6), 0 0 16px rgba(255, 92, 122, 0.35); --elevation-1: 0 4px 16px rgba(0, 0, 0, 0.5); } [data-theme="surface"] { color-scheme: light; --bg-base: #f3f6fb; --bg-panel: #ffffff; --bg-panel-raised: #eaf0f8; --border-default: #d7e0ec; --border-strong: #66768c; --ink: #0b1220; --ink-muted: #4b5768; --ink-on-fill: #ffffff; --accent-cyan: #0e7490; --accent-orange: #c2410c; --success: #077a4a; --warning: #9a5b00; --danger: #d1274a; --focus-ring: var(--accent-cyan); --grid-line: rgba(14, 116, 144, 0.1); --glow-sm: 0 0 0 1px rgba(14, 116, 144, 0.45), 0 1px 3px rgba(14, 116, 144, 0.2); --glow-md: 0 0 0 1px rgba(14, 116, 144, 0.4), 0 4px 12px rgba(14, 116, 144, 0.16); --glow-danger: 0 0 0 1px rgba(209, 39, 74, 0.5), 0 2px 8px rgba(209, 39, 74, 0.2); --elevation-1: 0 2px 8px rgba(11, 18, 32, 0.12); } :root { /* type families */ --font-display: "Orbitron", "Segoe UI", system-ui, sans-serif; --font-heading: "Rajdhani", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace; /* spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; /* radius */ --radius-none: 0px; --radius-sm: 3px; --radius-md: 6px; --radius-pill: 999px; } /* type styles */ .display-lg { font-family: var(--font-display); font-size: 56px; line-height: 58px; font-weight: 900; letter-spacing: 0.5px; } .display-sm { font-family: var(--font-display); font-size: 34px; line-height: 38px; font-weight: 700; letter-spacing: 0.5px; } .h1 { font-family: var(--font-heading); font-size: 28px; line-height: 34px; font-weight: 700; } .h2 { font-family: var(--font-heading); font-size: 22px; line-height: 28px; font-weight: 600; } .h3 { font-family: var(--font-heading); font-size: 17px; line-height: 22px; font-weight: 600; } .eyebrow { font-family: var(--font-heading); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; } .body-lg { font-family: var(--font-body); font-size: 17px; line-height: 26px; font-weight: 400; } .body { font-family: var(--font-body); font-size: 15px; line-height: 22px; font-weight: 400; } .body-sm { font-family: var(--font-body); font-size: 13px; line-height: 18px; font-weight: 400; } .label { font-family: var(--font-body); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.3px; } .data-lg { font-family: var(--font-mono); font-size: 32px; line-height: 36px; font-weight: 700; font-variant-numeric: tabular-nums; } .data { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }