/* ============================================================================= PARKOUR — Parking Game Design System colors_and_type.css — foundational tokens (color + type) Theme: Retro / minimalist 80s arcade. Dark UI, neon accents. Fonts are loaded from Google Fonts (see in each HTML file): - "Press Start 2P" : pixel arcade display (logo, big numerics, ratings) - "Chakra Petch" : techno UI face (HUD, body, buttons, labels) ========================================================================== */ :root { /* --------------------------------------------------------------------------- NEUTRALS — the "asphalt" ramp. Dark arcade cabinet greys. #2B2B2B (bg) and #444444 (floor) come straight from the spec. --------------------------------------------------------------------------- */ --ink-950: #161616; /* deepest — modal scrims, shadow base */ --ink-900: #1E1E1E; /* app shell background */ --ink-800: #2B2B2B; /* SPEC: fondo / game background */ --ink-700: #363636; /* raised panels, HUD bar */ --ink-600: #444444; /* SPEC: piso / playfield floor */ --ink-500: #555555; /* dividers on dark, disabled fills */ --ink-400: #6E6E6E; /* subtle borders, parking-line grey */ --ink-300: #9A9A9A; /* muted text on dark */ --ink-100: #D8D8D8; /* secondary text */ --paper: #FFFFFF; /* SPEC: líneas + HUD text — pure white */ /* --------------------------------------------------------------------------- NEON ACCENTS — the glow layer. Used sparingly, high energy. --------------------------------------------------------------------------- */ --neon-green: #00FF00; /* SPEC: plaza objetivo / success / "go" */ --neon-cyan: #4ECDC4; /* primary UI accent (buttons, focus, joystick) */ --neon-amber: #FFE66D; /* highlights, stars, recommended badges */ --neon-red: #FF0000; /* SPEC: daño / colisión / destructive */ /* Glow halos (drop into box-shadow / text-shadow for the arcade bloom) */ --glow-green: 0 0 12px rgba(0, 255, 0, 0.55); --glow-cyan: 0 0 12px rgba(78, 205, 196, 0.55); --glow-amber: 0 0 12px rgba(255, 230, 109, 0.55); --glow-red: 0 0 14px rgba(255, 0, 0, 0.60); /* --------------------------------------------------------------------------- CAR PALETTE — flat retro fills for procedurally placed vehicles. First four are from the spec; the rest extend it harmoniously. --------------------------------------------------------------------------- */ --car-1: #FF6B6B; /* coral red (spec) */ --car-2: #4ECDC4; /* teal (spec) */ --car-3: #FFE66D; /* sun yellow (spec) */ --car-4: #95E1D3; /* mint (spec) */ --car-5: #F38BA8; /* rose */ --car-6: #74C0FC; /* sky */ --car-7: #C792EA; /* lilac */ --car-8: #FFA94D; /* orange */ /* --------------------------------------------------------------------------- SEMANTIC — meaning-mapped aliases. Reference these in UI, not raw hex. --------------------------------------------------------------------------- */ --color-bg: var(--ink-900); --color-surface: var(--ink-800); --color-surface-raised:var(--ink-700); --color-playfield: var(--ink-600); --color-text: var(--paper); --color-text-muted: var(--ink-300); --color-text-faint: var(--ink-400); --color-accent: var(--neon-cyan); /* default interactive accent */ --color-success: var(--neon-green); --color-danger: var(--neon-red); --color-warning: var(--neon-amber); --color-target: var(--neon-green); /* parking zone */ --color-line: var(--paper); /* painted floor lines */ --color-border: var(--ink-400); --color-border-strong: var(--ink-300); /* Obstacle hatch (diagonal warning fill on columns/borders) */ --color-obstacle: #3A3A3A; --color-obstacle-edge: #585858; /* --------------------------------------------------------------------------- TYPE — families + fluid scale. Arcade pixel display + techno UI face. --------------------------------------------------------------------------- */ --font-display: "Press Start 2P", "Chakra Petch", monospace; /* pixel arcade */ --font-ui: "Chakra Petch", "Segoe UI", system-ui, sans-serif; --font-mono: "Chakra Petch", ui-monospace, "SFMono-Regular", monospace; /* Weights (Chakra Petch ships 300/400/500/600/700) */ --fw-light: 300; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; /* Type scale — UI face. Display sizes (pixel font) are intentionally smaller in px because Press Start 2P renders large per glyph. */ --fs-logo: clamp(28px, 6vw, 44px); /* Press Start 2P — title screen */ --fs-h1: clamp(22px, 4.4vw, 34px); --fs-h2: clamp(18px, 3.2vw, 24px); --fs-h3: 16px; --fs-body: 15px; --fs-small: 13px; --fs-micro: 11px; /* never below this in UI */ /* HUD numerics get their own ramp — big, tabular, glanceable */ --fs-hud-stat: clamp(20px, 5vw, 30px); --fs-hud-label: 11px; --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.5; --ls-display: 0.5px; --ls-label: 1.5px; /* uppercase HUD/button labels are tracked out */ --ls-body: 0px; /* --------------------------------------------------------------------------- SPACING — 4px base grid. Touch targets never below --space-touch (44px). --------------------------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-touch: 44px; /* min interactive size — mobile a11y floor */ /* --------------------------------------------------------------------------- RADII — slightly soft. Arcade is boxy; we round just enough to feel tactile. --------------------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; /* cars, chips */ --radius-lg: 14px; /* cards, panels */ --radius-xl: 20px; /* modals */ --radius-pill: 999px; /* --------------------------------------------------------------------------- ELEVATION — flat dark UI. Shadows are deep + tight; "lift" comes from neon glow rather than soft ambient shadow. --------------------------------------------------------------------------- */ --shadow-1: 0 1px 0 rgba(255,255,255,0.04), 0 2px 6px rgba(0,0,0,0.45); --shadow-2: 0 2px 0 rgba(255,255,255,0.04), 0 6px 18px rgba(0,0,0,0.55); --shadow-3: 0 4px 0 rgba(0,0,0,0.5), 0 14px 40px rgba(0,0,0,0.65); --shadow-inset: inset 0 0 0 1px rgba(255,255,255,0.06); /* Pressable buttons get a hard "cabinet" bottom edge that collapses on press */ --btn-edge: 0 4px 0 rgba(0,0,0,0.55); --btn-edge-press: 0 1px 0 rgba(0,0,0,0.55); /* --------------------------------------------------------------------------- MOTION — snappy, arcade-y. Quick eases; blinking indicators; no slow fades. --------------------------------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* snap to rest */ --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot / bounce */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ============================================================================= SEMANTIC ELEMENT DEFAULTS — apply on top of a reset. ========================================================================== */ .ds-logo { font-family: var(--font-display); font-size: var(--fs-logo); line-height: var(--lh-tight); color: var(--neon-green); text-shadow: var(--glow-green); letter-spacing: var(--ls-display); } h1, .ds-h1 { font-family: var(--font-ui); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--color-text); } h2, .ds-h2 { font-family: var(--font-ui); font-weight: var(--fw-semi); font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--color-text); } h3, .ds-h3 { font-family: var(--font-ui); font-weight: var(--fw-semi); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--color-text); } p, .ds-body { font-family: var(--font-ui); font-weight: var(--fw-reg); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text); } .ds-muted { color: var(--color-text-muted); } /* Tracked-out uppercase label — HUD captions, button text, tabs */ .ds-label { font-family: var(--font-ui); font-weight: var(--fw-semi); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--color-text); } /* HUD stat readout — big tabular numerics */ .ds-stat { font-family: var(--font-ui); font-weight: var(--fw-bold); font-size: var(--fs-hud-stat); font-variant-numeric: tabular-nums; line-height: 1; color: var(--color-text); } /* Pixel display — use SPARINGLY (logo, level number, "GAME OVER") */ .ds-pixel { font-family: var(--font-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } code, .ds-code { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--neon-cyan); }