/* ============================================================ Tribun RIAS — Reimagined Design Tokens (2026) Light + Dark, accent variants, density, radius. Driven by data-* attributes on the element. ============================================================ */ /* ---- Fonts ---- */ /* Loaded via in the HTML head (Geist / Instrument Sans / Geist Mono) */ :root { /* Brand spine — logo-derived indigo → royal blue (kept) */ --brand-900: #1b1470; --brand-800: #221a8c; --brand-700: #2a1ea8; --brand-600: #3a2fd0; --brand-500: #4338e8; --brand-400: #5b8dff; --brand-300: #8aa9ff; --brand-200: #b9c8ff; --brand-100: #dfe6ff; --brand-50: #eef0ff; --ai: #6e57ff; --ai-2: #9a7bff; --sky: #2196ff; /* Accent — finalized = cyan/teal, baked as the active default. */ --accent-a: #0e7bd6; /* gradient start */ --accent-b: #2bd4d4; /* gradient end */ --accent-solid: #119fd0; --accent-ink: #0e7bd6; /* readable accent text on light */ --accent-soft: #e2f6fb; --accent-soft-border: #bfe9f2; --accent-glow: rgba(17,159,208,0.55); --accent-grad: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%); /* Semantic */ --positive: #15915a; --positive-soft: #e2f4ea; --warning: #b46a13; --warning-soft: #fbecd6; --danger: #d23b2c; --danger-soft: #fbe5e1; /* Radius scale (overridden by [data-radius]) */ --r-xs: 7px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* Density (overridden by [data-density]) */ --pad-screen: 34px; --gap-card: 14px; --row-h: 52px; /* Motion multiplier (0..1.6), set inline by JS from the Motion tweak */ --motion: 1; --font-ui: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Instrument Sans", "Geist", system-ui, sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace; } /* ===================== LIGHT (default) ===================== */ :root, [data-theme="light"] { --bg: #eef0f8; --bg-2: #e7eaf6; --canvas: #f4f5fb; --surface: #ffffff; --surface-2: #fafbff; --surface-3: #f3f5fc; --glass: rgba(255,255,255,0.72); --glass-2: rgba(255,255,255,0.55); --glass-brd: rgba(255,255,255,0.85); --ink: #0c1030; --ink-2: #2a2f55; --muted: #636a93; --muted-2: #969cbd; --rule: #e4e7f3; --rule-2: #d3d8ec; --rule-strong:#c2c8e4; --shadow-sm: 0 1px 2px rgba(14,18,48,0.05), 0 2px 8px -4px rgba(14,18,48,0.08); --shadow-md: 0 4px 14px -6px rgba(14,18,48,0.14), 0 12px 36px -18px rgba(20,24,70,0.20); --shadow-lg: 0 18px 50px -24px rgba(20,24,70,0.32), 0 6px 18px -10px rgba(14,18,48,0.12); --shadow-glow:0 10px 40px -12px var(--accent-glow); --dot: rgba(58,47,208,0.10); --grid-line: rgba(58,47,208,0.045); --aurora-1: rgba(67,56,232,0.30); --aurora-2: rgba(33,150,255,0.26); --aurora-3: rgba(110,87,255,0.22); --hero-bg: radial-gradient(120% 120% at 80% 0%, #e9ecfb 0%, #eef0f8 45%, #e6e9f6 100%); --scrim: rgba(12,16,48,0.42); } /* ===================== DARK ===================== */ [data-theme="dark"] { --bg: #07091a; --bg-2: #0a0d22; --canvas: #090c1d; --surface: #11142e; --surface-2: #141838; --surface-3: #181d42; --glass: rgba(22,27,60,0.62); --glass-2: rgba(28,34,72,0.45); --glass-brd: rgba(120,135,220,0.18); --ink: #eef1ff; --ink-2: #c4caef; --muted: #8b93c4; --muted-2: #646c9e; --rule: rgba(125,138,210,0.16); --rule-2: rgba(125,138,210,0.24); --rule-strong:rgba(140,155,230,0.34); --accent-ink: #7fe3ec; --accent-soft: rgba(43,212,212,0.14); --accent-soft-border: rgba(43,212,212,0.30); --accent-glow: rgba(43,212,212,0.50); --positive-soft: rgba(21,145,90,0.18); --warning-soft: rgba(180,106,19,0.20); --danger-soft: rgba(210,59,44,0.20); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 8px 28px -10px rgba(0,0,0,0.6); --shadow-lg: 0 24px 60px -24px rgba(0,0,0,0.7), 0 8px 22px -12px rgba(0,0,0,0.5); --shadow-glow:0 12px 50px -10px var(--accent-glow); --dot: rgba(120,140,255,0.12); --grid-line: rgba(120,140,255,0.05); --aurora-1: rgba(67,56,232,0.42); --aurora-2: rgba(33,150,255,0.34); --aurora-3: rgba(140,90,255,0.36); --hero-bg: radial-gradient(120% 130% at 78% -10%, #15193e 0%, #0b0e24 50%, #07091a 100%); --scrim: rgba(3,5,16,0.66); } /* ===================== ACCENT VARIANTS ===================== */ [data-accent="violet"] { --accent-a: #6e57ff; --accent-b: #b07bff; --accent-solid: #7a5cff; --accent-ink: #6e57ff; --accent-soft: #efeaff; --accent-soft-border:#ddd1ff; --accent-glow: rgba(110,87,255,0.55); } [data-theme="dark"][data-accent="violet"] { --accent-ink:#c2b4ff; --accent-soft:rgba(140,110,255,0.16); --accent-soft-border:rgba(140,110,255,0.32); } [data-accent="cyan"] { --accent-a: #0e7bd6; --accent-b: #2bd4d4; --accent-solid: #119fd0; --accent-ink: #0e7bd6; --accent-soft: #e2f6fb; --accent-soft-border:#bfe9f2; --accent-glow: rgba(17,159,208,0.55); } [data-theme="dark"][data-accent="cyan"] { --accent-ink:#7fe3ec; --accent-soft:rgba(43,212,212,0.14); --accent-soft-border:rgba(43,212,212,0.30); } [data-accent="ember"] { --accent-a: #d65a2f; --accent-b: #f0a93a; --accent-solid: #e06a2c; --accent-ink: #c0481f; --accent-soft: #fcefe4; --accent-soft-border:#f3d9c4; --accent-glow: rgba(224,106,44,0.55); } [data-theme="dark"][data-accent="ember"] { --accent-ink:#f5b98f; --accent-soft:rgba(224,106,44,0.16); --accent-soft-border:rgba(224,106,44,0.34); } /* ===================== RADIUS VARIANTS ===================== */ [data-radius="sharp"] { --r-xs: 3px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-pill: 999px; } [data-radius="round"] { --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 26px; --r-xl: 34px; --r-pill: 999px; } /* ===================== DENSITY VARIANTS ===================== */ [data-density="compact"] { --pad-screen: 24px; --gap-card: 10px; --row-h: 44px; } [data-density="comfy"] { --pad-screen: 44px; --gap-card: 18px; --row-h: 60px; } /* ===================== BASE RESET ===================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } html { font-size: 14px; } body { font-family: var(--font-ui); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11", "cv02"; letter-spacing: -0.005em; overflow: hidden; } button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; } input, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } h1,h2,h3,h4,p { margin: 0; } ::selection { background: var(--accent-soft); color: var(--accent-ink); } .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.028em; } .mono { font-family: var(--font-mono); font-feature-settings: "tnum"; } .tnum { font-variant-numeric: tabular-nums; } /* Scrollbars */ *::-webkit-scrollbar { width: 11px; height: 11px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--rule-strong); border: 3px solid transparent; background-clip: content-box; } /* Motion fully off (Motion tweak = 0) */ [data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation: none !important; } /* Reduced motion respect */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }