/* ============================================================ Clan Of VTC — Design tokens (multi-theme) ------------------------------------------------------------ 4 themes available via [data-theme] on : midnight (default) — dark navy + magenta/blue (Tech Serenity bones) desert — dune sand + rust (off-road heritage) tactical — olive + sand + amber (overland/militia) hivis — graphite + hi-vis yellow (workshop / hi-vis) ============================================================ */ :root { /* type scale (Tailwind v4 defaults, kept under one umbrella) */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 36px; --fs-5xl: 48px; --fs-6xl: 60px; --fs-7xl: 72px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --fw-300: 300; --fw-400: 400; --fw-500: 500; --fw-600: 600; --fw-700: 700; --fw-800: 800; --fw-900: 900; /* radii */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-3xl: 28px; --r-full: 999px; /* spacing scale (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; /* motion */ --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms; --ease: cubic-bezier(.2,.7,.2,1); /* type families */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Bebas Neue', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* density (controlled by Tweaks) */ --density: 1; --pad-card: calc(20px * var(--density)); --pad-section: calc(64px * var(--density)); --card-radius: var(--r-2xl); } /* ============================================================ THEME: midnight (default) ============================================================ */ :root, [data-theme="midnight"] { --bg-0: #05070d; --bg-1: #0a0f1a; --bg-2: #111728; --bg-3: #1a223a; --surface: #0e1424; --surface-2: #141d33; --surface-3: #1b2746; --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.18); --fg-0: #ffffff; --fg-1: #e6ecff; --fg-2: #aabbd9; --fg-3: #74849f; --fg-mut: #4a566f; --accent: #bd24df; /* magenta primary */ --accent-2: #2d6ade; /* royal blue */ --accent-soft: rgba(189,36,223,.14); --accent-2-soft: rgba(45,106,222,.16); --gradient: linear-gradient(90deg, #bd24df, #2d6ade 97%); --gradient-soft: linear-gradient(135deg, rgba(189,36,223,.18), rgba(45,106,222,.12)); --halo: radial-gradient(60% 60% at 50% 40%, rgba(189,36,223,.45), transparent 70%); --success: #34d399; --warn: #fbbf24; --danger: #f87171; --body-bg: radial-gradient(1200px 600px at 80% -10%, rgba(189,36,223,.18), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(45,106,222,.14), transparent 60%), linear-gradient(180deg, #05070d, #0a0f1a); --grid-overlay: rgba(255,255,255,.03); --map-base: #0a1226; } /* ============================================================ THEME: desert — dune sand + rust ============================================================ */ [data-theme="desert"] { --bg-0: #0e0906; --bg-1: #160e08; --bg-2: #21160d; --bg-3: #2c1d12; --surface: #1a110a; --surface-2: #251810; --surface-3: #312016; --border: rgba(231,196,140,.12); --border-strong: rgba(231,196,140,.28); --fg-0: #fff7ea; --fg-1: #f5e3c2; --fg-2: #cfb287; --fg-3: #93764c; --fg-mut: #5b4830; --accent: #d97706; /* burnt orange */ --accent-2: #c1432d; /* rust */ --accent-soft: rgba(217,119,6,.16); --accent-2-soft: rgba(193,67,45,.16); --gradient: linear-gradient(90deg, #f59e0b, #c1432d 90%); --gradient-soft: linear-gradient(135deg, rgba(217,119,6,.22), rgba(193,67,45,.14)); --halo: radial-gradient(60% 60% at 50% 40%, rgba(217,119,6,.45), transparent 70%); --success: #84cc16; --warn: #fbbf24; --danger: #ef4444; --body-bg: radial-gradient(1200px 600px at 85% -10%, rgba(217,119,6,.22), transparent 60%), radial-gradient(900px 500px at -10% 40%, rgba(193,67,45,.18), transparent 60%), linear-gradient(180deg, #0e0906 0%, #160e08 100%); --grid-overlay: rgba(231,196,140,.04); --map-base: #1a110a; } /* ============================================================ THEME: tactical — olive + sand + amber ============================================================ */ [data-theme="tactical"] { --bg-0: #07090a; --bg-1: #0c100e; --bg-2: #141a16; --bg-3: #1e271f; --surface: #10160f; --surface-2: #1a2218; --surface-3: #232e21; --border: rgba(200,212,184,.10); --border-strong: rgba(200,212,184,.26); --fg-0: #f4f8eb; --fg-1: #d8e0c4; --fg-2: #a9b497; --fg-3: #6f7a5c; --fg-mut: #4a533c; --accent: #d6c441; /* amber */ --accent-2: #84a04a; /* olive */ --accent-soft: rgba(214,196,65,.14); --accent-2-soft: rgba(132,160,74,.16); --gradient: linear-gradient(90deg, #d6c441, #84a04a 95%); --gradient-soft: linear-gradient(135deg, rgba(214,196,65,.18), rgba(132,160,74,.12)); --halo: radial-gradient(60% 60% at 50% 40%, rgba(214,196,65,.32), transparent 70%); --success: #84cc16; --warn: #d6c441; --danger: #c1432d; --body-bg: radial-gradient(1200px 600px at 80% -10%, rgba(214,196,65,.14), transparent 60%), radial-gradient(900px 500px at -10% 40%, rgba(132,160,74,.14), transparent 60%), linear-gradient(180deg, #07090a, #0c100e); --grid-overlay: rgba(200,212,184,.04); --map-base: #0c100e; } /* ============================================================ THEME: hivis — graphite + hi-vis yellow ============================================================ */ [data-theme="hivis"] { --bg-0: #07090c; --bg-1: #0b0f14; --bg-2: #131922; --bg-3: #1d2530; --surface: #0e141d; --surface-2: #161e2a; --surface-3: #1f2937; --border: rgba(207,216,227,.10); --border-strong: rgba(245,197,24,.32); --fg-0: #f7faff; --fg-1: #e6edf7; --fg-2: #b5c3d5; --fg-3: #7a8aa0; --fg-mut: #4d5b71; --accent: #f5c518; --accent-2: #3b82f6; --accent-soft: rgba(245,197,24,.14); --accent-2-soft: rgba(59,130,246,.14); --gradient: linear-gradient(90deg, #f5c518, #3b82f6 110%); --gradient-soft: linear-gradient(135deg, rgba(245,197,24,.16), rgba(59,130,246,.10)); --halo: radial-gradient(60% 60% at 50% 40%, rgba(245,197,24,.32), transparent 70%); --success: #22c55e; --warn: #f5c518; --danger: #ef4444; --body-bg: radial-gradient(1200px 600px at 90% -10%, rgba(245,197,24,.16), transparent 60%), radial-gradient(900px 500px at -10% 40%, rgba(59,130,246,.14), transparent 60%), linear-gradient(180deg, #07090c, #0b0f14); --grid-overlay: rgba(207,216,227,.04); --map-base: #0b0f14; } /* card style variants (Tweaks) */ [data-card="sharp"] { --card-radius: 4px; } [data-card="soft"] { --card-radius: 20px; } [data-card="bordered"]{ --card-radius: 12px; }