/* ── Farliner Design Tokens ─────────────────────────────────────────────── Single source of truth for the game's visual language. Import this file before style.css to make every token available globally. Colour palette: deep space black, electric cyan, muted blue-white text. Typography: Courier New monospace throughout — retro-futurist terminal feel. ──────────────────────────────────────────────────────────────────────────── */ /* ── UI Size scale ────────────────────────────────────────────────────────── The data-ui-size attribute on selects one of five font-size presets. All rem-based UI measurements scale automatically with this root font-size. 'M' is the default (browser standard 16 px) and requires no attribute. ──────────────────────────────────────────────────────────────────────────── */ html[data-ui-size="xs"] { font-size: 12px; } html[data-ui-size="s"] { font-size: 14px; } /* m → 16 px = browser default; no attribute needed */ html[data-ui-size="l"] { font-size: 18px; } html[data-ui-size="xl"] { font-size: 20px; } :root { /* ── Backgrounds ──────────────────────────────────────────────────────── */ --fc-bg: #04060a; --fc-panel-bg: rgba(2, 6, 22, 0.85); --fc-panel-bg-deep: rgba(2, 6, 22, 0.97); --fc-panel-bg-card: rgba(0, 20, 50, 0.45); /* ── Borders ──────────────────────────────────────────────────────────── */ --fc-border: rgba(0, 180, 255, 0.22); --fc-border-bright: rgba(0, 229, 255, 0.45); --fc-border-dim: rgba(0, 180, 255, 0.12); --fc-border-danger: rgba(255, 80, 60, 0.35); --fc-border-warning: rgba(255, 170, 60, 0.35); /* ── Brand colours ────────────────────────────────────────────────────── */ --fc-cyan: #00e5ff; --fc-cyan-dim: rgba(0, 229, 255, 0.65); --fc-cyan-subtle: rgba(0, 229, 255, 0.18); /* very faint cyan tint */ /* ── Semantic state colours ───────────────────────────────────────────── */ --fc-danger: rgba(255, 80, 60, 1); --fc-danger-dim: rgba(255, 160, 140, 0.85); --fc-danger-bg: rgba(255, 60, 40, 0.10); --fc-warning: rgba(255, 170, 60, 1); --fc-warning-dim: rgba(255, 200, 100, 0.85); --fc-warning-bg: rgba(255, 140, 20, 0.10); --fc-success: rgba(80, 220, 140, 1); --fc-success-dim: rgba(80, 200, 130, 0.70); /* ── Text ─────────────────────────────────────────────────────────────── */ --fc-text: rgba(190, 220, 255, 0.9); --fc-text-bright: rgba(200, 230, 255, 0.95); --fc-text-dim: rgba(80, 130, 185, 0.70); --fc-text-faint: rgba(120, 150, 190, 0.55); /* ── Typography ───────────────────────────────────────────────────────── */ --fc-font: 'Courier New', Courier, monospace; /* ── Spacing ──────────────────────────────────────────────────────────── */ --fc-pad-x: 20px; /* canonical horizontal content padding */ --fc-pad-section: 16px; /* canonical vertical section padding */ /* ── Effects ──────────────────────────────────────────────────────────── */ --fc-transition: 0.15s ease; --fc-blur: blur(6px); --fc-radius: 3px; /* canonical border-radius for buttons/cards */ /* ── Z-index scale ────────────────────────────────────────────────────── */ --fc-z-canvas: 2; --fc-z-ui: 20; --fc-z-topbar: 3200; --fc-z-tabbar: 2100; --fc-z-dropdown: 4000; --fc-z-popup: 5000; --fc-z-popup-panel: 5100; --fc-z-battle: 8000; }