/* ============================================================================ PROMPTINJECTS — DESIGN TOKENS Aesthetic: Retrofuturist + Neobrutalist (restrained / "corporate-funk") Single source of truth for the whole app. Import this file, theme via [data-theme="light"|"dark"] on . Colors POP but stay legible for non-technical rooms. ============================================================================ */ /* ----- 1. RAW PALETTE (theme-agnostic ramps) ------------------------------ */ :root { /* Brand */ --volt-500: #2f4bff; /* electric blue — primary, trustworthy + charged */ --volt-400: #5a72ff; --volt-600: #1e34d6; --volt-100: #e0e5ff; --flare-500: #ff5a3c; /* hot coral — energy, CTAs, "danger-fun" */ --flare-400: #ff7a62; --flare-600: #e23e22; --flare-100: #ffe2db; --acid-500: #c5f730; /* acid lime — "captured!", wins, hacker spark */ --acid-400: #d6fb6a; --acid-600: #a4d80f; --acid-100: #f0fdcf; --grape-500: #8b5cf6; /* violet — secondary, retrofuturist accent */ --grape-400: #a884f8; --grape-600: #6f3ee0; --grape-100: #ece4fe; /* Neutrals — warm ink + warm paper (not cold gray) */ --ink-950: #121118; --ink-900: #1a1922; --ink-800: #26242f; --ink-700: #3a3744; --ink-500: #6b6776; --ink-300: #a8a3b3; --paper-50: #fbf6ec; /* warm cream */ --paper-100: #f4ecda; --paper-200: #e9dec5; --paper-300: #d9cba8; --white: #ffffff; /* Semantic raw */ --green-500: #19b97a; --amber-500: #ffb020; --red-500: #ff3b30; } /* ----- 2. LIGHT THEME (printed-paper retrofuturism) ----------------------- */ :root, [data-theme="light"] { color-scheme: light; --bg-page: var(--paper-50); --bg-surface: var(--white); --bg-surface-alt: var(--paper-100); --bg-sunken: var(--paper-200); --bg-inverse: var(--ink-950); --text-primary: var(--ink-950); --text-secondary: var(--ink-700); --text-tertiary: var(--ink-500); --text-inverse: var(--paper-50); --text-on-brand: var(--white); --text-on-acid: var(--ink-950); --brand: var(--volt-500); --brand-strong: var(--volt-600); --brand-soft: var(--volt-100); --accent: var(--flare-500); --accent-soft: var(--flare-100); --spark: var(--acid-500); --spark-soft: var(--acid-100); --secondary: var(--grape-500); --secondary-soft: var(--grape-100); --success: var(--green-500); --warning: var(--amber-500); --danger: var(--red-500); /* Neobrutalist structure */ --border-color: var(--ink-950); --border-width: 2px; --border: var(--border-width) solid var(--border-color); --shadow-color: var(--ink-950); --shadow-sm: 2px 2px 0 var(--shadow-color); --shadow-md: 4px 4px 0 var(--shadow-color); --shadow-lg: 6px 6px 0 var(--shadow-color); --shadow-brand: 4px 4px 0 var(--volt-500); --shadow-accent: 4px 4px 0 var(--flare-500); } /* ----- 3. DARK THEME (terminal / console retrofuturism) ------------------- */ [data-theme="dark"] { color-scheme: dark; --bg-page: var(--ink-950); --bg-surface: var(--ink-900); --bg-surface-alt: var(--ink-800); --bg-sunken: #0d0c12; --bg-inverse: var(--paper-50); --text-primary: var(--paper-50); --text-secondary: var(--paper-200); --text-tertiary: var(--ink-300); --text-inverse: var(--ink-950); --text-on-brand: var(--white); --text-on-acid: var(--ink-950); --brand: var(--volt-400); --brand-strong: var(--volt-500); --brand-soft: #1c2350; --accent: var(--flare-500); --accent-soft: #4a1f16; --spark: var(--acid-500); --spark-soft: #2c3a0a; --secondary: var(--grape-400); --secondary-soft: #2c2150; --success: #2ee69a; --warning: #ffc24d; --danger: #ff5c52; /* On dark, the hard shadow is near-black + borders go light */ --border-color: #000000; --border-width: 2px; --border: var(--border-width) solid var(--paper-50); --shadow-color: #000000; --shadow-sm: 2px 2px 0 var(--shadow-color); --shadow-md: 4px 4px 0 var(--shadow-color); --shadow-lg: 6px 6px 0 var(--shadow-color); --shadow-brand: 4px 4px 0 var(--volt-400); --shadow-accent: 4px 4px 0 var(--flare-500); } /* ----- 4. TYPOGRAPHY ------------------------------------------------------ */ :root { --font-display: "Space Grotesk", "Arial Black", system-ui, sans-serif; --font-body: "Space Grotesk", system-ui, -apple-system, sans-serif; --font-mono: "Space Mono", "SFMono-Regular", ui-monospace, monospace; /* Fluid display scale (chunky) */ --fs-display: clamp(2.75rem, 6vw, 5rem); --fs-h1: clamp(2rem, 4vw, 3rem); --fs-h2: clamp(1.5rem, 2.6vw, 2rem); --fs-h3: 1.25rem; --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-label: 0.75rem; /* mono labels, uppercase */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.6; --tracking-label: 0.08em; --tracking-tight: -0.02em; } /* ----- 5. SPACING (4px base) ---------------------------------------------- */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; } /* ----- 6. RADIUS (restrained brutalism = small, never pill on cards) ------ */ :root { --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* tags / badges only */ } /* ----- 7. MOTION (snappy, mechanical) ------------------------------------- */ :root { --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1.2); /* slight overshoot */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }