/* ============================================================= GangBoxAI Design Tokens — v2 (AI-Forward Redesign) All design decisions live here — no magic numbers elsewhere. ============================================================= */ :root { /* ── Dark Palette ──────────────────────────────────────────── */ --color-ink: #0A0F1A; --color-slate: #1A1F2E; --color-graphite: #2A3042; --color-steel: #6B7A8D; /* ── Accent Palette ────────────────────────────────────────── */ --color-electric: #3B82F6; --color-electric-hover: #2563EB; --color-cyan: #06B6D4; --color-lime: #84CC16; --color-amber: #F59E0B; /* ── Light / Neutral Palette ───────────────────────────────── */ --color-surface: #FFFFFF; --color-canvas: #F8FAFC; --color-border: #E2E8F0; --color-border-dark: rgba(255, 255, 255, 0.08); --color-white: #FFFFFF; /* ── Text Colors ───────────────────────────────────────────── */ --color-text: #0F172A; --color-text-secondary: #475569; --color-muted: #64748B; --color-text-on-dark: rgba(255, 255, 255, 0.88); --color-muted-on-dark: rgba(255, 255, 255, 0.55); /* ── Legacy Aliases (for transition — used in existing views) ── */ --color-navy: #3B82F6; --color-navy-hover: #2563EB; --color-action: #3B82F6; --color-action-hover:#2563EB; --color-action-link: #3B82F6; --color-action-link-hover: #2563EB; --color-bg: #F8FAFC; /* ── Typography ──────────────────────────────────────────── */ --font-heading: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace; /* Fluid type scale */ --text-display: clamp(2.5rem, 5vw + 1rem, 4.5rem); --text-h1: clamp(2rem, 4vw + 0.5rem, 3.5rem); --text-h2: clamp(1.5rem, 3vw + 0.5rem, 2.5rem); --text-h3: clamp(1.25rem, 2vw + 0.5rem, 1.75rem); --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --leading-tight: 1.2; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed:1.625; --weight-normal: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --weight-extrabold:800; /* ── Spacing ─────────────────────────────────────────────── */ --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-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ── Radius ──────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 12px; --radius-card: 16px; --radius-lg: 20px; --radius-pill: 999px; /* ── Shadows ─────────────────────────────────────────────── */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04); --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.12); --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.12), 0 32px 80px rgba(0, 0, 0, 0.24); --shadow-glow-blue: 0 0 20px rgba(59, 130, 246, 0.25), 0 0 60px rgba(59, 130, 246, 0.10); --shadow-glow-cyan: 0 0 20px rgba(6, 182, 212, 0.25), 0 0 60px rgba(6, 182, 212, 0.10); /* ── Transitions (Material easing) ──────────────────────── */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Gradients ──────────────────────────────────────────── */ --gradient-accent: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%); --gradient-accent-hover: linear-gradient(135deg, #2563EB 0%, #0891B2 100%); --gradient-dark: linear-gradient(135deg, #0A0F1A 0%, #1A1F2E 50%, #0A0F1A 100%); --gradient-dark-rich: linear-gradient(180deg, #0A0F1A 0%, #111827 100%); /* Legacy gradient aliases */ --gradient-action: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%); --gradient-navy: linear-gradient(135deg, #0A0F1A 0%, #1A1F2E 100%); --gradient-navy-rich: linear-gradient(135deg, #0A0F1A 0%, #111827 100%); --gradient-action-glow: 0 4px 16px rgba(59, 130, 246, 0.30), 0 8px 32px rgba(59, 130, 246, 0.15); --gradient-navy-glow: 0 4px 16px rgba(10, 15, 26, 0.25), 0 8px 32px rgba(10, 15, 26, 0.12); /* ── Glass Morphism ─────────────────────────────────────── */ --glass-bg: rgba(10, 15, 26, 0.75); --glass-bg-strong: rgba(10, 15, 26, 0.90); --glass-bg-light: rgba(255, 255, 255, 0.80); --glass-border: rgba(255, 255, 255, 0.08); --glass-border-light: rgba(255, 255, 255, 0.20); --glass-blur: 16px; /* ── Layout ──────────────────────────────────────────────── */ --max-width: 1280px; --max-width-prose: 680px; --nav-height: 72px; /* ── Z-Index ─────────────────────────────────────────────── */ --z-nav: 100; --z-modal: 200; --z-toast: 300; } /* ============================================================= Dark Mode Token Overrides Applied via data-theme="dark" on ============================================================= */ [data-theme="dark"] { /* ── Dark Palette (elevated surfaces) ────────────────────── */ --color-ink: #0A0F1A; --color-slate: #1F2533; --color-graphite: #353B4D; --color-steel: #A0A8B8; /* ── Light / Neutral → Dark surfaces ─────────────────────── */ --color-surface: #1A1F2E; --color-canvas: #0F141F; --color-border: #2A3042; --color-border-dark: rgba(255, 255, 255, 0.12); /* ── Text Colors (inverted for dark backgrounds) ─────────── */ --color-text: #E8ECF2; --color-text-secondary:#B4BAC5; --color-muted: #8B92A0; --color-text-on-dark: rgba(255, 255, 255, 0.92); --color-muted-on-dark: rgba(255, 255, 255, 0.60); /* ── Legacy Aliases ──────────────────────────────────────── */ --color-bg: #0F141F; /* ── Shadows (stronger blacks for dark backgrounds) ──────── */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.15); --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.30), 0 16px 40px rgba(0, 0, 0, 0.25); --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.20), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.40), 0 32px 80px rgba(0, 0, 0, 0.50); --shadow-glow-blue: 0 0 24px rgba(59, 130, 246, 0.35), 0 0 72px rgba(59, 130, 246, 0.15); --shadow-glow-cyan: 0 0 24px rgba(6, 182, 212, 0.35), 0 0 72px rgba(6, 182, 212, 0.15); /* ── Glass Morphism ──────────────────────────────────────── */ --glass-bg: rgba(26, 31, 46, 0.75); --glass-bg-strong: rgba(26, 31, 46, 0.90); --glass-bg-light: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.12); --glass-border-light: rgba(255, 255, 255, 0.25); }