/* TERRA — Material 3 design tokens. Six themes x light/dark, five font stacks, the type scale, shape, elevation and motion. No other file may hard-code a colour. Colour is derived, not hand-picked: one source colour per tonal palette, hue held constant, tone = CIE L*, Lab chroma capped on a curve calibrated against the real M3 baseline ramps (this file reproduces M3's #6750A4 palette to within a rounding step). WCAG relative luminance and L* are both functions of Y, so one tone map fixes the contrast profile of all twelve palettes: on-X / X, on-X-container / X-container >= 4.98:1 (AA needs 4.5) accent, on-surface, on-surface-variant / surface at every container level >= 4.98:1 (AA needs 4.5) --md-outline / surface at every container level >= 3.72:1 (AA UI needs 3) --md-outline-variant is decorative only — dividers, tile seams, flag hairlines — and never a control boundary; every interactive boundary uses --md-outline. Themes: terra (default) · hemish · atlas · monsoon · ember · slate Applied as . A missing data-mode behaves as auto. */ @import url('fonts.css'); :root { /* ---------- shape ---------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 28px; --r-full: 999px; /* ---------- motion ---------- */ --dur-short: 150ms; --dur-med: 300ms; --dur-long: 500ms; --ease-emph: cubic-bezier(.2, 0, 0, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* ---------- state layers (M3: 8% hover, 10% focus, 12% press) ---------- */ --state-hover: .08; --state-focus: .1; --state-press: .12; --state-drag: .16; --opacity-disabled: .38; --opacity-disabled-container: .12; /* ---------- elevation ---------- */ --e0: none; --e1: 0 1px 2px 0 color-mix(in srgb, var(--md-shadow) var(--shadow-key), transparent), 0 1px 3px 1px color-mix(in srgb, var(--md-shadow) var(--shadow-ambient), transparent); --e2: 0 1px 2px 0 color-mix(in srgb, var(--md-shadow) var(--shadow-key), transparent), 0 2px 6px 2px color-mix(in srgb, var(--md-shadow) var(--shadow-ambient), transparent); --e3: 0 1px 3px 0 color-mix(in srgb, var(--md-shadow) var(--shadow-key), transparent), 0 4px 8px 3px color-mix(in srgb, var(--md-shadow) var(--shadow-ambient), transparent); --e4: 0 2px 3px 0 color-mix(in srgb, var(--md-shadow) var(--shadow-key), transparent), 0 6px 10px 4px color-mix(in srgb, var(--md-shadow) var(--shadow-ambient), transparent); --e5: 0 4px 4px 0 color-mix(in srgb, var(--md-shadow) var(--shadow-key), transparent), 0 8px 12px 6px color-mix(in srgb, var(--md-shadow) var(--shadow-ambient), transparent); /* ---------- spacing ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ---------- layout metrics (app.css scales these per breakpoint) ---------- */ --topbar-h: 60px; --rail-w: 0px; --bottomnav-h: 72px; --gutter: 16px; --content-max: 1280px; /* ---------- typography ---------- */ --font-body: 'Roboto Flex', system-ui, sans-serif; --font-display: 'Roboto Flex', system-ui, sans-serif; --font-mono: 'Google Sans Code', ui-monospace, monospace; --tracking-body: 0em; --tracking-heading: 0em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --type-scale: 1; --fs-display-large: calc(clamp(2.25rem, 1.55rem + 3vw, 3.5625rem) * var(--type-scale)); --fs-display-medium: calc(clamp(2rem, 1.5rem + 2.2vw, 2.8125rem) * var(--type-scale)); --fs-display-small: calc(clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem) * var(--type-scale)); --fs-headline-large: calc(clamp(1.5rem, 1.25rem + 1vw, 2rem) * var(--type-scale)); --fs-headline-medium: calc(clamp(1.375rem, 1.2rem + .6vw, 1.75rem) * var(--type-scale)); --fs-headline-small: calc(clamp(1.25rem, 1.15rem + .35vw, 1.5rem) * var(--type-scale)); --fs-title-large: calc(1.375rem * var(--type-scale)); --fs-title-medium: calc(1rem * var(--type-scale)); --fs-title-small: calc(.875rem * var(--type-scale)); --fs-body-large: calc(1rem * var(--type-scale)); --fs-body-medium: calc(.875rem * var(--type-scale)); --fs-body-small: calc(.75rem * var(--type-scale)); --fs-label-large: calc(.875rem * var(--type-scale)); --fs-label-medium: calc(.75rem * var(--type-scale)); --fs-label-small: calc(.6875rem * var(--type-scale)); --lh-display-large: 1.12; --lh-display-medium: 1.16; --lh-display-small: 1.22; --lh-headline-large: 1.25; --lh-headline-medium: 1.29; --lh-headline-small: 1.33; --lh-title-large: 1.27; --lh-title-medium: 1.5; --lh-title-small: 1.43; --lh-body-large: 1.5; --lh-body-medium: 1.43; --lh-body-small: 1.33; --lh-label-large: 1.43; --lh-label-medium: 1.33; --lh-label-small: 1.45; --ls-display-large: -.015em; --ls-display-medium: -.008em; --ls-display-small: 0em; --ls-headline-large: 0em; --ls-headline-medium: 0em; --ls-headline-small: 0em; --ls-title-large: 0em; --ls-title-medium: .009em; --ls-title-small: .006em; --ls-body-large: .031em; --ls-body-medium: .018em; --ls-body-small: .033em; --ls-label-large: .006em; --ls-label-medium: .042em; --ls-label-small: .042em; /* ---------- misc ---------- */ --focus-ring: 2px solid var(--md-primary); --md-backdrop: rgb(0 0 0 / .45); --md-surface-container: var(--md-surface-container-normal); } /* ::backdrop only began inheriting custom properties from its originating element in Chrome 122 / Safari 17.4, and iOS Safari 17.0 is a target — so var(--md-backdrop) in a ::backdrop rule resolved to nothing there and the dialog scrim disappeared entirely. Declaring it on the pseudo-element itself makes it resolve in every engine. Same value, so no drift. */ ::backdrop { --md-backdrop: rgb(0 0 0 / .45); } :root { /* ---------- default theme: Terra, light ---------- deep teal + warm sand — min AA pair 4.99:1, min UI pair 3.72:1 */ color-scheme: light; --shadow-key: 26%; --shadow-ambient: 15%; /* accent roles */ --md-primary: #00696e; --md-on-primary: #ffffff; --md-primary-container: #b6ecef; --md-on-primary-container: #002022; --md-secondary: #3f646c; --md-on-secondary: #ffffff; --md-secondary-container: #c9e8ef; --md-on-secondary-container: #002025; --md-tertiary: #7b5728; --md-on-tertiary: #ffffff; --md-tertiary-container: #f9dec2; --md-on-tertiary-container: #281900; --md-error: #a33c2e; --md-on-error: #ffffff; --md-error-container: #ffdad3; --md-on-error-container: #3a0a00; --md-success: #136735; --md-on-success: #ffffff; --md-success-container: #caebd1; --md-on-success-container: #002207; /* surfaces */ --md-surface: #f4fbfb; --md-on-surface: #151d1d; --md-on-surface-variant: #2d4c4e; --md-surface-container-lowest: #ffffff; --md-surface-container-low: #edf5f6; --md-surface-container-normal: #e7f0f0; --md-surface-container-high: #e0eaea; --md-surface-container-highest: #dae4e5; /* lines, inverse, scrim */ --md-outline: #55787a; --md-outline-variant: #aeccce; --md-inverse-surface: #283233; --md-inverse-on-surface: #eaf2f3; --md-scrim: #000000; --md-shadow: #000000; } /* ---------- fonts (data-font) ---------- */ [data-font="sans"] { --font-body: 'Roboto Flex', system-ui, sans-serif; --font-display: 'Roboto Flex', system-ui, sans-serif; } /* Google Sans is Google-restricted: store.js injects the CDN stylesheet only when this theme is chosen, and the stack falls through to system-ui if it never arrives. */ [data-font="googlesans"] { --font-body: 'Google Sans Text', 'Google Sans', system-ui, sans-serif; --font-display: 'Google Sans', 'Google Sans Text', system-ui, sans-serif; } [data-font="code"] { --font-body: 'Google Sans Code', ui-monospace, monospace; --font-display: 'Google Sans Code', ui-monospace, monospace; } [data-font="mono"] { --font-body: 'Space Mono', ui-monospace, monospace; --font-display: 'Space Mono', ui-monospace, monospace; --type-scale: .96; } /* Oswald is condensed with no long-form rhythm, so it gets extra tracking. */ [data-font="oswald"] { --font-body: 'Oswald', 'Helvetica Neue', sans-serif; --font-display: 'Oswald', 'Helvetica Neue', sans-serif; --tracking-body: .01em; --tracking-heading: .03em; } /* ---------- optional text-size preference ---------- */ [data-text="small"] { --type-scale: .9375; } [data-text="large"] { --type-scale: 1.0625; } [data-text="xlarge"] { --type-scale: 1.125; } /* ========================================================================== Colour themes. Light blocks are [data-theme]; dark blocks add [data-mode="dark"] and are :root-qualified so an explicit theme always outranks the default-dark block. Terra light lives on :root above. ========================================================================== */ :root[data-mode="dark"], :root[data-theme="terra"][data-mode="dark"] { /* Terra · dark — deep teal + warm sand. min AA 7.00:1, min UI 4.01:1 */ color-scheme: dark; --shadow-key: 46%; --shadow-ambient: 30%; /* accent roles */ --md-primary: #7fdae0; --md-on-primary: #00373a; --md-primary-container: #005458; --md-on-primary-container: #c2f1f3; --md-secondary: #b0d2d9; --md-on-secondary: #0d353c; --md-secondary-container: #2b5158; --md-on-secondary-container: #d0edf4; --md-tertiary: #ecc59a; --md-on-tertiary: #462b00; --md-tertiary-container: #664516; --md-on-tertiary-container: #fce4cc; --md-error: #ffbcae; --md-on-error: #690000; --md-error-container: #8c271d; --md-on-error-container: #ffe2dc; --md-success: #9bd4a8; --md-on-success: #003415; --md-success-container: #005326; --md-on-success-container: #d3efd9; /* surfaces */ --md-surface: #0d1515; --md-on-surface: #e0eaea; --md-on-surface-variant: #aeccce; --md-surface-container-lowest: #071010; --md-surface-container-low: #151d1d; --md-surface-container-normal: #1b2324; --md-surface-container-high: #242e2e; --md-surface-container-highest: #2e3939; /* lines, inverse, scrim */ --md-outline: #799c9e; --md-outline-variant: #315152; --md-inverse-surface: #e0eaea; --md-inverse-on-surface: #283233; --md-scrim: #000000; --md-shadow: #000000; } [data-theme="hemish"] { /* Hemish · light — hemishthanki.com green #54795F + mist #DAE3DA. min AA 4.99:1, min UI 3.74:1 */ color-scheme: light; --shadow-key: 26%; --shadow-ambient: 15%; /* accent roles */ --md-primary: #42664d; --md-on-primary: #ffffff; --md-primary-container: #caead3; --md-on-primary-container: #00220b; --md-secondary: #556254; --md-on-secondary: #ffffff; --md-secondary-container: #dae6d9; --md-on-secondary-container: #131e13; --md-tertiary: #805438; --md-on-tertiary: #ffffff; --md-tertiary-container: #ffdbc7; --md-on-tertiary-container: #2e1500; --md-error: #a33c2e; --md-on-error: #ffffff; --md-error-container: #ffdad3; --md-on-error-container: #3a0a00; --md-success: #136735; --md-on-success: #ffffff; --md-success-container: #caebd1; --md-on-success-container: #002207; /* surfaces */ --md-surface: #f5fbf5; --md-on-surface: #171d17; --md-on-surface-variant: #3a4b3b; --md-surface-container-lowest: #ffffff; --md-surface-container-low: #eef5ee; --md-surface-container-normal: #e8f0e8; --md-surface-container-high: #e2eae2; --md-surface-container-highest: #dce5dc; /* lines, inverse, scrim */ --md-outline: #637764; --md-outline-variant: #bacbba; --md-inverse-surface: #2a332a; --md-inverse-on-surface: #ebf3eb; --md-scrim: #000000; --md-shadow: #000000; } :root[data-theme="hemish"][data-mode="dark"] { /* Hemish · dark — hemishthanki.com green #54795F + mist #DAE3DA. min AA 7.04:1, min UI 4.03:1 */ color-scheme: dark; --shadow-key: 46%; --shadow-ambient: 30%; /* accent roles */ --md-primary: #b2d4bb; --md-on-primary: #143721; --md-primary-container: #2f533b; --md-on-primary-container: #d2efda; --md-secondary: #c3cfc2; --md-on-secondary: #283327; --md-secondary-container: #424f41; --md-on-secondary-container: #e0ebdf; --md-tertiary: #f2c2a7; --md-on-tertiary: #4c270d; --md-tertiary-container: #6b4127; --md-on-tertiary-container: #ffe3d3; --md-error: #ffbcae; --md-on-error: #690000; --md-error-container: #8c271d; --md-on-error-container: #ffe2dc; --md-success: #9bd4a8; --md-on-success: #003415; --md-success-container: #005326; --md-on-success-container: #d3efd9; /* surfaces */ --md-surface: #0e150e; --md-on-surface: #e2eae2; --md-on-surface-variant: #bacbba; --md-surface-container-lowest: #081008; --md-surface-container-low: #171d17; --md-surface-container-normal: #1c231c; --md-surface-container-high: #262e26; --md-surface-container-highest: #303930; /* lines, inverse, scrim */ --md-outline: #879b87; --md-outline-variant: #3f503f; --md-inverse-surface: #e2eae2; --md-inverse-on-surface: #2a332a; --md-scrim: #000000; --md-shadow: #000000; } [data-theme="atlas"] { /* Atlas · light — indigo + brass, cartographic. min AA 5.01:1, min UI 3.73:1 */ color-scheme: light; --shadow-key: 26%; --shadow-ambient: 15%; /* accent roles */ --md-primary: #5158a0; --md-on-primary: #ffffff; --md-primary-container: #e2dfff; --md-on-primary-container: #00174c; --md-secondary: #665970; --md-on-secondary: #ffffff; --md-secondary-container: #eadef3; --md-on-secondary-container: #22172b; --md-tertiary: #725b25; --md-on-tertiary: #ffffff; --md-tertiary-container: #f3e0c0; --md-on-tertiary-container: #251a00; --md-error: #a33c2e; --md-on-error: #ffffff; --md-error-container: #ffdad3; --md-on-error-container: #3a0a00; --md-success: #136735; --md-on-success: #ffffff; --md-success-container: #caebd1; --md-on-success-container: #002207; /* surfaces */ --md-surface: #f9f9fd; --md-on-surface: #1b1b20; --md-on-surface-variant: #464558; --md-surface-container-lowest: #ffffff; --md-surface-container-low: #f3f3f8; --md-surface-container-normal: #eeedf3; --md-surface-container-high: #e8e7ee; --md-surface-container-highest: #e2e2e9; /* lines, inverse, scrim */ --md-outline: #717087; --md-outline-variant: #c6c4d9; --md-inverse-surface: #303036; --md-inverse-on-surface: #f1f0f6; --md-scrim: #000000; --md-shadow: #000000; } :root[data-theme="atlas"][data-mode="dark"] { /* Atlas · dark — indigo + brass, cartographic. min AA 7.00:1, min UI 4.05:1 */ color-scheme: dark; --shadow-key: 46%; --shadow-ambient: 30%; /* accent roles */ --md-primary: #c9c7fc; --md-on-primary: #182b6c; --md-primary-container: #3c458b; --md-on-primary-container: #e8e6ff; --md-secondary: #d4c7de; --md-on-secondary: #372c41; --md-secondary-container: #53475d; --md-on-secondary-container: #f0e4f8; --md-tertiary: #e3c997; --md-on-tertiary: #3e2e00; --md-tertiary-container: #5d4812; --md-on-tertiary-container: #f7e6cb; --md-error: #ffbcae; --md-on-error: #690000; --md-error-container: #8c271d; --md-on-error-container: #ffe2dc; --md-success: #9bd4a8; --md-on-success: #003415; --md-success-container: #005326; --md-on-success-container: #d3efd9; /* surfaces */ --md-surface: #131317; --md-on-surface: #e8e7ee; --md-on-surface-variant: #c6c4d9; --md-surface-container-lowest: #0e0e13; --md-surface-container-low: #1b1b20; --md-surface-container-normal: #212126; --md-surface-container-high: #2c2b32; --md-surface-container-highest: #37363d; /* lines, inverse, scrim */ --md-outline: #9594ac; --md-outline-variant: #4a495e; --md-inverse-surface: #e8e7ee; --md-inverse-on-surface: #303036; --md-scrim: #000000; --md-shadow: #000000; } [data-theme="monsoon"] { /* Monsoon · light — violet + cyan. min AA 4.98:1, min UI 3.72:1 */ color-scheme: light; --shadow-key: 26%; --shadow-ambient: 15%; /* accent roles */ --md-primary: #6e4f9c; --md-on-primary: #ffffff; --md-primary-container: #ecdcfd; --md-on-primary-container: #210a4f; --md-secondary: #6c586e; --md-on-secondary: #ffffff; --md-secondary-container: #efddf1; --md-on-secondary-container: #261529; --md-tertiary: #006876; --md-on-tertiary: #ffffff; --md-tertiary-container: #b6ebf6; --md-on-tertiary-container: #002025; --md-error: #a33c2e; --md-on-error: #ffffff; --md-error-container: #ffdad3; --md-on-error-container: #3a0a00; --md-success: #136735; --md-on-success: #ffffff; --md-success-container: #caebd1; --md-on-success-container: #002207; /* surfaces */ --md-surface: #fbf8fd; --md-on-surface: #1d1b1f; --md-on-surface-variant: #4c4356; --md-surface-container-lowest: #ffffff; --md-surface-container-low: #f5f3f8; --md-surface-container-normal: #efedf2; --md-surface-container-high: #eae7ed; --md-surface-container-highest: #e4e1e8; /* lines, inverse, scrim */ --md-outline: #786e84; --md-outline-variant: #ccc3d7; --md-inverse-surface: #322f35; --md-inverse-on-surface: #f2f0f5; --md-scrim: #000000; --md-shadow: #000000; } :root[data-theme="monsoon"][data-mode="dark"] { /* Monsoon · dark — violet + cyan. min AA 6.99:1, min UI 4.02:1 */ color-scheme: dark; --shadow-key: 46%; --shadow-ambient: 30%; /* accent roles */ --md-primary: #dac3f5; --md-on-primary: #3b2168; --md-primary-container: #593c87; --md-on-primary-container: #f0e3ff; --md-secondary: #dac6dc; --md-on-secondary: #3c2a3f; --md-secondary-container: #58455b; --md-on-secondary-container: #f4e3f6; --md-tertiary: #7fd9eb; --md-on-tertiary: #00363f; --md-tertiary-container: #00545f; --md-on-tertiary-container: #c3f0f9; --md-error: #ffbcae; --md-on-error: #690000; --md-error-container: #8c271d; --md-on-error-container: #ffe2dc; --md-success: #9bd4a8; --md-on-success: #003415; --md-success-container: #005326; --md-on-success-container: #d3efd9; /* surfaces */ --md-surface: #151217; --md-on-surface: #eae7ed; --md-on-surface-variant: #ccc3d7; --md-surface-container-lowest: #100d12; --md-surface-container-low: #1d1b1f; --md-surface-container-normal: #232126; --md-surface-container-high: #2e2b31; --md-surface-container-highest: #39363c; /* lines, inverse, scrim */ --md-outline: #9c92a9; --md-outline-variant: #51485b; --md-inverse-surface: #eae7ed; --md-inverse-on-surface: #322f35; --md-scrim: #000000; --md-shadow: #000000; } [data-theme="ember"] { /* Ember · light — warm orange + charcoal. min AA 4.98:1, min UI 3.72:1 */ color-scheme: light; --shadow-key: 26%; --shadow-ambient: 15%; /* accent roles */ --md-primary: #9a451c; --md-on-primary: #ffffff; --md-primary-container: #ffdbcc; --md-on-primary-container: #321300; --md-secondary: #725948; --md-on-secondary: #ffffff; --md-secondary-container: #f6dece; --md-on-secondary-container: #2b1702; --md-tertiary: #006b5e; --md-on-tertiary: #ffffff; --md-tertiary-container: #bbede2; --md-on-tertiary-container: #00211b; --md-error: #a33c2e; --md-on-error: #ffffff; --md-error-container: #ffdad3; --md-on-error-container: #3a0a00; --md-success: #136735; --md-on-success: #ffffff; --md-success-container: #caebd1; --md-on-success-container: #002207; /* surfaces */ --md-surface: #fff8f5; --md-on-surface: #211a17; --md-on-surface-variant: #594137; --md-surface-container-lowest: #ffffff; --md-surface-container-low: #fbf2ee; --md-surface-container-normal: #f6ece8; --md-surface-container-high: #f1e6e2; --md-surface-container-highest: #ece0db; /* lines, inverse, scrim */ --md-outline: #896c5f; --md-outline-variant: #dcc1b6; --md-inverse-surface: #382e2a; --md-inverse-on-surface: #f8efeb; --md-scrim: #000000; --md-shadow: #000000; } :root[data-theme="ember"][data-mode="dark"] { /* Ember · dark — warm orange + charcoal. min AA 7.00:1, min UI 4.00:1 */ color-scheme: dark; --shadow-key: 46%; --shadow-ambient: 30%; /* accent roles */ --md-primary: #fbbfa4; --md-on-primary: #581e00; --md-primary-container: #833109; --md-on-primary-container: #ffe2d6; --md-secondary: #e1c7b6; --md-on-secondary: #412c1c; --md-secondary-container: #5e4735; --md-on-secondary-container: #fbe4d4; --md-tertiary: #91dacb; --md-on-tertiary: #003830; --md-tertiary-container: #00564b; --md-on-tertiary-container: #c6f1e8; --md-error: #ffbcae; --md-on-error: #690000; --md-error-container: #8c271d; --md-on-error-container: #ffe2dc; --md-success: #9bd4a8; --md-on-success: #003415; --md-success-container: #005326; --md-on-success-container: #d3efd9; /* surfaces */ --md-surface: #19120e; --md-on-surface: #f1e6e2; --md-on-surface-variant: #dcc1b6; --md-surface-container-lowest: #150c08; --md-surface-container-low: #211a17; --md-surface-container-normal: #28201c; --md-surface-container-high: #342a26; --md-surface-container-highest: #3f3530; /* lines, inverse, scrim */ --md-outline: #ae8f82; --md-outline-variant: #5e463b; --md-inverse-surface: #f1e6e2; --md-inverse-on-surface: #382e2a; --md-scrim: #000000; --md-shadow: #000000; } [data-theme="slate"] { /* Slate · light — near-monochrome, low chroma. min AA 5.01:1, min UI 3.75:1 */ color-scheme: light; --shadow-key: 26%; --shadow-ambient: 15%; /* accent roles */ --md-primary: #4b6172; --md-on-primary: #ffffff; --md-primary-container: #d3e5f5; --md-on-primary-container: #051e2c; --md-secondary: #575f69; --md-on-secondary: #ffffff; --md-secondary-container: #dce3ed; --md-on-secondary-container: #141c25; --md-tertiary: #3e6561; --md-on-tertiary: #ffffff; --md-tertiary-container: #c8e9e5; --md-on-tertiary-container: #00201d; --md-error: #a33c2e; --md-on-error: #ffffff; --md-error-container: #ffdad3; --md-on-error-container: #3a0a00; --md-success: #136735; --md-on-success: #ffffff; --md-success-container: #caebd1; --md-on-success-container: #002207; /* surfaces */ --md-surface: #f7fafc; --md-on-surface: #191c1e; --md-on-surface-variant: #3f4850; --md-surface-container-lowest: #ffffff; --md-surface-container-low: #f1f4f7; --md-surface-container-normal: #ebeef1; --md-surface-container-high: #e5e9ec; --md-surface-container-highest: #dfe3e7; /* lines, inverse, scrim */ --md-outline: #68737d; --md-outline-variant: #bec8d0; --md-inverse-surface: #2d3134; --md-inverse-on-surface: #eef1f4; --md-scrim: #000000; --md-shadow: #000000; } :root[data-theme="slate"][data-mode="dark"] { /* Slate · dark — near-monochrome, low chroma. min AA 7.06:1, min UI 4.03:1 */ color-scheme: dark; --shadow-key: 46%; --shadow-ambient: 30%; /* accent roles */ --md-primary: #bbcee0; --md-on-primary: #1c3342; --md-primary-container: #384e5f; --md-on-primary-container: #d9eafa; --md-secondary: #c5cdd7; --md-on-secondary: #29313a; --md-secondary-container: #444c56; --md-on-secondary-container: #e2e9f2; --md-tertiary: #afd3ce; --md-on-tertiary: #0e3633; --md-tertiary-container: #2b524e; --md-on-tertiary-container: #cfefea; --md-error: #ffbcae; --md-on-error: #690000; --md-error-container: #8c271d; --md-on-error-container: #ffe2dc; --md-success: #9bd4a8; --md-on-success: #003415; --md-success-container: #005326; --md-on-success-container: #d3efd9; /* surfaces */ --md-surface: #111416; --md-on-surface: #e5e9ec; --md-on-surface-variant: #bec8d0; --md-surface-container-lowest: #0b0f11; --md-surface-container-low: #191c1e; --md-surface-container-normal: #1f2225; --md-surface-container-high: #292c30; --md-surface-container-highest: #33373b; /* lines, inverse, scrim */ --md-outline: #8c97a1; --md-outline-variant: #434d55; --md-inverse-surface: #e5e9ec; --md-inverse-on-surface: #2d3134; --md-scrim: #000000; --md-shadow: #000000; } /* ---------- data-mode="auto" (and a missing data-mode) ---------- */ @media (prefers-color-scheme: dark) { :root[data-mode="auto"], :root:not([data-mode]) { color-scheme: dark; --shadow-key: 46%; --shadow-ambient: 30%; /* accent roles */ --md-primary: #7fdae0; --md-on-primary: #00373a; --md-primary-container: #005458; --md-on-primary-container: #c2f1f3; --md-secondary: #b0d2d9; --md-on-secondary: #0d353c; --md-secondary-container: #2b5158; --md-on-secondary-container: #d0edf4; --md-tertiary: #ecc59a; --md-on-tertiary: #462b00; --md-tertiary-container: #664516; --md-on-tertiary-container: #fce4cc; --md-error: #ffbcae; --md-on-error: #690000; --md-error-container: #8c271d; --md-on-error-container: #ffe2dc; --md-success: #9bd4a8; --md-on-success: #003415; --md-success-container: #005326; --md-on-success-container: #d3efd9; /* surfaces */ --md-surface: #0d1515; --md-on-surface: #e0eaea; --md-on-surface-variant: #aeccce; --md-surface-container-lowest: #071010; --md-surface-container-low: #151d1d; --md-surface-container-normal: #1b2324; --md-surface-container-high: #242e2e; --md-surface-container-highest: #2e3939; /* lines, inverse, scrim */ --md-outline: #799c9e; --md-outline-variant: #315152; --md-inverse-surface: #e0eaea; --md-inverse-on-surface: #283233; --md-scrim: #000000; --md-shadow: #000000; } :root[data-theme="hemish"][data-mode="auto"], :root[data-theme="hemish"]:not([data-mode]) { color-scheme: dark; --shadow-key: 46%; --shadow-ambient: 30%; /* accent roles */ --md-primary: #b2d4bb; --md-on-primary: #143721; --md-primary-container: #2f533b; --md-on-primary-container: #d2efda; --md-secondary: #c3cfc2; --md-on-secondary: #283327; --md-secondary-container: #424f41; --md-on-secondary-container: #e0ebdf; --md-tertiary: #f2c2a7; --md-on-tertiary: #4c270d; --md-tertiary-container: #6b4127; --md-on-tertiary-container: #ffe3d3; --md-error: #ffbcae; --md-on-error: #690000; --md-error-container: #8c271d; --md-on-error-container: #ffe2dc; --md-success: #9bd4a8; --md-on-success: #003415; --md-success-container: #005326; --md-on-success-container: #d3efd9; /* surfaces */ --md-surface: #0e150e; --md-on-surface: #e2eae2; --md-on-surface-variant: #bacbba; --md-surface-container-lowest: #081008; --md-surface-container-low: #171d17; --md-surface-container-normal: #1c231c; --md-surface-container-high: #262e26; --md-surface-container-highest: #303930; /* lines, inverse, scrim */ --md-outline: #879b87; --md-outline-variant: #3f503f; --md-inverse-surface: #e2eae2; --md-inverse-on-surface: #2a332a; --md-scrim: #000000; --md-shadow: #000000; } :root[data-theme="atlas"][data-mode="auto"], :root[data-theme="atlas"]:not([data-mode]) { color-scheme: dark; --shadow-key: 46%; --shadow-ambient: 30%; /* accent roles */ --md-primary: #c9c7fc; --md-on-primary: #182b6c; --md-primary-container: #3c458b; --md-on-primary-container: #e8e6ff; --md-secondary: #d4c7de; --md-on-secondary: #372c41; --md-secondary-container: #53475d; --md-on-secondary-container: #f0e4f8; --md-tertiary: #e3c997; --md-on-tertiary: #3e2e00; --md-tertiary-container: #5d4812; --md-on-tertiary-container: #f7e6cb; --md-error: #ffbcae; --md-on-error: #690000; --md-error-container: #8c271d; --md-on-error-container: #ffe2dc; --md-success: #9bd4a8; --md-on-success: #003415; --md-success-container: #005326; --md-on-success-container: #d3efd9; /* surfaces */ --md-surface: #131317; --md-on-surface: #e8e7ee; --md-on-surface-variant: #c6c4d9; --md-surface-container-lowest: #0e0e13; --md-surface-container-low: #1b1b20; --md-surface-container-normal: #212126; --md-surface-container-high: #2c2b32; --md-surface-container-highest: #37363d; /* lines, inverse, scrim */ --md-outline: #9594ac; --md-outline-variant: #4a495e; --md-inverse-surface: #e8e7ee; --md-inverse-on-surface: #303036; --md-scrim: #000000; --md-shadow: #000000; } :root[data-theme="monsoon"][data-mode="auto"], :root[data-theme="monsoon"]:not([data-mode]) { color-scheme: dark; --shadow-key: 46%; --shadow-ambient: 30%; /* accent roles */ --md-primary: #dac3f5; --md-on-primary: #3b2168; --md-primary-container: #593c87; --md-on-primary-container: #f0e3ff; --md-secondary: #dac6dc; --md-on-secondary: #3c2a3f; --md-secondary-container: #58455b; --md-on-secondary-container: #f4e3f6; --md-tertiary: #7fd9eb; --md-on-tertiary: #00363f; --md-tertiary-container: #00545f; --md-on-tertiary-container: #c3f0f9; --md-error: #ffbcae; --md-on-error: #690000; --md-error-container: #8c271d; --md-on-error-container: #ffe2dc; --md-success: #9bd4a8; --md-on-success: #003415; --md-success-container: #005326; --md-on-success-container: #d3efd9; /* surfaces */ --md-surface: #151217; --md-on-surface: #eae7ed; --md-on-surface-variant: #ccc3d7; --md-surface-container-lowest: #100d12; --md-surface-container-low: #1d1b1f; --md-surface-container-normal: #232126; --md-surface-container-high: #2e2b31; --md-surface-container-highest: #39363c; /* lines, inverse, scrim */ --md-outline: #9c92a9; --md-outline-variant: #51485b; --md-inverse-surface: #eae7ed; --md-inverse-on-surface: #322f35; --md-scrim: #000000; --md-shadow: #000000; } :root[data-theme="ember"][data-mode="auto"], :root[data-theme="ember"]:not([data-mode]) { color-scheme: dark; --shadow-key: 46%; --shadow-ambient: 30%; /* accent roles */ --md-primary: #fbbfa4; --md-on-primary: #581e00; --md-primary-container: #833109; --md-on-primary-container: #ffe2d6; --md-secondary: #e1c7b6; --md-on-secondary: #412c1c; --md-secondary-container: #5e4735; --md-on-secondary-container: #fbe4d4; --md-tertiary: #91dacb; --md-on-tertiary: #003830; --md-tertiary-container: #00564b; --md-on-tertiary-container: #c6f1e8; --md-error: #ffbcae; --md-on-error: #690000; --md-error-container: #8c271d; --md-on-error-container: #ffe2dc; --md-success: #9bd4a8; --md-on-success: #003415; --md-success-container: #005326; --md-on-success-container: #d3efd9; /* surfaces */ --md-surface: #19120e; --md-on-surface: #f1e6e2; --md-on-surface-variant: #dcc1b6; --md-surface-container-lowest: #150c08; --md-surface-container-low: #211a17; --md-surface-container-normal: #28201c; --md-surface-container-high: #342a26; --md-surface-container-highest: #3f3530; /* lines, inverse, scrim */ --md-outline: #ae8f82; --md-outline-variant: #5e463b; --md-inverse-surface: #f1e6e2; --md-inverse-on-surface: #382e2a; --md-scrim: #000000; --md-shadow: #000000; } :root[data-theme="slate"][data-mode="auto"], :root[data-theme="slate"]:not([data-mode]) { color-scheme: dark; --shadow-key: 46%; --shadow-ambient: 30%; /* accent roles */ --md-primary: #bbcee0; --md-on-primary: #1c3342; --md-primary-container: #384e5f; --md-on-primary-container: #d9eafa; --md-secondary: #c5cdd7; --md-on-secondary: #29313a; --md-secondary-container: #444c56; --md-on-secondary-container: #e2e9f2; --md-tertiary: #afd3ce; --md-on-tertiary: #0e3633; --md-tertiary-container: #2b524e; --md-on-tertiary-container: #cfefea; --md-error: #ffbcae; --md-on-error: #690000; --md-error-container: #8c271d; --md-on-error-container: #ffe2dc; --md-success: #9bd4a8; --md-on-success: #003415; --md-success-container: #005326; --md-on-success-container: #d3efd9; /* surfaces */ --md-surface: #111416; --md-on-surface: #e5e9ec; --md-on-surface-variant: #bec8d0; --md-surface-container-lowest: #0b0f11; --md-surface-container-low: #191c1e; --md-surface-container-normal: #1f2225; --md-surface-container-high: #292c30; --md-surface-container-highest: #33373b; /* lines, inverse, scrim */ --md-outline: #8c97a1; --md-outline-variant: #434d55; --md-inverse-surface: #e5e9ec; --md-inverse-on-surface: #2d3134; --md-scrim: #000000; --md-shadow: #000000; } }