/* ============================================================================ PlayPad — Material Design 3 design tokens ---------------------------------------------------------------------------- The single source of visual truth. Build every surface from these custom properties — never hardcode raw hex/px in components. Seeded from the original Colour Rush prototype so the hub and the games feel like one product (brand pink #FF375F → MD3 primary; near-black #08080c → surface). Dark is the default (:root); light overrides the SAME role names under prefers-color-scheme: light, so components never branch on theme. Reference distilled in our own words from Material Design 3 (https://m3.material.io). No copied text or brand assets. ========================================================================== */ :root { /* ---- Color roles · DARK (default) -------------------------------------- */ /* Primary — the brand pink, lightened to clear AA on dark surfaces */ --md-sys-color-primary: #ff6b85; --md-sys-color-on-primary: #5a0017; --md-sys-color-primary-container: #7d1530; --md-sys-color-on-primary-container: #ffd9df; /* Secondary — muted, supportive */ --md-sys-color-secondary: #e5bdc4; --md-sys-color-on-secondary: #44262c; --md-sys-color-secondary-container: #5d3a40; --md-sys-color-on-secondary-container: #ffd9df; /* Tertiary — warm gold accent drawn from the brand gradient */ --md-sys-color-tertiary: #f4c26b; --md-sys-color-on-tertiary: #3e2e00; --md-sys-color-tertiary-container: #5a4300; --md-sys-color-on-tertiary-container: #ffe08a; /* Error */ --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; /* Surfaces — stepped tonal containers (seeded from the prototype) */ --md-sys-color-surface: #08080c; --md-sys-color-surface-dim: #08080c; --md-sys-color-surface-bright: #2e2e38; --md-sys-color-surface-container-lowest: #040407; --md-sys-color-surface-container-low: #111118; --md-sys-color-surface-container: #15151c; --md-sys-color-surface-container-high: #1d1d27; --md-sys-color-surface-container-highest: #292935; /* Content on surfaces */ --md-sys-color-on-surface: #f4f4f7; --md-sys-color-on-surface-variant: #c5c5d0; /* Outlines */ --md-sys-color-outline: #908f99; --md-sys-color-outline-variant: #44444e; /* Inverse (for snackbars etc.) */ --md-sys-color-inverse-surface: #e5e1e9; --md-sys-color-inverse-on-surface: #1c1b1f; --md-sys-color-inverse-primary: #b5103a; /* Fixed */ --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; /* ---- Brand palette (the six-stop gradient + full game palette) --------- */ --brand-gradient: linear-gradient( 92deg, #ff375f, #ff9f0a 30%, #ffd60a 48%, #30d158 66%, #0a84ff 84%, #bf5af2 ); --brand-red: #ff453a; --brand-blue: #0a84ff; --brand-green: #30d158; --brand-yellow: #ffd60a; --brand-orange: #ff9f0a; --brand-purple: #bf5af2; --brand-pink: #ff375f; --brand-cyan: #64d2ff; /* ---- Typescale (Roboto-ish system stack; size / line / weight) --------- */ --md-sys-typeface-plain: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif; --md-sys-typescale-display-large-size: clamp(40px, 8vw, 57px); --md-sys-typescale-display-large-line: 1.12; --md-sys-typescale-display-large-weight: 800; --md-sys-typescale-display-medium-size: clamp(34px, 6vw, 45px); --md-sys-typescale-display-medium-line: 1.16; --md-sys-typescale-display-medium-weight: 800; --md-sys-typescale-display-small-size: clamp(28px, 5vw, 36px); --md-sys-typescale-display-small-line: 1.22; --md-sys-typescale-display-small-weight: 700; --md-sys-typescale-headline-large-size: clamp(26px, 4.5vw, 32px); --md-sys-typescale-headline-large-line: 1.25; --md-sys-typescale-headline-large-weight: 700; --md-sys-typescale-headline-medium-size: 28px; --md-sys-typescale-headline-medium-line: 1.29; --md-sys-typescale-headline-medium-weight: 700; --md-sys-typescale-headline-small-size: 24px; --md-sys-typescale-headline-small-line: 1.33; --md-sys-typescale-headline-small-weight: 600; --md-sys-typescale-title-large-size: 22px; --md-sys-typescale-title-large-line: 1.27; --md-sys-typescale-title-large-weight: 700; --md-sys-typescale-title-medium-size: 16px; --md-sys-typescale-title-medium-line: 1.5; --md-sys-typescale-title-medium-weight: 600; --md-sys-typescale-title-small-size: 14px; --md-sys-typescale-title-small-line: 1.43; --md-sys-typescale-title-small-weight: 600; --md-sys-typescale-body-large-size: 16px; --md-sys-typescale-body-large-line: 1.5; --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-medium-size: 14px; --md-sys-typescale-body-medium-line: 1.5; --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-small-size: 12px; --md-sys-typescale-body-small-line: 1.5; --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-label-large-size: 14px; --md-sys-typescale-label-large-line: 1.43; --md-sys-typescale-label-large-weight: 600; --md-sys-typescale-label-large-tracking: 0.01em; --md-sys-typescale-label-medium-size: 12px; --md-sys-typescale-label-medium-line: 1.33; --md-sys-typescale-label-medium-weight: 600; --md-sys-typescale-label-medium-tracking: 0.04em; --md-sys-typescale-label-small-size: 11px; --md-sys-typescale-label-small-line: 1.45; --md-sys-typescale-label-small-weight: 600; --md-sys-typescale-label-small-tracking: 0.05em; /* ---- Shape (corner radii) --------------------------------------------- */ --md-sys-shape-corner-none: 0; --md-sys-shape-corner-xs: 4px; --md-sys-shape-corner-sm: 8px; --md-sys-shape-corner-md: 12px; --md-sys-shape-corner-lg: 16px; --md-sys-shape-corner-xl: 28px; --md-sys-shape-corner-full: 999px; /* ---- Spacing (4dp grid) ------------------------------------------------ */ --md-sys-spacing-xs: 4px; --md-sys-spacing-sm: 8px; --md-sys-spacing-md: 16px; --md-sys-spacing-lg: 24px; --md-sys-spacing-xl: 32px; --md-sys-spacing-2xl: 48px; /* ---- Elevation (shadow recipes, levels 0–5) --------------------------- */ --md-sys-elevation-level0: none; --md-sys-elevation-level1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15); --md-sys-elevation-level2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15); --md-sys-elevation-level3: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15); --md-sys-elevation-level4: 0 2px 3px rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15); --md-sys-elevation-level5: 0 4px 4px rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15); /* ---- Motion ------------------------------------------------------------ */ --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1); --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0.9, 0.25, 1); --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --md-sys-motion-duration-short1: 50ms; --md-sys-motion-duration-short2: 100ms; --md-sys-motion-duration-short3: 150ms; --md-sys-motion-duration-short4: 200ms; --md-sys-motion-duration-medium1: 250ms; --md-sys-motion-duration-medium2: 300ms; --md-sys-motion-duration-long1: 450ms; --md-sys-motion-duration-long2: 500ms; /* ---- State-layer opacities -------------------------------------------- */ --md-sys-state-hover-opacity: 0.08; --md-sys-state-focus-opacity: 0.10; --md-sys-state-pressed-opacity: 0.10; --md-sys-state-dragged-opacity: 0.16; color-scheme: dark; } /* ---- Color roles · LIGHT (system override) ------------------------------ */ @media (prefers-color-scheme: light) { :root { --md-sys-color-primary: #b5103a; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #ffd9df; --md-sys-color-on-primary-container: #3e0014; --md-sys-color-secondary: #74565b; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #ffd9df; --md-sys-color-on-secondary-container: #2b151a; --md-sys-color-tertiary: #7a5900; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #ffe08a; --md-sys-color-on-tertiary-container: #261a00; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #410002; --md-sys-color-surface: #fff8f7; --md-sys-color-surface-dim: #e7d6d8; --md-sys-color-surface-bright: #fff8f7; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #fff0f1; --md-sys-color-surface-container: #fceaec; --md-sys-color-surface-container-high: #f6e4e6; --md-sys-color-surface-container-highest: #f0dee1; --md-sys-color-on-surface: #201a1b; --md-sys-color-on-surface-variant: #524345; --md-sys-color-outline: #847375; --md-sys-color-outline-variant: #d7c1c4; --md-sys-color-inverse-surface: #362f30; --md-sys-color-inverse-on-surface: #fbedee; --md-sys-color-inverse-primary: #ffb1c0; color-scheme: light; } }