/* * CTRL-ALT-ADAPT Design Tokens - Retro CRT Edition * Mobile-first design system with WCAG 2.2 AA compliance */ :root { /* ===== COLORS ===== */ /* Background - Retro green phosphor theme */ --bg: #3d5c49; /* Dark green base (from Figma backplate) */ --bg-elevated: #4a6b57; /* Slightly lighter for form container */ --bg-overlay: rgba(0, 0, 0, 0.2); /* Dark overlay for terminal effect */ /* Text - Dual phosphor CRT colors */ --text-hero: #FFBF00; /* P3 amber phosphor for headlines */ --text-green: #0EDF18; /* P1 green phosphor primary */ --text-green-alt: #10DD19; /* Bright green alternate */ --text-amber: #FFBF00; /* P3 amber for warm elements */ --text-amber-bright: #FFD700; /* Brighter amber/gold for highlights */ --text-muted: #A1A9A0; /* Muted gray for footer */ --text-inverse: #ffffff; /* White for high emphasis */ /* Form elements */ --input-bg: #7F6B17; /* Dark olive input background */ --input-border: #5F5817; /* Darker olive border */ --input-text: #FFBF00; /* Amber input text */ --input-placeholder: rgba(255, 191, 0, 0.6); /* Dimmed amber for placeholder */ /* Button */ --button-bg: #1D9209; /* Green button background */ --button-bg-hover: #2DAA1B; /* Lighter green on hover */ --button-border: #489F39; /* Green button border */ --button-text: #93E592; /* Light green button text */ /* Semantic colors */ --error: #ff4444; --success: #0EDF18; --warning: #ffaa00; /* CRT Effects - Dual phosphor */ --phosphor-glow: rgba(14, 223, 24, 0.4); /* Green phosphor glow */ --glow-green: rgba(14, 223, 24, 0.4); /* Green phosphor bloom */ --glow-amber: rgba(255, 191, 0, 0.6); /* Amber phosphor bloom */ --glow-amber-bright: rgba(255, 191, 0, 0.9); /* Intense amber */ --scanline-color: rgba(0, 0, 0, 0.05); /* Subtle scan lines */ --crt-border: rgba(14, 223, 24, 0.15); /* Terminal border */ /* ===== TYPOGRAPHY ===== */ /* Fonts for retro terminal aesthetic */ --font-pixel: 'Press Start 2P', 'Courier New', Courier, monospace; /* Blocky pixel font for brand */ --font-mono-display: 'Roboto Mono', 'Courier New', Courier, monospace; --font-mono-body: 'IBM Plex Mono', 'Menlo', 'Monaco', 'Consolas', monospace; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Figma-based type scale */ --text-xs: clamp(0.75rem, 2vw, 0.875rem); /* 12–14px */ --text-sm: clamp(0.875rem, 2.2vw, 1rem); /* 14–16px */ --text-base: clamp(1rem, 2.5vw, 1.125rem); /* 16–18px - 17px from Figma footer */ --text-form: clamp(1.125rem, 2.8vw, 1.3rem); /* 18–21px - 20.7px from Figma input */ --text-button: clamp(1.25rem, 3vw, 1.5rem); /* 20–24px - 24.2px from Figma button */ --text-subhead: clamp(1.5rem, 3.5vw, 1.75rem); /* 24–28px - 28px from Figma subtext */ --text-lg: clamp(1.75rem, 4vw, 2.2rem); /* 28–35px - 34-35px from Figma */ --text-h1: clamp(2rem, 5.5vw, 3.875rem); /* 32–62px - 62px from Figma hero (renamed from --text-hero to avoid conflict) */ --text-kicker: clamp(1.6875rem, 4.5vw, 2.625rem); /* 27–42px - Large pixel font (reduced 25%) */ /* Line heights */ --lh-tight: 1.15; /* Hero headlines - Figma uses 1.167 */ --lh-normal: 1.4; /* Body text - Figma subtext uses 1.4285 */ --lh-base: 1.2; /* Buttons and form elements */ /* Font weights */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Letter spacing for monospace readability */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.05em; /* ===== SPACING ===== */ /* 8px grid system */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ /* ===== RADII ===== */ --radius-sm: 3px; /* Subtle rounding */ --radius-md: 4px; /* Form elements */ --radius-lg: 6px; /* Containers */ --radius-full: 9999px; /* ===== SHADOWS & GLOWS ===== */ /* Text shadows for CRT depth */ --text-shadow-hero: 0 0 10px rgba(255, 191, 0, 0.8), 0 0 20px rgba(255, 191, 0, 0.5), 0 0 30px rgba(255, 191, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.6); --text-shadow-glow: 0 0 20px var(--phosphor-glow); --text-shadow-glow-green: 0 0 8px var(--glow-green); --text-shadow-glow-amber: 0 0 8px var(--glow-amber); /* Box shadows for 3D button effect */ --shadow-button-base: inset 0 2px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 4px 12px rgba(29, 146, 9, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-button-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(29, 146, 9, 0.3); /* Input shadows for depth */ --shadow-input-base: inset 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-input-focus: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 12px var(--glow-amber), inset 0 0 20px rgba(255, 191, 0, 0.1); /* Container shadow for terminal frame */ --shadow-terminal: inset 0 2px 8px rgba(0, 0, 0, 0.3); /* ===== TRANSITIONS ===== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); /* ===== BREAKPOINTS ===== */ --bp-mobile: 390px; --bp-tablet: 768px; --bp-desktop: 1440px; /* ===== Z-INDEX SCALE ===== */ --z-base: 1; --z-scanlines: 2; /* Scan line overlay */ --z-content: 10; /* Main content */ --z-cursor: 20; /* Blinking cursor */ --z-elevated: 50; --z-modal: 100; /* ===== TOUCH TARGETS ===== */ --touch-target: 44px; /* Minimum 44×44px for accessibility */ /* ===== ANIMATION TIMING ===== */ --cursor-blink-speed: 1s; --typewriter-char-speed: 50ms; --shimmer-duration: 1.5s; } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --cursor-blink-speed: 0ms; --typewriter-char-speed: 0ms; --shimmer-duration: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }