/* ========================================================================== AgentSetup.agency — Design System Variables CSS Custom Properties (Design Tokens) ========================================================================== */ :root { /* -------------------------------------------------------------------------- COLOR PALETTE — PRIMITIVES Dark navy/charcoal base with electric blue + cyan accents -------------------------------------------------------------------------- */ /* Backgrounds */ --color-bg-base: #080d16; /* deepest background — near black navy */ --color-bg-surface: #0d1525; /* primary page background */ --color-bg-elevated: #111d30; /* cards, panels — one level up */ --color-bg-overlay: #162035; /* modal backgrounds, tooltips */ --color-bg-subtle: #1a2540; /* hover states, subtle fills */ --color-bg-border: #1e2d4a; /* inner section dividers */ /* Neutral text */ --color-text-primary: #f0f4ff; /* near-white with faint blue cast */ --color-text-secondary: #94a3c0; /* muted labels, meta text */ --color-text-tertiary: #5a6a88; /* placeholders, disabled */ --color-text-inverse: #080d16; /* text on light/accent backgrounds */ /* Electric Blue — primary accent */ --color-blue-100: #dbeafe; --color-blue-200: #bfdbfe; --color-blue-300: #7dd3fc; --color-blue-400: #38bdf8; --color-blue-500: #0ea5e9; --color-blue-600: #0284c7; --color-blue-700: #0369a1; --color-blue-glow: #00d4ff; /* electric bright — CTAs, highlights */ /* Cyan — secondary accent */ --color-cyan-400: #22d3ee; --color-cyan-500: #06b6d4; --color-cyan-glow: #0ff; /* Emerald — success / positive states */ --color-emerald-400: #34d399; --color-emerald-500: #10b981; --color-emerald-glow: #00ffaa; /* Warning / amber */ --color-amber-400: #fbbf24; --color-amber-500: #f59e0b; /* Error / red */ --color-red-400: #f87171; --color-red-500: #ef4444; /* -------------------------------------------------------------------------- COLOR PALETTE — SEMANTIC TOKENS -------------------------------------------------------------------------- */ /* Brand */ --color-brand-primary: var(--color-blue-glow); --color-brand-secondary: var(--color-cyan-400); --color-brand-tertiary: var(--color-emerald-400); /* Surfaces */ --color-surface-page: var(--color-bg-surface); --color-surface-card: var(--color-bg-elevated); --color-surface-card-hover: var(--color-bg-overlay); --color-surface-modal: var(--color-bg-overlay); /* Text */ --color-fg-primary: var(--color-text-primary); --color-fg-secondary: var(--color-text-secondary); --color-fg-tertiary: var(--color-text-tertiary); --color-fg-accent: var(--color-blue-glow); --color-fg-on-accent: var(--color-text-inverse); /* Borders */ --color-border-default: rgba(0, 212, 255, 0.12); --color-border-subtle: rgba(255, 255, 255, 0.06); --color-border-strong: rgba(0, 212, 255, 0.30); --color-border-focus: var(--color-blue-glow); /* Status */ --color-success: var(--color-emerald-500); --color-success-glow: var(--color-emerald-glow); --color-warning: var(--color-amber-400); --color-error: var(--color-red-400); /* -------------------------------------------------------------------------- GRADIENTS -------------------------------------------------------------------------- */ --gradient-brand: linear-gradient(135deg, var(--color-blue-glow) 0%, var(--color-cyan-400) 50%, var(--color-emerald-400) 100%); --gradient-brand-subtle: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(34, 211, 238, 0.08) 50%, rgba(52, 211, 153, 0.05) 100%); --gradient-hero-bg: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0, 180, 255, 0.18) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(34, 211, 238, 0.08) 0%, transparent 50%), var(--color-bg-surface); --gradient-card: linear-gradient(145deg, var(--color-bg-elevated) 0%, rgba(13, 21, 37, 0.6) 100%); --gradient-text-brand: linear-gradient(90deg, var(--color-blue-glow) 0%, var(--color-cyan-400) 60%, var(--color-emerald-400) 100%); --gradient-nav-glass: linear-gradient(180deg, rgba(8, 13, 22, 0.90) 0%, rgba(8, 13, 22, 0.75) 100%); --gradient-cta-button: linear-gradient(135deg, #0099cc 0%, var(--color-blue-glow) 40%, var(--color-cyan-400) 100%); --gradient-footer: linear-gradient(180deg, var(--color-bg-surface) 0%, var(--color-bg-base) 100%); /* -------------------------------------------------------------------------- TYPOGRAPHY -------------------------------------------------------------------------- */ /* Font families */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace; --font-display: var(--font-sans); /* Use Inter for display — clean, modern */ /* Font sizes — type scale (1.25 major third) */ --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 */ --text-7xl: 4.5rem; /* 72px */ --text-8xl: 6rem; /* 96px */ /* Font weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900; /* Line heights */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; /* Letter spacing */ --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.16em; /* -------------------------------------------------------------------------- SPACING SCALE — 4pt base (4px = 0.25rem) -------------------------------------------------------------------------- */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --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-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ --space-64: 16rem; /* 256px */ /* Semantic spacing */ --spacing-xs: var(--space-2); /* 8px */ --spacing-sm: var(--space-3); /* 12px */ --spacing-md: var(--space-4); /* 16px */ --spacing-lg: var(--space-6); /* 24px */ --spacing-xl: var(--space-8); /* 32px */ --spacing-2xl: var(--space-12); /* 48px */ --spacing-3xl: var(--space-16); /* 64px */ --spacing-section: var(--space-24); /* 96px */ --spacing-section-lg: var(--space-32); /* 128px */ /* Layout */ --container-max: 1280px; --container-narrow: 768px; --container-wide: 1440px; --container-padding: var(--space-6); /* 24px sides on desktop */ /* -------------------------------------------------------------------------- BORDER RADIUS -------------------------------------------------------------------------- */ --radius-sm: 0.25rem; /* 4px — tags, badges */ --radius-md: 0.5rem; /* 8px — inputs */ --radius-lg: 0.75rem; /* 12px — cards */ --radius-xl: 1rem; /* 16px — feature cards */ --radius-2xl: 1.5rem; /* 24px — large cards */ --radius-3xl: 2rem; /* 32px — hero panels */ --radius-full: 9999px; /* pills, avatars */ /* -------------------------------------------------------------------------- SHADOWS -------------------------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4); /* Electric glow shadows */ --shadow-glow-blue: 0 0 20px rgba(0, 212, 255, 0.25), 0 0 60px rgba(0, 212, 255, 0.10); --shadow-glow-blue-strong: 0 0 30px rgba(0, 212, 255, 0.40), 0 0 80px rgba(0, 212, 255, 0.15), 0 0 120px rgba(0, 212, 255, 0.05); --shadow-glow-cyan: 0 0 20px rgba(34, 211, 238, 0.25), 0 0 60px rgba(34, 211, 238, 0.10); --shadow-glow-emerald: 0 0 20px rgba(52, 211, 153, 0.25), 0 0 60px rgba(52, 211, 153, 0.08); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 24px rgba(0, 212, 255, 0.15), inset 0 1px 0 rgba(0, 212, 255, 0.08); /* -------------------------------------------------------------------------- TRANSITIONS & ANIMATIONS -------------------------------------------------------------------------- */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */ --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-colors: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); --transition-transform: transform var(--duration-normal) var(--ease-spring); --transition-shadow: box-shadow var(--duration-normal) var(--ease-out); --transition-all: all var(--duration-normal) var(--ease-out); /* -------------------------------------------------------------------------- Z-INDEX SCALE -------------------------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 20; --z-sticky: 40; --z-overlay: 60; --z-modal: 100; --z-toast: 200; --z-tooltip: 300; /* -------------------------------------------------------------------------- BREAKPOINTS (for reference — use in media queries) sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- COMPONENT-SPECIFIC TOKENS -------------------------------------------------------------------------- */ /* Navigation */ --nav-height: 4.5rem; /* 72px */ --nav-height-scrolled: 3.5rem; /* 56px */ --nav-bg: var(--gradient-nav-glass); --nav-blur: 16px; /* Buttons */ --btn-height-sm: 2.25rem; /* 36px */ --btn-height-md: 2.75rem; /* 44px */ --btn-height-lg: 3.25rem; /* 52px */ --btn-padding-x-sm: var(--space-4); --btn-padding-x-md: var(--space-6); --btn-padding-x-lg: var(--space-8); --btn-radius: var(--radius-md); /* Code blocks */ --code-bg: #0a0f1e; --code-border: rgba(0, 212, 255, 0.15); --code-header-bg: rgba(0, 212, 255, 0.05); --code-font-size: var(--text-sm); --code-line-height: 1.7; /* Cards */ --card-padding: var(--space-6); --card-radius: var(--radius-xl); --card-border: var(--color-border-default); --card-bg: var(--color-surface-card); }