/* * Material 3 tokens for King Teen Patti (requirement 23). * * A single tonal palette drives both schemes: `:root` carries the dark values * (the game's default look) and `[data-theme="light"]` overrides them. Every * colour in the app comes from these tokens, so the theme toggle is a single * attribute flip rather than a restyle. * * Names follow the M3 colour roles so the mapping is obvious: surface holds * content, on-surface writes on it, and each container/on-container pair is * guaranteed to meet contrast. */ :root { /* Primary — the felt green the game is built around. */ --md-primary: #7fd6a4; --md-on-primary: #00391f; --md-primary-container: #00522f; --md-on-primary-container: #9bf3c0; /* Secondary — the gold used for chips and money. */ --md-secondary: #e8c46a; --md-on-secondary: #3d2e00; --md-secondary-container: #574400; --md-on-secondary-container: #ffe08b; /* Tertiary — accents that are neither felt nor money. */ --md-tertiary: #a5c8e4; --md-on-tertiary: #06344b; --md-tertiary-container: #234b64; --md-on-tertiary-container: #c5e4ff; --md-error: #ffb4ab; --md-on-error: #690005; --md-error-container: #93000a; --md-on-error-container: #ffdad6; --md-surface: #0d1411; --md-on-surface: #dfe4df; --md-surface-variant: #3f4943; --md-on-surface-variant: #bfc9c2; --md-outline: #899390; --md-outline-variant: #3f4943; /* Elevation is expressed as surface tint over the base surface. */ --md-surface-1: #151d19; --md-surface-2: #19241f; --md-surface-3: #1e2a24; --md-surface-4: #202c26; --md-surface-5: #24312a; --md-scrim: rgba(0, 0, 0, 0.72); --md-inverse-surface: #dfe4df; --md-inverse-on-surface: #2c322f; /* Shape scale. */ --md-shape-xs: 4px; --md-shape-s: 8px; --md-shape-m: 12px; --md-shape-l: 16px; --md-shape-xl: 28px; --md-shape-full: 999px; /* Elevation shadows. */ --md-elev-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15); --md-elev-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15); --md-elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3); /* State layer opacities, straight from the M3 spec. */ --md-state-hover: 0.08; --md-state-focus: 0.12; --md-state-press: 0.12; --md-motion-short: 150ms; --md-motion-medium: 250ms; --md-easing: cubic-bezier(0.2, 0, 0, 1); } [data-theme="light"] { --md-primary: #006c42; --md-on-primary: #ffffff; --md-primary-container: #9bf3c0; --md-on-primary-container: #002110; --md-secondary: #6d5c00; --md-on-secondary: #ffffff; --md-secondary-container: #ffe08b; --md-on-secondary-container: #221b00; --md-tertiary: #3b6377; --md-on-tertiary: #ffffff; --md-tertiary-container: #c5e4ff; --md-on-tertiary-container: #001e2c; --md-error: #ba1a1a; --md-on-error: #ffffff; --md-error-container: #ffdad6; --md-on-error-container: #410002; --md-surface: #f5fbf5; --md-on-surface: #171d1a; --md-surface-variant: #dce5dd; --md-on-surface-variant: #414942; --md-outline: #717972; --md-outline-variant: #c0c9c1; --md-surface-1: #eef5ef; --md-surface-2: #e8f1ea; --md-surface-3: #e2ede5; --md-surface-4: #e0ebe3; --md-surface-5: #dce9df; --md-scrim: rgba(0, 0, 0, 0.45); --md-inverse-surface: #2c322f; --md-inverse-on-surface: #edf2ed; } /* * Day mode is the product default, so the page ships with data-theme="light" * on . The toggle writes the player's choice to localStorage and the * client re-applies it before the first paint of the app. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }