/* ============================================================================= mix tape — Design Tokens All CSS custom properties for both themes. Never hardcode any of these values in styles.css — always reference a token. Theme is applied via data-theme="dark" or data-theme="light" on . ============================================================================= */ /* ============================================================================= SHARED — values that never change between themes ============================================================================= */ :root { /* Screen (always the same regardless of theme) */ --screen-bg: oklch(0.21 0 0); /* #181818 */ --screen-text: oklch(0.682 0.112 138); /* #74a871 */ --screen-text-dim: oklch(0.574 0.138 142); /* #4a8f57 */ --screen-inner-shadow: inset 20px 20px 40px oklch(0 0 0 / 0.20), inset 15px 15px 30px oklch(0 0 0 / 0.15), inset 10px 10px 20px oklch(0 0 0 / 0.15), inset 20px 20px 20px oklch(0 0 0 / 0.15); --screen-glow: 0px 0px 1.07px oklch(0.75 0.22 142 / 0.30), /* #66d260 @ 30% */ 0px 0px 1.60px oklch(0.88 0.10 142 / 0.20), /* #b2eaaf @ 20% */ 0px 0px 2.14px oklch(0.82 0.10 142 / 0.05); /* #9acf97 @ 5% */ /* Clock display */ --clock-text: oklch(0.572 0 0); /* #787878 */ --clock-inner-shadow: inset 12px 12px 32px oklch(0 0 0 / 0.20), inset 7px 7px 22px oklch(0 0 0 / 0.15), inset 2px 2px 12px oklch(0 0 0 / 0.15), inset 12px 12px 12px oklch(0 0 0 / 0.15); /* Power LED */ --led-gradient: radial-gradient(50% 50% at 50% 50%, oklch(0.78 0.22 142) 0%, /* #68da62 */ oklch(0.55 0.13 142) 100%); /* #579253 */ --led-stroke: oklch(0.5 0.05 145.24 / 0.38); /* #1f291e */ --led-glow: drop-shadow(0 0 2px oklch(0.75 0.22 142 / 0.30)) /* #66d260 @ 30% */ drop-shadow(0 0 3px oklch(0.75 0.22 142 / 0.20)) drop-shadow(0 0 4px oklch(0.75 0.22 142 / 0.05)); /* Power LED off state */ --led-off-gradient: radial-gradient(50% 50% at 50% 50%, oklch(0.18 0 0) 0%, oklch(0.14 0 0) 100%); --led-off-stroke: oklch(0.12 0 0); /* Screen off state */ --screen-off-bg: oklch(0.136 0 0); /* ≈ #212121 from Figma */ --no-power-text: oklch(0.572 0 0); /* ≈ #8c8c8c from Figma */ /* Screen glitch-on flash colours */ --screen-glitch-flash-1: oklch(0.25 0.04 140); --screen-glitch-flash-2: oklch(0.22 0.05 140); --screen-glitch-flash-3: oklch(0.26 0.07 140); /* Slider thumb (shared geometry, colours differ per theme) */ --slider-thumb-border: 0.2px solid transparent; --slider-thumb-border-image: linear-gradient(in oklch 130deg, #808080 0%, #222222 70%) 1; --slider-thumb-radius: 2px; --slider-thumb-shadow: 20px 20px 40px oklch(0 0 0 / 0.10), 16px 16px 32px oklch(0 0 0 / 0.15), 12px 12px 24px oklch(0 0 0 / 0.20), 8px 8px 16px oklch(0 0 0 / 0.15), 4px 4px 8px oklch(0 0 0 / 0.30); /* Typography */ --font-screen: 'Share Tech Mono', monospace; --font-ui: 'Space Grotesk', sans-serif; /* Border radius */ --radius-device: 20px; --radius-panel: 10px; --radius-button: 8px; --radius-screen: 6px; --radius-button-cap: 12px; /* Screen bezel and progress track */ --color-screen-bezel-border: oklch(0.16 0 0); /* #0d0d0d — outer frame edge */ --screen-track: oklch(0.32 0.02 157.53); /* dark green progress channel */ /* Tamagotchi game — status bar color states (screen-scoped, theme-independent) */ --tama-bar-warning: oklch(0.75 0.14 85); /* amber for 25-50% */ --tama-bar-danger: oklch(0.55 0.18 25); /* red for <25% */ /* Top-bar section tiles */ --clock-bg: oklch(0.17 0 0); /* #212121 — inner clock display recess */ /* Speaker grille */ --color-grille-dot: oklch(0.162 0 0); /* Screen layout spacing — adjust these to control vertical space inside the LCD */ --screen-padding: 12px; /* inner padding of .screen-outline */ --screen-content-gap: 8px; /* gap between sections in .screen-content */ --screen-song-info-gap: 8px; /* gap between artist & title lines */ --screen-song-info-padding: 8px; /* vertical padding around the artist/title block */ --screen-time-gap: 12px; /* horizontal gap in the time row (time / bar / time) */ --screen-time-margin: 4px; /* vertical margin above/below the time container */ --visualizer-height: 56px; /* height of the visualizer bar area */ /* Screen font sizes */ --screen-font-label: 14px; /* "PLAYING / PAUSED" label */ --screen-font-artist: 16px; /* artist name */ --screen-font-title: 32px; /* song title (largest) */ /* Transitions */ --transition-button: box-shadow 80ms ease; --transition-theme: background-color 200ms ease, color 200ms ease; } /* ============================================================================= DARK THEME (default) ============================================================================= */ [data-theme="dark"] { /* Page */ --color-background: oklch(0.28 0 0); /* #1c1c1c */ /* Device layers */ --color-frame: oklch(0 0 0); /* #000000 */ --color-body: oklch(0.224 0 0); /* #2b2b2b */ --color-panel: oklch(0.224 0 0); /* #2b2b2b */ --color-button-face: oklch(0.224 0 0); /* #2b2b2b */ /* Icon colour */ --color-icon: oklch(1 0 0 / 0.75); /* #fff @ 75% */ /* Page copy text */ --color-text-primary: oklch(1 0 0 / 1); /* #fff @ 100% */ --color-text-secondary: oklch(1 0 0 / 0.60); /* #fff @ 60% */ /* Shadows */ --shadow-drop-subtle: none; --shadow-button: 6px 6px 12px 6px oklch(0 0 0 / 0.35), 4px 4px 8px 4px oklch(0 0 0 / 0.20), 3px 3px 4px 0px oklch(0 0 0 / 0.40), -2px -2px 6px 0px oklch(0.5 0 0 / 0.40); /* #707070 @ 40% */ --shadow-button-pressed: inset -2px -2px 5px 4px oklch(0 0 0 / 0.30), inset 8px 8px 7px 0px oklch(0 0 0 / 0.20), inset 7px 7px 7px 0px oklch(0 0 0 / 0.15), inset 5px 5px 4px 0px oklch(0 0 0 / 0.15), inset 3px 3px 4px 0px oklch(0 0 0 / 0.15); --shadow-panel: 2px 2px 5px oklch(0 0 0 / 0.25), -1px 0px 3px oklch(0.5 0 0 / 0.25); /* #707070 @ 25% */ /* Device page shadow */ --shadow-device: 54px 86px 100px 0 rgba(0, 0, 0, 0.10), 42px 62px 80px 0 rgba(0, 0, 0, 0.20), 30px 42px 60px 0 rgba(0, 0, 0, 0.30), 18px 30px 36px 0 rgba(0, 0, 0, 0.35), 10px 22px 20px 0 rgba(0, 0, 0, 0.40); /* Shell border */ --gradient-shell-border: linear-gradient(in oklch 330deg, oklch(0.18 0 0) 65%, oklch(0.297 0 0) 90%); /* Button border */ --gradient-button-border: linear-gradient(in oklch 330deg, oklch(0.15 0 0) 50%, oklch(0.27 0 0 / 1) 80%); --gradient-border-inverted: linear-gradient(in oklch 150deg, oklch(0.15 0 0) 65%, oklch(0.297 0 0) 90%); --shadow-btn-base-border: none; /* Slider */ --slider-track-color: oklch(0 0 0); /* #000000 */ --slider-thumb-gradient: linear-gradient(176deg, oklch(0.18 0 0) -12.98%, /* #4a4a4a */ oklch(0.45 0 0) 44.63%, /* #969696 */ oklch(0.18 0 0) 101.95%); /* #585858 */ } /* ============================================================================= LIGHT THEME ============================================================================= */ [data-theme="light"] { /* Page */ --color-background: oklch(0.824 0.004 80); /* #cac8c8 */ /* Device layers */ --color-frame: oklch(0.36 0 0); /* #585858 */ --color-body: oklch(0.604 0 0); /* #909090 */ --color-panel: oklch(0.604 0 0); /* #909090 */ --color-button-face: oklch(0.604 0 0); /* #909090 */ /* Clock inner */ --clock-bg: oklch(0.28 0 0); /* #292929 */ /* Screen off state */ --screen-off-bg: oklch(0.28 0 0); /* #292929 */ /* Screen bezel */ --color-screen-bezel-border: oklch(0.45 0 0); /* Icon colour */ --color-icon: oklch(0.284 0 0); /* #3a3a3a */ /* Page copy text */ --color-text-primary: oklch(0 0 0 / 1); /* #000 @ 100% */ --color-text-secondary: oklch(0 0 0 / 0.75); /* #000 @ 75% */ /* Shadows */ --shadow-drop-subtle: 2px 2px 2px 1px oklch(0.26 0 0 / 0.3); --shadow-button: 6px 6px 12px 6px oklch(0.28 0 0 / 0.35), 4px 4px 8px 4px oklch(0.28 0 0 / 0.20), 3px 3px 4px 0px oklch(0.28 0 0 / 0.40), -2px -2px 6px 0px oklch(1 0 0 / 0.56), /* #fff @ 40% */ var(--shadow-drop-subtle); --shadow-button-pressed: inset -2px -2px 5px 4px oklch(0 0 0 / 0.30), inset 8px 8px 7px 0px oklch(0 0 0 / 0.20), inset 7px 7px 7px 0px oklch(0 0 0 / 0.15), inset 5px 5px 4px 0px oklch(0 0 0 / 0.15), inset 3px 3px 4px 0px oklch(0 0 0 / 0.15); --shadow-panel: 2px 2px 5px oklch(0 0 0 / 0.25), -1px 0px 3px oklch(0.5 0 0 / 0.25); /* #707070 @ 25% */ /* Device page shadow */ --shadow-device: 54px 86px 100px 0 rgba(0, 0, 0, 0.10), 42px 62px 80px 0 rgba(0, 0, 0, 0.20), 30px 42px 60px 0 rgba(0, 0, 0, 0.30), 18px 30px 36px 0 rgba(0, 0, 0, 0.35), 10px 22px 20px 0 rgba(0, 0, 0, 0.40); /* Button border */ --gradient-button-border: linear-gradient(in oklch 154deg, oklch(0.63 0 0) 23%, oklch(0.37 0 0) 100%); --shadow-btn-base-border: var(--shadow-panel); /* Slider */ --slider-track-color: linear-gradient(160deg, oklch(0.18 0 0) -10%, /* #272626 */ oklch(0.47 0 0) 150.64%); /* #6e6e6e */ --slider-thumb-gradient: linear-gradient(176deg, oklch(0.38 0 60) -12.98%, /* #5b5956 */ oklch(0.62 0 60) 44.63%, /* #999693 */ oklch(0.28 0 0) 101.95%); /* #4a4a4a */ }