/* ============================================================ * Skyzai + Emergentism — Unified Design Tokens v8.1.9 * * Source hierarchy: Material Design 3 owns current component anatomy, tokens * and states; Now in Android is the primary applied-product reference and the * brand guide's implementation bible; Android UI Kit informs native shell * composition; Building a Bridge is optional illustration provenance for a * selected story commission only. Skyzai owns the seal, semantic colour, * evidence language, product meaning, animation and voice. This file is a * reference carrier; importing it is an explicit product decision, not * evidence of estate-wide adoption. * * Accessibility invariants: 48px minimum targets, visible keyboard focus, * reduced-motion support and WCAG AA palette pairings. * Fonts are self-hosted by each surface. No network font import is permitted. * ============================================================ */ /* ============================================================ * CSS Cascade Layers — specificity management * Lower layers lose to higher layers when specificity is equal. * Order: tokens < reset < accessibility < components < utilities * ============================================================ */ @layer tokens, reset, accessibility, components, utilities; /* Identity-only palette. Same geometry and animation clocks in all appearances. data-brand never supplies these values. This is NOT adoption of a complete native dark-warm ColorScheme (S2 remains pending). */ @layer tokens { :root, [data-theme="dark"], :root:not([data-theme])[data-surface="dark"] { --sz-identity-phase-1: #F44336; --sz-identity-phase-2: #4CAF50; --sz-identity-phase-3: #2196F3; --sz-identity-phase-4: #FFEB3B; --sz-identity-rest-ink: #FFFDE7; --sz-identity-substrate: #050505; } [data-theme="light"], :root:not([data-theme])[data-surface="light"] { --sz-identity-phase-1: #D32F2F; --sz-identity-phase-2: #2E7D32; --sz-identity-phase-3: #B77900; --sz-identity-phase-4: #1565C0; --sz-identity-rest-ink: #050505; --sz-identity-substrate: #FFFFFF; } [data-theme="true-tone"] { --sz-identity-phase-1: #D32F2F; --sz-identity-phase-2: #1565C0; --sz-identity-phase-3: #92650A; --sz-identity-phase-4: #2E7D32; --sz-identity-rest-ink: #0A0905; --sz-identity-substrate: #FDFAF4; } [data-theme="dark-warm"] { --sz-identity-phase-1: #F44336; --sz-identity-phase-2: #4CAF50; --sz-identity-phase-3: #2196F3; --sz-identity-phase-4: #FFD54F; --sz-identity-rest-ink: #FFF3D4; --sz-identity-substrate: #0A0705; } @media (prefers-color-scheme: light) { :root:not([data-theme]):not([data-surface="dark"]) { --sz-identity-phase-1: #D32F2F; --sz-identity-phase-2: #2E7D32; --sz-identity-phase-3: #B77900; --sz-identity-phase-4: #1565C0; --sz-identity-rest-ink: #050505; --sz-identity-substrate: #FFFFFF; } } } @layer tokens { :root { /* ============================================================ * Type families — bundled Google Sans Flex canon * The same Material 3 role map applies to web, Android and Flutter. * ============================================================ */ --font-sans: "Google Sans Flex", sans-serif; --font-text: "Google Sans Flex", sans-serif; --font-display: "Google Sans Flex", sans-serif; --font-flex: "Google Sans Flex", sans-serif; --font-condensed: "Google Sans Flex", sans-serif; --font-code: "Google Sans Code", "SF Mono", Consolas, monospace; --font-mono: "Google Sans Code", "SF Mono", Consolas, monospace; --font-serif: "Google Sans Flex", sans-serif; /* Material 3 type scale — GOVERNING scale for new work (2026-08-19). Google publishes the scale at m3.material.io/styles/typography and this file does not restate it in prose; these tokens ARE the implementation and are declared identically in skyzai_brand_guide-v7.0.1.html. Families are Skyzai's mapping. --font-sans is used throughout rather than its --font-text alias, so the two carriers are byte-comparable. */ --m3-type-display-large: 400 57px/64px var(--font-display); --m3-type-display-medium: 400 45px/52px var(--font-display); --m3-type-display-small: 400 36px/44px var(--font-display); --m3-type-headline-large: 400 32px/40px var(--font-display); --m3-type-headline-medium: 400 28px/36px var(--font-display); --m3-type-headline-small: 400 24px/32px var(--font-display); --m3-type-title-large: 400 22px/28px var(--font-sans); --m3-type-title-medium: 500 16px/24px var(--font-sans); --m3-type-title-small: 500 14px/20px var(--font-sans); --m3-type-body-large: 400 16px/24px var(--font-sans); --m3-type-body-medium: 400 14px/20px var(--font-sans); --m3-type-body-small: 400 12px/16px var(--font-sans); --m3-type-label-large: 500 14px/20px var(--font-sans); --m3-type-label-medium: 500 12px/16px var(--font-sans); --m3-type-label-small: 500 11px/16px var(--font-sans); /* Tracking values match the inspected official Material 3 kit. */ --m3-tracking-display-large: 0px; --m3-tracking-display-medium: 0px; --m3-tracking-display-small: 0px; --m3-tracking-headline-large: 0px; --m3-tracking-headline-medium: 0px; --m3-tracking-headline-small: 0px; --m3-tracking-title-large: 0px; --m3-tracking-title-medium: 0.15px; --m3-tracking-title-small: 0.1px; --m3-tracking-body-large: 0.5px; --m3-tracking-body-medium: 0.25px; --m3-tracking-body-small: 0.4px; --m3-tracking-label-large: 0.1px; --m3-tracking-label-medium: 0.5px; --m3-tracking-label-small: 0.5px; /* Expressive ambient field. It supports original Skyzai storytelling scenes; * it never carries evidence, status or vendor identity. */ --ambient-ceiling: color-mix(in srgb, var(--md-sys-color-primary), transparent 84%); --ambient-wall: color-mix(in srgb, var(--md-sys-color-secondary), transparent 84%); --ambient-floor: color-mix(in srgb, var(--md-sys-color-tertiary), transparent 88%); --ambient-cove: color-mix(in srgb, var(--md-sys-color-primary), transparent 78%); --ambient-panel: color-mix(in srgb, var(--md-sys-color-on-surface), transparent 92%); --ambient-edge: color-mix(in srgb, var(--md-sys-color-primary), transparent 72%); --ambient-shadow: color-mix(in srgb, var(--md-sys-color-secondary), transparent 78%); /* §14 Living Substrate — the Game of Life field (guide §14, skyzai.com hero). * Added 2026-07-30 at owner direction. These two colours were already * inventoried in the guide's Material palette but were never bound to a named * token, so the site had no way to consume them and no way to follow a theme. * Naming them here is the fix. * Corrected 2026-08-13: this comment previously said the deployed site * hardcodes #76FF03, and called the production literals "drift to repair * upstream". Both claims were retracted two lines below — the shipped site * renders #39FF14 and the chair ruled the live field authoritative, so the * token follows the substrate and there is no upstream drift to repair. The * retraction landed on the token and not on the comment above it, which is * how one claim ends up with two carriers that disagree. * Not sector colours — the substrate is the ground the sectors sit on. */ --substrate-core: #39FF14; /* living cell — measured from the deployed www.skyzai.com field 2026-08-13. Was #76FF03 (Material Light Green A400); the shipped site rendered #39FF14 and the chair ruled the live field authoritative. The token follows the substrate, not the other way round. */ --substrate-trail: #1B5E20; /* decaying corpse — Material Green 900 */ --bg: #050505; --surface: #0A0A0A; --elevated: #111111; /* ============================================================ * Material system color aliases (default dark theme) * These aliases let Material-derived tokens resolve in plain CSS imports. * Theme blocks below override them for dark, light, and Night Shift. * ============================================================ */ --md-sys-color-primary: #FFEB3B; --md-sys-color-on-primary: #050505; --md-sys-color-primary-container: #333100; --md-sys-color-on-primary-container: #FFFDE7; --md-sys-color-secondary: #2196F3; /* WCAG AA repair 2026-07-30: white on #2196F3 = 3.12:1 (FAIL). * Black = 6.72:1 (PASS). The brand hue is UNCHANGED — an on-color is * computed for legibility against its container, per M3; it is not a * brand hue. No founder colour decision is required. */ --md-sys-color-on-secondary: #000000; --md-sys-color-secondary-container: #003352; --md-sys-color-on-secondary-container: #D8EFFF; --md-sys-color-tertiary: #4CAF50; --md-sys-color-on-tertiary: #050505; --md-sys-color-tertiary-container: #00390B; --md-sys-color-on-tertiary-container: #D5FFD6; --md-sys-color-error: #F44336; /* WCAG AA repair 2026-07-30: white on #F44336 = 3.68:1 (FAIL). * Black = 5.70:1 (PASS). Sector-Finance hue UNCHANGED. * Light / true-tone keep white on #D32F2F (4.98:1) — already passing. */ --md-sys-color-on-error: #000000; --md-sys-color-error-container: #690005; --md-sys-color-on-error-container: #FFDED9; --md-sys-color-background: #050505; --md-sys-color-on-background: #F3F4F6; --md-sys-color-surface: #0A0A0A; --md-sys-color-on-surface: #FFFDE7; --md-sys-color-surface-variant: #111111; --md-sys-color-on-surface-variant: #9CA3AF; --md-sys-color-outline: #555555; --md-sys-color-outline-variant: #2A2A2A; --md-sys-color-inverse-surface: #F3F4F6; --md-sys-color-inverse-on-surface: #050505; --sz-background-glow-a: var(--md-sys-color-secondary-container); --sz-background-glow-b: var(--md-sys-color-tertiary-container); --md-sys-color-inverse-primary: #625E00; --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.48); --md-sys-color-surface-tint: var(--md-sys-color-primary); /* Public-shell aliases (--sz-*). Same tokens, PWA name. */ --sz-bg: var(--bg); --sz-surface: var(--surface); --sz-elevated: var(--elevated); --sz-ink: var(--md-sys-color-on-background); --sz-muted: var(--md-sys-color-on-surface-variant); --sz-line: var(--md-sys-color-outline-variant); --sz-seal: var(--md-sys-color-on-surface); --sz-primary: var(--md-sys-color-primary); --sz-primary-ink: var(--md-sys-color-on-primary); --sz-secondary: var(--md-sys-color-secondary); --sz-accent-soft: color-mix(in srgb, var(--md-sys-color-primary), transparent 86%); --sz-sage: var(--md-sys-color-primary); --sz-lavender: var(--md-sys-color-secondary); --sz-gold: var(--sector-electronic-lab); --sector-finance: #F44336; --sector-insurance: #4CAF50; --sector-real-infra: #2196F3; --sector-electronic-lab: #FFEB3B; --state-signal: 0; --blend-factor: calc(var(--state-signal) / 100); --hybrid-radius: calc(var(--blend-factor) * 32px); --hybrid-glow: calc(var(--blend-factor) * 0.7); --hybrid-blur: calc(var(--blend-factor) * 16px); --hybrid-panel-alpha: calc(1 - var(--blend-factor) * 0.7); --font-telemetry: "Google Sans Code", "SF Mono", Consolas, monospace; --font-interface: var(--font-sans); --co-edge: var(--sector-real-infra); --co-mid: var(--sector-electronic-lab); --co-tail-warm: var(--sector-finance); --co-tail-cool: var(--sector-insurance); /* ── Material 3 surface + fixed roles (added 2026-09-02, PMO-0057 Task 1.1) ── :root carries the dark appearance (the guide's default, ). Surface roles alias the existing Skyzai carriers --surface-* (one ramp, one value, two names): the Material name is the public contract, the local name is the carrier. The ramp keeps Material's ORDER (lowest < low < container < high < highest; dim <= surface <= bright) at Skyzai-compressed tone steps, because the surface ink is fixed identity, not a generated N-tone. Material defines these roles relatively; it does not fix tones for custom schemes. Fixed roles: tones 90 · 80 · 10 · 30 of this appearance's md.ref palette (regenerated 2026-09-02 from the key colours; F-1.1 closed — the stale palettes are gone). Fixed roles do not move with tonal elevation WITHIN an appearance; Skyzai's appearance-dependent primary hue means they are not fixed ACROSS appearances — a declared Material deviation tied to owner question Q4. */ --md-sys-color-surface-dim: var(--surface-dim); --md-sys-color-surface-bright: var(--surface-bright); --md-sys-color-surface-container-lowest: var(--surface-container-lowest); --md-sys-color-surface-container-low: var(--surface-container-low); --md-sys-color-surface-container: var(--surface-container); --md-sys-color-surface-container-high: var(--surface-container-high); --md-sys-color-surface-container-highest: var(--surface-container-highest); --md-sys-color-primary-fixed: #F9E534; --md-sys-color-primary-fixed-dim: #DBC90A; --md-sys-color-on-primary-fixed: #201C00; --md-sys-color-on-primary-fixed-variant: #4F4800; --md-sys-color-secondary-fixed: #D1E4FF; --md-sys-color-secondary-fixed-dim: #9ECAFF; --md-sys-color-on-secondary-fixed: #001D36; --md-sys-color-on-secondary-fixed-variant: #00497D; --md-sys-color-tertiary-fixed: #94F990; --md-sys-color-tertiary-fixed-dim: #78DC77; --md-sys-color-on-tertiary-fixed: #002204; --md-sys-color-on-tertiary-fixed-variant: #005313; /* ============================================================ * Legacy type aliases — compatibility only. * The canonical 15-role Material 3 ladder lives in --m3-type-* above. * Every old short name resolves to that ladder exactly; it may never carry * another weight, family, line height, or responsive mutation. * ============================================================ */ --type-display-l: var(--m3-type-display-large); --type-display-m: var(--m3-type-display-medium); --type-display-s: var(--m3-type-display-small); --type-headline-l: var(--m3-type-headline-large); --type-headline-m: var(--m3-type-headline-medium); --type-headline-s: var(--m3-type-headline-small); --type-title-l: var(--m3-type-title-large); --type-title-m: var(--m3-type-title-medium); --type-title-s: var(--m3-type-title-small); --type-body-l: var(--m3-type-body-large); --type-body-m: var(--m3-type-body-medium); --type-body-s: var(--m3-type-body-small); --type-label-l: var(--m3-type-label-large); --type-label-m: var(--m3-type-label-medium); --type-label-s: var(--m3-type-label-small); /* ============================================================ * Letter spacing (Material 3) * ============================================================ */ --tracking-display: 0; --tracking-headline: 0; --tracking-title: 0; --tracking-body: 0.5px; --tracking-label: 0.1px; --tracking-mono: 0; /* ============================================================ * Motion easing (Material 3 — 6 named curves) * ============================================================ */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-standard-decelerate: cubic-bezier(0, 0, 0, 1); --ease-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); /* ============================================================ * Motion durations (Material 3 token scale) * ============================================================ */ --dur-short1: 50ms; --dur-short2: 100ms; --dur-short3: 150ms; --dur-short4: 200ms; --dur-medium1: 250ms; --dur-medium2: 300ms; --dur-medium3: 350ms; --dur-medium4: 400ms; --dur-long1: 450ms; --dur-long2: 500ms; --dur-long3: 550ms; --dur-long4: 600ms; --dur-extra-long1: 700ms; /* ── Identity motion system (2026-09-02, PMO-0057 Task 2.4b) ── Mechanics taken from the owner-supplied circle.news reference (intel/diffs/circle-logo-motion/2026-09-02.md); geometry and constants are Skyzai's. Colour lives in motion; rest is monochrome; Reduced Motion is a still. */ --sz-identity-spin: 60s; /* continuous counter-rotation, 12-ring DAV / Circle weave */ --sz-identity-split-cycle: 6s; /* bounded split cycle, Natural and Legal weaves */ --sz-identity-orbit-step: 2s; /* colour-phase step between neighbouring rings */ --sz-identity-interleave: 1s; /* CCW layer offset: overlapping rings never share a hue */ --sz-identity-layer-opacity: .72; /* each half-stroke layer; the overlap reads as one stroke */ --sz-identity-settle: var(--dur-long4); /* 600ms ease back to the still on inspection */ --sz-identity-settle-color: var(--dur-medium4); /* 400ms stroke fade to the rest colour */ --sz-seal-spin: 18s; /* parent seal counter-rotation */ /* Material 3 motion tokens alias the existing carriers (m3.material.io/styles/motion/easing-and-duration/tokens-specs). */ --md-sys-motion-easing-standard: var(--ease-standard); --md-sys-motion-easing-standard-decelerate: var(--ease-standard-decelerate); --md-sys-motion-easing-standard-accelerate: var(--ease-standard-accelerate); --md-sys-motion-easing-emphasized: var(--ease-emphasized); --md-sys-motion-easing-emphasized-decelerate: var(--ease-emphasized-decelerate); --md-sys-motion-easing-emphasized-accelerate: var(--ease-emphasized-accelerate); --md-sys-motion-duration-short1: var(--dur-short1); --md-sys-motion-duration-short2: var(--dur-short2); --md-sys-motion-duration-short3: var(--dur-short3); --md-sys-motion-duration-short4: var(--dur-short4); --md-sys-motion-duration-medium1: var(--dur-medium1); --md-sys-motion-duration-medium2: var(--dur-medium2); --md-sys-motion-duration-medium3: var(--dur-medium3); --md-sys-motion-duration-medium4: var(--dur-medium4); --md-sys-motion-duration-long1: var(--dur-long1); --md-sys-motion-duration-long2: var(--dur-long2); --md-sys-motion-duration-long3: var(--dur-long3); --md-sys-motion-duration-long4: var(--dur-long4); --md-sys-motion-duration-extra-long1: var(--dur-extra-long1); --md-sys-motion-duration-extra-long2: var(--dur-extra-long2); --md-sys-motion-duration-extra-long3: var(--dur-extra-long3); --md-sys-motion-duration-extra-long4: var(--dur-extra-long4); /* ── Material style aliases (2026-09-02, PMO-0057 Tasks 2.2/2.3/2.5/2.6): the Material names alias the Skyzai carriers; explanations are Material's (linked in §03, §04.1, §04.2). */ --md-sys-shape-corner-none: 0; --md-sys-shape-corner-extra-small: var(--shape-xs); --md-sys-shape-corner-small: var(--shape-sm); --md-sys-shape-corner-medium: var(--shape-md); --md-sys-shape-corner-large: var(--shape-lg); --md-sys-shape-corner-large-increased: 20px; --md-sys-shape-corner-extra-large: var(--shape-xl); --md-sys-shape-corner-extra-large-increased: 32px; --md-sys-shape-corner-extra-extra-large: 48px; --md-sys-shape-corner-full: var(--shape-full); --md-sys-elevation-level-0: var(--elev-level-0); --md-sys-elevation-level-1: var(--elev-level-1); --md-sys-elevation-level-2: var(--elev-level-2); --md-sys-elevation-level-3: var(--elev-level-3); --md-sys-elevation-level-4: var(--elev-level-4); --md-sys-elevation-level-5: var(--elev-level-5); --icon-symbol-axes: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; --icon-symbol-axes-selected: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; --m3-type-emphasized-weight-regular: 500; /* emphasized variant of a 400 role */ --m3-type-emphasized-weight-medium: 600; /* emphasized variant of a 500 role */ /* Material 3 shape ladder. Components select the documented role; Skyzai does not impose a second, competing minimum-radius system. */ --shape-none: 0; --shape-xs: 4px; --shape-sm: 8px; --shape-md: 12px; --shape-lg: 16px; --shape-xl: 28px; --shape-full: 999px; /* ============================================================ * Material elevation, levels 0–5. * Exact key + ambient shadows follow the current official Material Web * elevation implementation. Surface-container roles are a separate tonal * axis; do not manufacture a one-to-one colour ramp from these numbers. * ============================================================ */ --elev-surface-0: var(--surface-container-lowest); --elev-surface-1: var(--surface-container-low); --elev-surface-2: var(--surface-container); --elev-surface-3: var(--surface-container-high); --elev-surface-4: var(--surface-container-highest); --elev-surface-5: var(--surface-bright); --elev-level-0: none; --elev-level-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15); --elev-level-2: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15); --elev-level-3: 0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15); --elev-level-4: 0 2px 3px rgba(0, 0, 0, 0.30), 0 6px 10px 4px rgba(0, 0, 0, 0.15); --elev-level-5: 0 4px 4px rgba(0, 0, 0, 0.30), 0 8px 12px 6px rgba(0, 0, 0, 0.15); --elev-flat: var(--elev-level-0); --elev-raised: var(--elev-level-2); --elev-modal: var(--elev-level-4); --elev-overlay: var(--elev-level-5); /* ============================================================ * Tonal surface container roles (Material 3) * NOT tied to elevation — provide tonal difference for visual * separation at rest. Overlapping containers MUST use different * roles. Default elevation indicator in M3 is tonal color, * not shadow. Skyzai does not use surface tint as proof state; * use these container roles for resting separation instead. * * Concrete theme values are set in the theme blocks below. * These defaults resolve to the theme's --bg/--surface/--elevated. * ============================================================ */ --surface-dim: #050505; --surface-container-lowest: #060606; --surface-container-low: #080808; --surface-container: #0A0A0A; --surface-container-high: #111111; --surface-container-highest: #161616; --surface-bright: #1A1A1A; /* Scrim for modal/sheet overlays when tonal separation is insufficient */ --scrim: rgba(0, 0, 0, 0.32); /* ============================================================ * Touch targets (Material 3 + WCAG) * ============================================================ */ --target-min: 48px; --target-comfortable: 56px; /* ============================================================ * Spacing scale — 8dp composition rhythm with an explicit 4dp half-step for * compact internal alignment. Page structure starts at --space-2; --space-1 * is not a competing grid. * ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ============================================================ * Layout shells * ============================================================ */ --shell-narrow: 720px; /* long-form reading; emergentism.org body */ --shell-medium: 980px; /* default; product pages */ --shell-wide: 1240px; /* dense surfaces; marketplace, dashboards */ /* ============================================================ * Approach-surface backdrop blur * Default: blur enabled. Reduce-transparency below disables it. * ============================================================ */ --backdrop-blur: blur(12px); /* ============================================================ * State layer opacity (Material 3 — hover/focus/pressed/dragged/disabled) * Applied via ::before pseudo-element on interactive elements. * ============================================================ */ /* Material 3 state layers (m3.material.io/foundations/interaction/states/state-layers, read 2026-09-02): hover 8% · focus 10% · pressed 10% · dragged 16%. The 12% focus/pressed values also exist in older Material Web v0_192; the 10% values here match AndroidX StateTokens v0_210 (checked 2026-09-05). Disabled is a component-level contract in Material (md.comp.*.disabled-container-opacity 0.12, disabled-label-text-opacity 0.38); Skyzai carries it once, here. */ --state-hover-opacity: 0.08; --state-focus-opacity: 0.10; --state-pressed-opacity: 0.10; --state-dragged-opacity: 0.16; --state-disabled-opacity: 0.38; --state-disabled-container-opacity: 0.12; --md-sys-state-hover-state-layer-opacity: var(--state-hover-opacity); --md-sys-state-focus-state-layer-opacity: var(--state-focus-opacity); --md-sys-state-pressed-state-layer-opacity: var(--state-pressed-opacity); --md-sys-state-dragged-state-layer-opacity: var(--state-dragged-opacity); --md-sys-state-disabled-state-layer-opacity: var(--state-disabled-opacity); --card-state-color: var(--md-sys-color-on-surface); --card-rest-elevation: var(--elev-level-1); --card-hover-elevation: var(--elev-level-1); --card-focus-elevation: var(--elev-level-1); --card-press-elevation: var(--elev-level-1); --card-hover-transform: none; --card-press-transform: translateY(0); /* ============================================================ * Focus ring system (WCAG 2.4.7 / 2.4.11) * ============================================================ */ --focus-ring-color: var(--md-sys-color-secondary); --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-outline: var(--focus-ring-width) solid var(--focus-ring-color); --focus-ring-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--md-sys-color-background), 0 0 0 calc(var(--focus-ring-width) * 2 + var(--focus-ring-offset)) var(--focus-ring-color); /* ============================================================ * Z-index scale — prevents the "z-index arms race" * Pair with elevation tokens: --elev-modal uses --z-modal, etc. * ============================================================ */ --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-popover: 300; --z-tooltip: 350; --z-toast: 400; --z-modal: 500; --z-overlay: 600; --z-fullscreen: 700; /* ============================================================ * Safe area insets (Apple HIG / PWA notched devices) * ============================================================ */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); /* ============================================================ * Component dimension tokens (Material 3) * Scale with density via --density-scale * ============================================================ */ --btn-height: calc(48px * var(--density-scale)); --btn-padding-x: calc(24px * var(--density-scale)); --btn-icon-size: 18px; --btn-icon-gap: 8px; --card-padding: calc(16px * var(--density-scale)); --card-radius: var(--shape-md); --card-gap: 8px; --card-media-margin: 0; --card-action-padding: calc(8px * var(--density-scale)); --chip-height: calc(32px * var(--density-scale)); --chip-padding-x: calc(16px * var(--density-scale)); --input-height: calc(56px * var(--density-scale)); --input-padding-x: calc(16px * var(--density-scale)); --top-app-bar-height: 64px; --nav-height: 64px; --navigation-bar-height: 64px; --nav-rail-width: 220px; --search-height: 56px; --search-radius: 28px; --icon-target-size: 48px; --nav-item-icon-size: 24px; --icon-glyph-size: 24px; /* Android UI Kit reference measurements. Native Android delegates system * bars to the OS; installed web carriers consume safe-area insets instead * of drawing imitation device chrome. */ --android-grid-unit: 8px; --android-status-bar-height: 40px; --android-gesture-area-height: 24px; --android-window-compact: 412px; --android-window-medium: 600px; --android-window-expanded: 840px; --fab-height-sm: calc(40px * var(--density-scale)); --fab-height-md: calc(56px * var(--density-scale)); --fab-height-lg: calc(96px * var(--density-scale)); --list-item-height-1: calc(56px * var(--density-scale)); --list-item-height-2: calc(72px * var(--density-scale)); --dialog-min-width: 280px; --dialog-padding: calc(24px * var(--density-scale)); --snackbar-height: calc(48px * var(--density-scale)); --bottom-sheet-handle-width: 32px; --bottom-sheet-handle-height: 4px; /* ============================================================ * Grid and layout tokens (responsive) * ============================================================ */ --grid-columns: 4; --grid-gutter: 16px; --grid-margin: 16px; --grid-max-width: 1440px; --content-max-width: 65ch; --layout-gap: 16px; /* ── Spacing scale (moved into canon 2026-09-02, PMO-0057 Task 1.3b) ── --space-1 … --space-9 (declared above) are the carriers; --s1 … --s9 are the guide's short aliases of them, previously guide-local literals. Material spacing names alias them (m3.material.io/styles/spacing/tokens, read 2026-09-02: "the base unit of measurement md.sys.measurement.space100 is 8dp"; those tokens ship on Compose only, so on the web these are aliases, not a second scale). Nested units Skyzai does not carry as a scale step exist only under their Material name. */ --s1: var(--space-1); --s2: var(--space-2); --s3: var(--space-3); --s4: var(--space-4); --s5: var(--space-5); --s6: var(--space-6); --s7: var(--space-7); --s8: var(--space-8); --s9: var(--space-9); --md-sys-measurement-space0: 0px; --md-sys-measurement-space25: 2px; --md-sys-measurement-space50: var(--s1); --md-sys-measurement-space75: 6px; --md-sys-measurement-space100: var(--s2); --md-sys-measurement-space125: 10px; --md-sys-measurement-space150: var(--s3); --md-sys-measurement-space175: 14px; --md-sys-measurement-space200: var(--s4); --md-sys-measurement-space250: 20px; --md-sys-measurement-space300: var(--s5); --md-sys-measurement-space400: var(--s6); --md-sys-measurement-space450: 36px; --md-sys-measurement-space500: 40px; --md-sys-measurement-space600: var(--s7); --md-sys-measurement-space700: 56px; --md-sys-measurement-space800: var(--s8); --md-sys-measurement-space900: 72px; --md-sys-measurement-space1200: var(--s9); /* Skyzai extension of the scale */ /* ============================================================ * Icon system tokens * ============================================================ */ --icon-xs: 12px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; --icon-2xl: 48px; --icon-container-sm: 32px; --icon-container-md: 40px; --icon-container-lg: 48px; --icon-stroke-default: 1.5px; --icon-stroke-bold: 2px; /* ============================================================ * Motion token completion (Material 3 full scale) * ============================================================ */ --dur-extra-long2: 800ms; --dur-extra-long3: 900ms; --dur-extra-long4: 1000ms; /* Stagger delays for list/card entrance animations */ --stagger-fast: 30ms; --stagger-base: 50ms; --stagger-slow: 100ms; /* Stroke roles. */ --stroke-thin: 1px; --stroke-thick: 2px; --stroke-thicker: 3px; --stroke-thickest: 4px; } [data-theme="dark"] { --ambient-ceiling: color-mix(in srgb, #ffeb3b, transparent 84%); --ambient-wall: color-mix(in srgb, #2196f3, transparent 84%); --ambient-floor: color-mix(in srgb, #4caf50, transparent 88%); --ambient-cove: color-mix(in srgb, #ffeb3b, transparent 78%); --ambient-panel: color-mix(in srgb, #fffde7, transparent 92%); --ambient-edge: color-mix(in srgb, #ffeb3b, transparent 72%); --ambient-shadow: color-mix(in srgb, #2196f3, transparent 78%); --bg: #050505; --surface: #0A0A0A; --elevated: #111111; --md-sys-color-primary: #FFEB3B; --md-sys-color-on-primary: #050505; --md-sys-color-primary-container: #333100; --md-sys-color-on-primary-container: #FFFDE7; --md-sys-color-secondary: #2196F3; /* WCAG AA repair 2026-07-30: white on #2196F3 = 3.12:1 (FAIL). * Black = 6.72:1 (PASS). The brand hue is UNCHANGED — an on-color is * computed for legibility against its container, per M3; it is not a * brand hue. No founder colour decision is required. */ --md-sys-color-on-secondary: #000000; --md-sys-color-secondary-container: #003352; --md-sys-color-on-secondary-container: #D8EFFF; --md-sys-color-tertiary: #4CAF50; --md-sys-color-on-tertiary: #050505; --md-sys-color-tertiary-container: #00390B; --md-sys-color-on-tertiary-container: #D5FFD6; --md-sys-color-error: #F44336; /* WCAG AA repair 2026-07-30: white on #F44336 = 3.68:1 (FAIL). * Black = 5.70:1 (PASS). Sector-Finance hue UNCHANGED. * Light / true-tone keep white on #D32F2F (4.98:1) — already passing. */ --md-sys-color-on-error: #000000; --md-sys-color-error-container: #690005; --md-sys-color-on-error-container: #FFDED9; --md-sys-color-background: #050505; --md-sys-color-on-background: #F3F4F6; --md-sys-color-surface: #0A0A0A; --md-sys-color-on-surface: #FFFDE7; --md-sys-color-surface-variant: #111111; --md-sys-color-on-surface-variant: #9CA3AF; --md-sys-color-outline: #555555; --md-sys-color-outline-variant: #2A2A2A; --md-sys-color-inverse-surface: #F3F4F6; --md-sys-color-inverse-on-surface: #050505; --md-sys-color-inverse-primary: #625E00; --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.48); --md-sys-color-surface-tint: var(--md-sys-color-primary); /* ── Material 3 surface + fixed roles (added 2026-09-02, PMO-0057 Task 1.1) ── Surface roles alias the existing Skyzai carriers --surface-* (one ramp, one value, two names): the Material name is the public contract, the local name is the carrier. The ramp keeps Material's ORDER (lowest < low < container < high < highest; dim <= surface <= bright) at Skyzai-compressed tone steps, because the surface ink is fixed identity, not a generated N-tone. Material defines these roles relatively; it does not fix tones for custom schemes. Fixed roles: tones 90 · 80 · 10 · 30 of this appearance's md.ref palette (regenerated 2026-09-02 from the key colours; F-1.1 closed — the stale palettes are gone). Fixed roles do not move with tonal elevation WITHIN an appearance; Skyzai's appearance-dependent primary hue means they are not fixed ACROSS appearances — a declared Material deviation tied to owner question Q4. */ --md-sys-color-surface-dim: var(--surface-dim); --md-sys-color-surface-bright: var(--surface-bright); --md-sys-color-surface-container-lowest: var(--surface-container-lowest); --md-sys-color-surface-container-low: var(--surface-container-low); --md-sys-color-surface-container: var(--surface-container); --md-sys-color-surface-container-high: var(--surface-container-high); --md-sys-color-surface-container-highest: var(--surface-container-highest); --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); /* Tonal surface container roles — dark theme */ --surface-dim: #050505; --surface-container-lowest: #060606; --surface-container-low: #080808; --surface-container: #0A0A0A; --surface-container-high: #111111; --surface-container-highest: #161616; --surface-bright: #1A1A1A; --scrim: rgba(0, 0, 0, 0.48); /* md.ref palettes — generated 2026-09-02 with @material/material-color-utilities 0.3.0 (HCT; TonalPalette.fromHueAndChroma on each appearance's KEY colour, chroma floor 48; neutral = primary hue at chroma 6, neutral-variant at chroma 8, per Material TonalSpot). Surfaces do NOT read the neutral tones — the Skyzai surface inks are fixed identity. */ --ref-primary-0: #000000; --ref-primary-10: #201C00; --ref-primary-20: #363100; --ref-primary-30: #4F4800; --ref-primary-40: #695F00; --ref-primary-50: #847800; --ref-primary-60: #A09200; --ref-primary-70: #BDAD00; --ref-primary-80: #DBC90A; --ref-primary-90: #F9E534; --ref-primary-95: #FFF39E; --ref-primary-99: #FFFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #001D36; --ref-secondary-20: #003258; --ref-secondary-30: #00497D; --ref-secondary-40: #0061A4; --ref-secondary-50: #007BCC; --ref-secondary-60: #1E95F2; --ref-secondary-70: #63B0FF; --ref-secondary-80: #9ECAFF; --ref-secondary-90: #D1E4FF; --ref-secondary-95: #EAF1FF; --ref-secondary-99: #FDFCFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #00390A; --ref-tertiary-30: #005313; --ref-tertiary-40: #006E1C; --ref-tertiary-50: #22892F; --ref-tertiary-60: #41A447; --ref-tertiary-70: #5DC05E; --ref-tertiary-80: #78DC77; --ref-tertiary-90: #94F990; --ref-tertiary-95: #C8FFC0; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410001; --ref-error-20: #690002; --ref-error-30: #930005; --ref-error-40: #BB1614; --ref-error-50: #E0342A; --ref-error-60: #FF5545; --ref-error-70: #FF8A7B; --ref-error-80: #FFB4A9; --ref-error-90: #FFDAD5; --ref-error-95: #FFEDEA; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #1D1C13; --ref-neutral-20: #323027; --ref-neutral-30: #49473D; --ref-neutral-40: #615E54; --ref-neutral-50: #7A776C; --ref-neutral-60: #949185; --ref-neutral-70: #AFAB9F; --ref-neutral-80: #CBC6B9; --ref-neutral-90: #E7E2D5; --ref-neutral-95: #F6F0E3; --ref-neutral-99: #FFFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #1E1C11; --ref-neutral-variant-20: #333124; --ref-neutral-variant-30: #4A473A; --ref-neutral-variant-40: #625F50; --ref-neutral-variant-50: #7B7768; --ref-neutral-variant-60: #959181; --ref-neutral-variant-70: #B0AB9A; --ref-neutral-variant-80: #CBC6B5; --ref-neutral-variant-90: #E8E2D0; --ref-neutral-variant-95: #F6F1DE; --ref-neutral-variant-99: #FFFBFF; --ref-neutral-variant-100: #FFFFFF; /* Secondary: blue-soft (#42a5f5) */ /* Tertiary: blue (#2196f3) */ /* Error: red (#f44336) */ /* Neutral: grayscale with slight warmth */ } [data-theme="light"] { --ambient-ceiling: color-mix(in srgb, #1565c0, transparent 88%); --ambient-wall: color-mix(in srgb, #1565c0, transparent 90%); --ambient-floor: color-mix(in srgb, #2e7d32, transparent 92%); --ambient-cove: color-mix(in srgb, #b77900, transparent 84%); --ambient-panel: rgba(255,255,255,0.70); --ambient-edge: color-mix(in srgb, #1565c0, transparent 78%); --ambient-shadow: color-mix(in srgb, #1565c0, transparent 84%); --bg: #FFFFFF; --surface: #F8FAFC; --elevated: #EEF2F7; --md-sys-color-primary: #1565C0; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #D3E4FF; --md-sys-color-on-primary-container: #001D35; --md-sys-color-secondary: #B77900; /* WCAG AA repair 2026-07-30: white on light-theme #B77900 = 3.65:1 (FAIL). * Black = 5.75:1 (PASS). Electronic-Labour hue UNCHANGED. * NOTE: true-tone deliberately keeps WHITE — its #92650A is darker and * white scores 5.14:1 there while black would drop to 4.09:1. On-colours * are per-theme by design; do not "harmonise" them to one value. */ --md-sys-color-on-secondary: #000000; --md-sys-color-secondary-container: #F9F1A6; --md-sys-color-on-secondary-container: #1C1B00; --md-sys-color-tertiary: #2E7D32; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #D5FFD6; --md-sys-color-on-tertiary-container: #002204; --md-sys-color-error: #D32F2F; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFDED9; --md-sys-color-on-error-container: #410002; --md-sys-color-background: #FFFFFF; --md-sys-color-on-background: #111827; --md-sys-color-surface: #F8FAFC; --md-sys-color-on-surface: #111827; --md-sys-color-surface-variant: #EEF2F7; --md-sys-color-on-surface-variant: #4B5563; --md-sys-color-outline: #6B7280; --md-sys-color-outline-variant: #D8DEE8; --md-sys-color-inverse-surface: #111827; --md-sys-color-inverse-on-surface: #FFFFFF; --md-sys-color-inverse-primary: #9ECBFF; --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.32); --md-sys-color-surface-tint: var(--md-sys-color-primary); /* ── Material 3 surface + fixed roles (added 2026-09-02, PMO-0057 Task 1.1) ── Surface roles alias the existing Skyzai carriers --surface-* (one ramp, one value, two names): the Material name is the public contract, the local name is the carrier. The ramp keeps Material's ORDER (lowest < low < container < high < highest; dim <= surface <= bright) at Skyzai-compressed tone steps, because the surface ink is fixed identity, not a generated N-tone. Material defines these roles relatively; it does not fix tones for custom schemes. Fixed roles: tones 90 · 80 · 10 · 30 of this appearance's md.ref palette (regenerated 2026-09-02 from the key colours; F-1.1 closed — the stale palettes are gone). Fixed roles do not move with tonal elevation WITHIN an appearance; Skyzai's appearance-dependent primary hue means they are not fixed ACROSS appearances — a declared Material deviation tied to owner question Q4. */ --md-sys-color-surface-dim: var(--surface-dim); --md-sys-color-surface-bright: var(--surface-bright); --md-sys-color-surface-container-lowest: var(--surface-container-lowest); --md-sys-color-surface-container-low: var(--surface-container-low); --md-sys-color-surface-container: var(--surface-container); --md-sys-color-surface-container-high: var(--surface-container-high); --md-sys-color-surface-container-highest: var(--surface-container-highest); --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); /* Tonal surface container roles — light theme */ --surface-dim: #F4F4F4; --surface-container-lowest: #FFFFFF; --surface-container-low: #FAFBFD; --surface-container: #F8FAFC; --surface-container-high: #EEF2F7; --surface-container-highest: #E8EDF3; --surface-bright: #FFFFFF; --scrim: rgba(0, 0, 0, 0.32); /* md.ref palettes — generated 2026-09-02 with @material/material-color-utilities 0.3.0 (HCT; TonalPalette.fromHueAndChroma on each appearance's KEY colour, chroma floor 48; neutral = primary hue at chroma 6, neutral-variant at chroma 8, per Material TonalSpot). Surfaces do NOT read the neutral tones — the Skyzai surface inks are fixed identity. */ --ref-primary-0: #000000; --ref-primary-10: #001B3D; --ref-primary-20: #003063; --ref-primary-30: #00468C; --ref-primary-40: #005DB7; --ref-primary-50: #3277D2; --ref-primary-60: #5191EE; --ref-primary-70: #79ACFF; --ref-primary-80: #A9C7FF; --ref-primary-90: #D6E3FF; --ref-primary-95: #ECF0FF; --ref-primary-99: #FDFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #291800; --ref-secondary-20: #452B00; --ref-secondary-30: #633F00; --ref-secondary-40: #825500; --ref-secondary-50: #A36B00; --ref-secondary-60: #C48412; --ref-secondary-70: #E29E30; --ref-secondary-80: #FFB952; --ref-secondary-90: #FFDDB3; --ref-secondary-95: #FFEEDC; --ref-secondary-99: #FFFBFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #003909; --ref-tertiary-30: #005312; --ref-tertiary-40: #1B6D24; --ref-tertiary-50: #38873A; --ref-tertiary-60: #53A252; --ref-tertiary-70: #6DBD6A; --ref-tertiary-80: #88D982; --ref-tertiary-90: #A3F69C; --ref-tertiary-95: #C8FFBF; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410003; --ref-error-20: #680008; --ref-error-30: #930010; --ref-error-40: #BA1A20; --ref-error-50: #DD3735; --ref-error-60: #FF544E; --ref-error-70: #FF8980; --ref-error-80: #FFB3AC; --ref-error-90: #FFDAD6; --ref-error-95: #FFEDEB; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #191C20; --ref-neutral-20: #2E3036; --ref-neutral-30: #45474C; --ref-neutral-40: #5C5E64; --ref-neutral-50: #75777D; --ref-neutral-60: #8F9097; --ref-neutral-70: #AAABB1; --ref-neutral-80: #C5C6CD; --ref-neutral-90: #E2E2E9; --ref-neutral-95: #F0F0F7; --ref-neutral-99: #FDFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #181C22; --ref-neutral-variant-20: #2D3038; --ref-neutral-variant-30: #44474E; --ref-neutral-variant-40: #5B5E66; --ref-neutral-variant-50: #74777F; --ref-neutral-variant-60: #8E9099; --ref-neutral-variant-70: #A8ABB4; --ref-neutral-variant-80: #C4C6CF; --ref-neutral-variant-90: #E0E2EC; --ref-neutral-variant-95: #EEF0FA; --ref-neutral-variant-99: #FDFBFF; --ref-neutral-variant-100: #FFFFFF; /* Secondary: blue-soft (#2196f3) */ /* Tertiary: gold (#ffeb3b) */ /* Error: red (#d32f2f) */ /* Neutral */ } [data-theme="true-tone"] { --ambient-ceiling: color-mix(in srgb, #2e7d32, transparent 88%); --ambient-wall: color-mix(in srgb, #2e7d32, transparent 90%); --ambient-floor: color-mix(in srgb, #1565c0, transparent 94%); --ambient-cove: color-mix(in srgb, #92650a, transparent 84%); --ambient-panel: rgba(255,253,247,0.66); --ambient-edge: color-mix(in srgb, #2e7d32, transparent 78%); --ambient-shadow: color-mix(in srgb, #2e7d32, transparent 84%); --bg: #FDFAF4; --surface: #FAF7F0; --elevated: #F2EDE3; --md-sys-color-primary: #2E7D32; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #D5FFD6; --md-sys-color-on-primary-container: #002204; --md-sys-color-secondary: #92650A; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #F7F2E5; --md-sys-color-on-secondary-container: #1C1B00; --md-sys-color-tertiary: #1565C0; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #D3E4FF; --md-sys-color-on-tertiary-container: #001D35; --md-sys-color-error: #D32F2F; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFDED9; --md-sys-color-on-error-container: #410002; --md-sys-color-background: #FDFAF4; --md-sys-color-on-background: #18160E; --md-sys-color-surface: #FAF7F0; --md-sys-color-on-surface: #18160E; --md-sys-color-surface-variant: #F2EDE3; --md-sys-color-on-surface-variant: #4A4438; --md-sys-color-outline: #7A7062; --md-sys-color-outline-variant: #D6CFBF; --md-sys-color-inverse-surface: #18160E; --md-sys-color-inverse-on-surface: #FDFAF4; --md-sys-color-inverse-primary: #93F197; --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.28); --md-sys-color-surface-tint: var(--md-sys-color-primary); /* ── Material 3 surface + fixed roles (added 2026-09-02, PMO-0057 Task 1.1) ── Surface roles alias the existing Skyzai carriers --surface-* (one ramp, one value, two names): the Material name is the public contract, the local name is the carrier. The ramp keeps Material's ORDER (lowest < low < container < high < highest; dim <= surface <= bright) at Skyzai-compressed tone steps, because the surface ink is fixed identity, not a generated N-tone. Material defines these roles relatively; it does not fix tones for custom schemes. Fixed roles: tones 90 · 80 · 10 · 30 of this appearance's md.ref palette (regenerated 2026-09-02 from the key colours; F-1.1 closed — the stale palettes are gone). Fixed roles do not move with tonal elevation WITHIN an appearance; Skyzai's appearance-dependent primary hue means they are not fixed ACROSS appearances — a declared Material deviation tied to owner question Q4. */ --md-sys-color-surface-dim: var(--surface-dim); --md-sys-color-surface-bright: var(--surface-bright); --md-sys-color-surface-container-lowest: var(--surface-container-lowest); --md-sys-color-surface-container-low: var(--surface-container-low); --md-sys-color-surface-container: var(--surface-container); --md-sys-color-surface-container-high: var(--surface-container-high); --md-sys-color-surface-container-highest: var(--surface-container-highest); --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); /* Tonal surface container roles — true-tone theme */ --surface-dim: #F5F1E8; --surface-container-lowest: #FEFCF7; --surface-container-low: #FCF9F2; --surface-container: #FAF7F0; --surface-container-high: #F2EDE3; --surface-container-highest: #EBE5D8; --surface-bright: #FEFCF7; --scrim: rgba(0, 0, 0, 0.28); /* md.ref palettes — generated 2026-09-02 with @material/material-color-utilities 0.3.0 (HCT; TonalPalette.fromHueAndChroma on each appearance's KEY colour, chroma floor 48; neutral = primary hue at chroma 6, neutral-variant at chroma 8, per Material TonalSpot). Surfaces do NOT read the neutral tones — the Skyzai surface inks are fixed identity. */ --ref-primary-0: #000000; --ref-primary-10: #002204; --ref-primary-20: #003909; --ref-primary-30: #005312; --ref-primary-40: #1B6D24; --ref-primary-50: #38873A; --ref-primary-60: #53A252; --ref-primary-70: #6DBD6A; --ref-primary-80: #88D982; --ref-primary-90: #A3F69C; --ref-primary-95: #C8FFBF; --ref-primary-99: #F6FFF0; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #281800; --ref-secondary-20: #432C00; --ref-secondary-30: #604100; --ref-secondary-40: #7F5600; --ref-secondary-50: #9F6D00; --ref-secondary-60: #BF8613; --ref-secondary-70: #DDA031; --ref-secondary-80: #FCBB4A; --ref-secondary-90: #FFDEAE; --ref-secondary-95: #FFEEDA; --ref-secondary-99: #FFFBFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #001B3D; --ref-tertiary-20: #003063; --ref-tertiary-30: #00468C; --ref-tertiary-40: #005DB7; --ref-tertiary-50: #3277D2; --ref-tertiary-60: #5191EE; --ref-tertiary-70: #79ACFF; --ref-tertiary-80: #A9C7FF; --ref-tertiary-90: #D6E3FF; --ref-tertiary-95: #ECF0FF; --ref-tertiary-99: #FDFBFF; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410003; --ref-error-20: #680008; --ref-error-30: #930010; --ref-error-40: #BA1A20; --ref-error-50: #DD3735; --ref-error-60: #FF544E; --ref-error-70: #FF8980; --ref-error-80: #FFB3AC; --ref-error-90: #FFDAD6; --ref-error-95: #FFEDEB; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #191D17; --ref-neutral-20: #2D322C; --ref-neutral-30: #444841; --ref-neutral-40: #5B6059; --ref-neutral-50: #747871; --ref-neutral-60: #8E928A; --ref-neutral-70: #A9ACA4; --ref-neutral-80: #C4C8BF; --ref-neutral-90: #E0E4DB; --ref-neutral-95: #EFF2E9; --ref-neutral-99: #FAFDF4; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #171D16; --ref-neutral-variant-20: #2C322A; --ref-neutral-variant-30: #424940; --ref-neutral-variant-40: #5A6057; --ref-neutral-variant-50: #72796F; --ref-neutral-variant-60: #8C9388; --ref-neutral-variant-70: #A7ADA2; --ref-neutral-variant-80: #C2C9BD; --ref-neutral-variant-90: #DEE5D8; --ref-neutral-variant-95: #EDF3E6; --ref-neutral-variant-99: #F8FEF2; --ref-neutral-variant-100: #FFFFFF; /* Secondary: green-soft (#388e3c) */ /* Tertiary: blue (#1565c0) */ /* Error: red (#c62828) */ /* Neutral: warm grayscale */ } @media (horizontal-viewport-segments: 2) { /* Spanning layout for foldables */ :root { --fold-hinge-width: env(viewport-segment-width 0 0); } } @media (vertical-viewport-segments: 2) { :root { --fold-hinge-height: env(viewport-segment-height 0 0); } } /* ============================================================ * Responsive grid tokens (Material 3 window size classes) * ============================================================ */ @media (min-width: 600px) { :root { --grid-columns: 8; --grid-gutter: 16px; --grid-margin: 16px; --layout-gap: 16px; } } @media (min-width: 840px) { :root { --grid-columns: 12; --grid-gutter: 24px; --grid-margin: 24px; --layout-gap: 24px; } } @media (min-width: 1200px) { :root { --grid-margin: 32px; --layout-gap: 32px; } } @media (min-width: 1600px) { :root { --grid-margin: 48px; --layout-gap: 32px; } } } @layer reset { /* ============================================================ * Density — Material 3 density scale * * Three density levels for different content densities: * comfortable: default; 48dp touch targets; generous spacing * medium: 44dp visual density; 48dp minimum hit target * compact: 40dp visual density; 48dp minimum hit target * * Usage: set data-density="compact" on or a container. * Components read --density-scale and adjust padding/gap accordingly. * * Per: https://m3.material.io/foundations/layout/understanding-layout * ============================================================ */ :root, [data-density="comfortable"] { --density-scale: 1; --density-target: 48px; --density-target-min: 48px; --density-gap-xs: 4px; --density-gap-sm: 8px; --density-gap-md: 16px; --density-gap-lg: 24px; --density-gap-xl: 32px; --density-padding-xs: 4px; --density-padding-sm: 8px; --density-padding-md: 16px; --density-padding-lg: 24px; --density-padding-xl: 32px; } [data-density="medium"] { --density-scale: 0.875; --density-target: 44px; --density-target-min: 48px; --density-gap-xs: 4px; --density-gap-sm: 6px; --density-gap-md: 12px; --density-gap-lg: 20px; --density-gap-xl: 28px; --density-padding-xs: 4px; --density-padding-sm: 6px; --density-padding-md: 12px; --density-padding-lg: 20px; --density-padding-xl: 28px; } [data-density="compact"] { --density-scale: 0.75; --density-target: 40px; --density-target-min: 48px; --density-gap-xs: 2px; --density-gap-sm: 4px; --density-gap-md: 8px; --density-gap-lg: 16px; --density-gap-xl: 24px; --density-padding-xs: 2px; --density-padding-sm: 4px; --density-padding-md: 8px; --density-padding-lg: 16px; --density-padding-xl: 24px; } } @layer accessibility { @media (prefers-reduced-transparency: reduce) { :root { --backdrop-blur: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ * High Contrast Mode (Windows / forced-colors) * * Systematic color mapping per Microsoft Fluent 2 + Material 3. * All semantic color roles remap to CSS system colors so the * user's High Contrast theme is respected. * ============================================================ */ @media (forced-colors: active) { :root { --md-sys-color-primary: Highlight; --md-sys-color-on-primary: HighlightText; --md-sys-color-primary-container: Highlight; --md-sys-color-on-primary-container: HighlightText; --md-sys-color-secondary: Highlight; --md-sys-color-on-secondary: HighlightText; --md-sys-color-secondary-container: Highlight; --md-sys-color-on-secondary-container: HighlightText; --md-sys-color-tertiary: Highlight; --md-sys-color-on-tertiary: HighlightText; --md-sys-color-tertiary-container: Highlight; --md-sys-color-on-tertiary-container: HighlightText; --md-sys-color-error: GrayText; --md-sys-color-on-error: Canvas; --md-sys-color-error-container: GrayText; --md-sys-color-on-error-container: Canvas; --md-sys-color-background: Canvas; --md-sys-color-on-background: CanvasText; --md-sys-color-surface: Canvas; --md-sys-color-on-surface: CanvasText; --md-sys-color-surface-variant: Canvas; --md-sys-color-on-surface-variant: GrayText; --md-sys-color-outline: ButtonText; --md-sys-color-outline-variant: ButtonBorder; --md-sys-color-inverse-surface: CanvasText; --md-sys-color-inverse-on-surface: Canvas; --md-sys-color-inverse-primary: Highlight; --md-sys-color-shadow: CanvasText; --md-sys-color-scrim: CanvasText; --md-sys-color-surface-tint: Highlight; --focus-ring-color: Highlight; } .mapping th, .mapping td, .refused-claims, .pricing-card, .receipt-row, .badge, .evidence-badge { outline: 1px solid CanvasText; } /* Ensure focus rings are visible in forced-colors */ :focus-visible { outline: var(--focus-ring-width) solid Highlight; outline-offset: var(--focus-ring-offset); } } } @layer components { /* ============================================================ * State layer pattern (Material 3) * * Apply class "interactive" or "state-layer" to any clickable * element to get the canonical hover/focus/pressed/dragged overlay. * The overlay uses currentColor so it adapts to any text color. * * Usage: * ============================================================ */ .state-layer, .interactive { position: relative; overflow: hidden; } .state-layer::before, .interactive::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--dur-short3) var(--ease-standard); border-radius: inherit; } .state-layer:hover::before, .interactive:hover::before { opacity: var(--state-hover-opacity); } .state-layer:focus-visible::before, .interactive:focus-visible::before { opacity: var(--state-focus-opacity); } .state-layer:active::before, .interactive:active::before { opacity: var(--state-pressed-opacity); } /* aria-pressed is persistent selection, not a physical press. Its component owns the selected roles; :active above owns transient press feedback. */ .state-layer:disabled::before, .interactive:disabled::before, .state-layer[aria-disabled="true"]::before, .interactive[aria-disabled="true"]::before { opacity: 0; } /* Each component owns disabled content/container colours independently; fading the complete element incorrectly multiplies both opacities. */ /* Draggable state (drag-and-drop interfaces) */ .state-layer[data-dragging="true"]:not(:disabled):not([aria-disabled="true"])::before, .interactive[data-dragging="true"]:not(:disabled):not([aria-disabled="true"])::before { opacity: var(--state-dragged-opacity); } /* Material card state pattern. State layers belong on the material surface; ambient lighting belongs behind or around it, never inside it. */ .material-state-card { position: relative; overflow: hidden; isolation: isolate; transform: translateY(0); transition: transform var(--dur-short3) var(--ease-standard), border-color var(--dur-short3) var(--ease-standard), background-color var(--dur-short3) var(--ease-standard), box-shadow var(--dur-medium1) var(--ease-standard); } .material-state-card > .material-card-state-layer { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: var(--card-state-color); opacity: 0; pointer-events: none; transition: opacity var(--dur-short3) var(--ease-standard); } .material-state-card > *:not(.material-card-state-layer) { position: relative; z-index: 2; } @media (hover: hover) and (pointer: fine) { .material-state-card:hover { box-shadow: var(--card-hover-elevation); transform: var(--card-hover-transform); } .material-state-card:hover > .material-card-state-layer { opacity: var(--state-hover-opacity); } } .material-state-card:focus-visible, .material-state-card:focus-within { outline: var(--focus-ring-outline); outline-offset: var(--focus-ring-offset); box-shadow: var(--card-focus-elevation), var(--focus-ring-shadow); } .material-state-card:focus-within:not(:focus-visible) { outline: none; } .material-state-card:focus-visible > .material-card-state-layer, .material-state-card:focus-within > .material-card-state-layer { opacity: var(--state-focus-opacity); } .material-state-card:active, .material-state-card.is-pressed { box-shadow: var(--card-press-elevation); transform: var(--card-press-transform); transition-duration: var(--dur-short2); } .material-state-card:active > .material-card-state-layer, .material-state-card.is-pressed > .material-card-state-layer { opacity: var(--state-pressed-opacity); } /* ============================================================ * Focus ring defaults (WCAG 2.4.7 / 2.4.11) * ============================================================ */ :focus-visible { outline: var(--focus-ring-outline); outline-offset: var(--focus-ring-offset); } /* Remove default focus outline where our custom ring is applied */ :focus:not(:focus-visible) { outline: none; } /* ============================================================ * Z-index helpers — pair elevation with z-index * ============================================================ */ .elev-raised { z-index: var(--z-sticky); } .elev-modal { z-index: var(--z-modal); } .elev-overlay { z-index: var(--z-overlay); } .topbar { z-index: var(--z-sticky); } .dropdown { z-index: var(--z-dropdown); } .popover { z-index: var(--z-popover); } .tooltip { z-index: var(--z-tooltip); } .toast { z-index: var(--z-toast); } .modal { z-index: var(--z-modal); } .overlay { z-index: var(--z-overlay); } /* ============================================================ * Safe area padding helpers * ============================================================ */ .safe-area-top { padding-top: var(--safe-area-top); } .safe-area-bottom { padding-bottom: var(--safe-area-bottom); } .safe-area-left { padding-left: var(--safe-area-left); } .safe-area-right { padding-right: var(--safe-area-right); } /* ============================================================ * Container query context for components * Enable on any component wrapper: class="cq" * ============================================================ */ .cq { container-type: inline-size; } /* Organ dashboard card responsive behavior via container query */ @container (min-width: 400px) { .organ-card { --card-padding: calc(20px * var(--density-scale)); --card-gap: calc(12px * var(--density-scale)); } } @container (min-width: 600px) { .organ-card { --card-padding: calc(24px * var(--density-scale)); --card-gap: calc(16px * var(--density-scale)); } } /* ============================================================ * Scroll-driven animations (Chrome 115+, Safari 17.4+) * Hero proof-flow gradient concentration driven by scroll position. * Degrades gracefully: browsers without scroll-driven animations * show the static gradient at full opacity. * ============================================================ */ @keyframes hero-proof-flow { 0% { opacity: 0.18; } 50% { opacity: 0.34; } 100% { opacity: 0.12; } } .hero-gradient-scroll { animation: hero-proof-flow linear both; animation-timeline: scroll(root); animation-range: 0% 50%; } /* Reduced motion: disable scroll-driven animation */ @media (prefers-reduced-motion: reduce) { .hero-gradient-scroll { animation: none; opacity: 0.18; } } /* ============================================================ * HUE AXIS — orthogonal to surface. Public .com/.org law. * data-brand fixes the primary family. data-theme / data-surface / * prefers-color-scheme change substrate only. true-tone stays standalone. * ============================================================ */ :root:root[data-surface="light"] { --bg: #FFFFFF; --surface: #F8FAFC; --elevated: #EEF2F7; --md-sys-color-background: #FFFFFF; --md-sys-color-surface: #F8FAFC; --md-sys-color-on-background: #101418; --md-sys-color-on-surface: #101418; --md-sys-color-on-surface-variant: #5F6368; --md-sys-color-outline-variant: #D8E1EE; } :root:root[data-surface="dark"] { --bg: #050505; --surface: #0A0A0A; --elevated: #111111; --md-sys-color-background: #050505; --md-sys-color-surface: #0A0A0A; --md-sys-color-on-background: #F3F4F6; --md-sys-color-on-surface: #FFFDE7; --md-sys-color-on-surface-variant: #9CA3AF; --md-sys-color-outline-variant: #2A2A2A; } @media (prefers-color-scheme: light) { :root[data-brand] { --bg: #FFFFFF; --surface: #F8FAFC; --elevated: #EEF2F7; --md-sys-color-background: #FFFFFF; --md-sys-color-surface: #F8FAFC; --md-sys-color-on-background: #101418; --md-sys-color-on-surface: #101418; --md-sys-color-on-surface-variant: #5F6368; --md-sys-color-outline-variant: #D8E1EE; } } @media (prefers-color-scheme: dark) { :root[data-brand] { --bg: #050505; --surface: #0A0A0A; --elevated: #111111; --md-sys-color-background: #050505; --md-sys-color-surface: #0A0A0A; --md-sys-color-on-background: #F3F4F6; --md-sys-color-on-surface: #FFFDE7; --md-sys-color-on-surface-variant: #9CA3AF; --md-sys-color-outline-variant: #2A2A2A; } } [data-brand="com"] { --md-sys-color-primary: #1565C0; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #D3E4FF; --md-sys-color-on-primary-container: #001B3D; --accent: var(--md-sys-color-primary); } [data-brand="org"] { --md-sys-color-primary: #FFEB3B; --md-sys-color-on-primary: #050505; --md-sys-color-primary-container: #333100; --md-sys-color-on-primary-container: #FFFDE7; --accent: var(--md-sys-color-primary); } @media (prefers-color-scheme: dark) { [data-brand="com"] { --md-sys-color-primary: #7DB4EC; --md-sys-color-on-primary: #04121F; --md-sys-color-primary-container: #0B3A72; --md-sys-color-on-primary-container: #D3E4FF; } } @media (prefers-color-scheme: light) { [data-brand="org"] { --md-sys-color-primary: #92650A; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #F7F2E5; --md-sys-color-on-primary-container: #1C1B00; } } [data-brand="com"][data-theme="dark"], [data-brand="com"][data-surface="dark"] { --md-sys-color-primary: #7DB4EC; --md-sys-color-on-primary: #04121F; --md-sys-color-primary-container: #0B3A72; --md-sys-color-on-primary-container: #D3E4FF; } [data-brand="com"][data-theme="light"], [data-brand="com"][data-surface="light"] { --md-sys-color-primary: #1565C0; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #D3E4FF; --md-sys-color-on-primary-container: #001B3D; } [data-brand="org"][data-theme="light"], [data-brand="org"][data-surface="light"] { --md-sys-color-primary: #92650A; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #F7F2E5; --md-sys-color-on-primary-container: #1C1B00; } [data-brand="org"][data-theme="dark"], [data-brand="org"][data-surface="dark"] { --md-sys-color-primary: #FFEB3B; --md-sys-color-on-primary: #050505; --md-sys-color-primary-container: #333100; --md-sys-color-on-primary-container: #FFFDE7; } @media (horizontal-viewport-segments: 2) { /* Spanning layout for foldables */ :root { --fold-hinge-width: env(viewport-segment-width 0 0); } } @media (vertical-viewport-segments: 2) { :root { --fold-hinge-height: env(viewport-segment-height 0 0); } } /* ============================================================ * Responsive grid tokens (Material 3 window size classes) * ============================================================ */ } @layer tokens { [data-theme="dark-warm"] { color-scheme: dark; --ambient-ceiling: color-mix(in srgb, #ffd54f, transparent 84%); --ambient-wall: color-mix(in srgb, #2196f3, transparent 84%); --ambient-floor: color-mix(in srgb, #4caf50, transparent 88%); --ambient-cove: color-mix(in srgb, #ffd54f, transparent 78%); --ambient-panel: color-mix(in srgb, #ffe89a, transparent 92%); --ambient-edge: color-mix(in srgb, #ffd54f, transparent 72%); --ambient-shadow: color-mix(in srgb, #2196f3, transparent 78%); --bg: #0A0705; --surface: #120D07; --elevated: #1B1209; --surface-dim: #0A0705; --surface-container-lowest: #0D0906; --surface-container-low: #100B07; --surface-container: #120D07; --surface-container-high: #1B1209; --surface-container-highest: #24180C; --surface-bright: #2D1E10; --md-sys-color-primary: #FFD54F; --md-sys-color-on-primary: #211B00; --md-sys-color-primary-container: #3C2F00; --md-sys-color-on-primary-container: #FFE89A; --md-sys-color-secondary: #2196F3; --md-sys-color-on-secondary: #000000; --md-sys-color-secondary-container: #003352; --md-sys-color-on-secondary-container: #D8EFFF; --md-sys-color-tertiary: #4CAF50; --md-sys-color-on-tertiary: #050505; --md-sys-color-tertiary-container: #00390B; --md-sys-color-on-tertiary-container: #D5FFD6; --md-sys-color-error: #F44336; --md-sys-color-on-error: #000000; --md-sys-color-error-container: #690005; --md-sys-color-on-error-container: #FFDED9; --md-sys-color-background: #050505; --md-sys-color-on-background: #F3F4F6; --md-sys-color-surface: #120D07; --md-sys-color-on-surface: #F1E7D2; --md-sys-color-surface-variant: #111111; --md-sys-color-on-surface-variant: #B4A587; --md-sys-color-outline: #9D8E73; --md-sys-color-outline-variant: #322619; --md-sys-color-inverse-surface: #F1E7D2; --md-sys-color-inverse-on-surface: #24180C; --md-sys-color-inverse-primary: #705D00; --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.48); --ref-primary-0: #000000; --ref-primary-10: #241A00; --ref-primary-20: #3C2F00; --ref-primary-30: #574500; --ref-primary-40: #735C00; --ref-primary-50: #917400; --ref-primary-60: #AF8D00; --ref-primary-70: #CDA721; --ref-primary-80: #EBC23E; --ref-primary-90: #FFE087; --ref-primary-95: #FFEFCC; --ref-primary-99: #FFFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #001D36; --ref-secondary-20: #003258; --ref-secondary-30: #00497D; --ref-secondary-40: #0061A4; --ref-secondary-50: #007BCC; --ref-secondary-60: #1E95F2; --ref-secondary-70: #63B0FF; --ref-secondary-80: #9ECAFF; --ref-secondary-90: #D1E4FF; --ref-secondary-95: #EAF1FF; --ref-secondary-99: #FDFCFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #00390A; --ref-tertiary-30: #005313; --ref-tertiary-40: #006E1C; --ref-tertiary-50: #22892F; --ref-tertiary-60: #41A447; --ref-tertiary-70: #5DC05E; --ref-tertiary-80: #78DC77; --ref-tertiary-90: #94F990; --ref-tertiary-95: #C8FFC0; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410001; --ref-error-20: #690002; --ref-error-30: #930005; --ref-error-40: #BB1614; --ref-error-50: #E0342A; --ref-error-60: #FF5545; --ref-error-70: #FF8A7B; --ref-error-80: #FFB4A9; --ref-error-90: #FFDAD5; --ref-error-95: #FFEDEA; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #1F1B13; --ref-neutral-20: #343027; --ref-neutral-30: #4B463C; --ref-neutral-40: #635E53; --ref-neutral-50: #7C766B; --ref-neutral-60: #969084; --ref-neutral-70: #B1AA9E; --ref-neutral-80: #CDC6B9; --ref-neutral-90: #EAE2D4; --ref-neutral-95: #F8F0E2; --ref-neutral-99: #FFFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #1F1B10; --ref-neutral-variant-20: #353024; --ref-neutral-variant-30: #4C4639; --ref-neutral-variant-40: #645E4F; --ref-neutral-variant-50: #7D7667; --ref-neutral-variant-60: #989080; --ref-neutral-variant-70: #B3AA99; --ref-neutral-variant-80: #CFC6B4; --ref-neutral-variant-90: #EBE1CF; --ref-neutral-variant-95: #FAF0DD; --ref-neutral-variant-99: #FFFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: #FFE087; --md-sys-color-primary-fixed-dim: #EBC23E; --md-sys-color-on-primary-fixed: #241A00; --md-sys-color-on-primary-fixed-variant: #574500; --md-sys-color-secondary-fixed: #D1E4FF; --md-sys-color-secondary-fixed-dim: #9ECAFF; --md-sys-color-on-secondary-fixed: #001D36; --md-sys-color-on-secondary-fixed-variant: #00497D; --md-sys-color-tertiary-fixed: #94F990; --md-sys-color-tertiary-fixed-dim: #78DC77; --md-sys-color-on-tertiary-fixed: #002204; --md-sys-color-on-tertiary-fixed-variant: #005313; --vdim: #322619; --cream: #FFF3D4; --text: #F1E7D2; --muted: #B4A587; --dim: #8F7D60; --gold: #FFD54F; --accent: #FFD54F; --accent2: #FFE082; --accent-hover: #FFE082; --accent2-hover: #FFECB3; --md-sys-color-surface-dim: #0A0705; --md-sys-color-surface-container-lowest: #0D0906; --md-sys-color-surface-container-low: #100B07; --md-sys-color-surface-container: #120D07; --md-sys-color-surface-container-high: #1B1209; --md-sys-color-surface-container-highest: #24180C; --md-sys-color-surface-bright: #2D1E10; --md-sys-color-surface-tint: #FFD54F; } } @layer tokens { /* generated-stable-web-palettes:start */ @media (forced-colors: none) { :root:root[data-web-palette="gold"]:not([data-theme]) { color-scheme: dark; --ambient-ceiling: color-mix(in srgb, #ffeb3b, transparent 84%); --ambient-wall: color-mix(in srgb, #2196f3, transparent 84%); --ambient-floor: color-mix(in srgb, #4caf50, transparent 88%); --ambient-cove: color-mix(in srgb, #ffeb3b, transparent 78%); --ambient-panel: color-mix(in srgb, #fffde7, transparent 92%); --ambient-edge: color-mix(in srgb, #ffeb3b, transparent 72%); --ambient-shadow: color-mix(in srgb, #2196f3, transparent 78%); --bg: #050505; --surface: #0A0A0A; --elevated: #111111; --surface-dim: #050505; --surface-container-lowest: #060606; --surface-container-low: #080808; --surface-container: #0A0A0A; --surface-container-high: #111111; --surface-container-highest: #161616; --surface-bright: #1A1A1A; --scrim: rgba(0, 0, 0, 0.48); --md-sys-color-primary: var(--sz-color-gold-color); --md-sys-color-on-primary: var(--sz-color-gold-on-color); --md-sys-color-primary-container: var(--sz-color-gold-container); --md-sys-color-on-primary-container: var(--sz-color-gold-on-container); --md-sys-color-secondary: var(--sz-color-blue-color); --md-sys-color-on-secondary: var(--sz-color-blue-on-color); --md-sys-color-secondary-container: var(--sz-color-blue-container); --md-sys-color-on-secondary-container: var(--sz-color-blue-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #050505; --md-sys-color-on-background: #F3F4F6; --md-sys-color-surface: #0A0A0A; --md-sys-color-on-surface: #FFFDE7; --md-sys-color-surface-variant: #111111; --md-sys-color-on-surface-variant: #9CA3AF; --md-sys-color-outline: #555555; --md-sys-color-outline-variant: #2A2A2A; --md-sys-color-inverse-surface: #F3F4F6; --md-sys-color-inverse-on-surface: #050505; --md-sys-color-inverse-primary: var(--ref-primary-40); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.48); --ref-primary-0: #000000; --ref-primary-10: #201C00; --ref-primary-20: #363100; --ref-primary-30: #4F4800; --ref-primary-40: #695F00; --ref-primary-50: #847800; --ref-primary-60: #A09200; --ref-primary-70: #BDAD00; --ref-primary-80: #DBC90A; --ref-primary-90: #F9E534; --ref-primary-95: #FFF39E; --ref-primary-99: #FFFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #001D36; --ref-secondary-20: #003258; --ref-secondary-30: #00497D; --ref-secondary-40: #0061A4; --ref-secondary-50: #007BCC; --ref-secondary-60: #1E95F2; --ref-secondary-70: #63B0FF; --ref-secondary-80: #9ECAFF; --ref-secondary-90: #D1E4FF; --ref-secondary-95: #EAF1FF; --ref-secondary-99: #FDFCFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #00390A; --ref-tertiary-30: #005313; --ref-tertiary-40: #006E1C; --ref-tertiary-50: #22892F; --ref-tertiary-60: #41A447; --ref-tertiary-70: #5DC05E; --ref-tertiary-80: #78DC77; --ref-tertiary-90: #94F990; --ref-tertiary-95: #C8FFC0; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410001; --ref-error-20: #690002; --ref-error-30: #930005; --ref-error-40: #BB1614; --ref-error-50: #E0342A; --ref-error-60: #FF5545; --ref-error-70: #FF8A7B; --ref-error-80: #FFB4A9; --ref-error-90: #FFDAD5; --ref-error-95: #FFEDEA; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #1D1C13; --ref-neutral-20: #323027; --ref-neutral-30: #49473D; --ref-neutral-40: #615E54; --ref-neutral-50: #7A776C; --ref-neutral-60: #949185; --ref-neutral-70: #AFAB9F; --ref-neutral-80: #CBC6B9; --ref-neutral-90: #E7E2D5; --ref-neutral-95: #F6F0E3; --ref-neutral-99: #FFFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #1E1C11; --ref-neutral-variant-20: #333124; --ref-neutral-variant-30: #4A473A; --ref-neutral-variant-40: #625F50; --ref-neutral-variant-50: #7B7768; --ref-neutral-variant-60: #959181; --ref-neutral-variant-70: #B0AB9A; --ref-neutral-variant-80: #CBC6B5; --ref-neutral-variant-90: #E8E2D0; --ref-neutral-variant-95: #F6F1DE; --ref-neutral-variant-99: #FFFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #050505; --md-sys-color-surface-container-lowest: #060606; --md-sys-color-surface-container-low: #080808; --md-sys-color-surface-container: #0A0A0A; --md-sys-color-surface-container-high: #111111; --md-sys-color-surface-container-highest: #161616; --md-sys-color-surface-bright: #1A1A1A; --sz-color-blue-color: #2196F3; --sz-color-blue-on-color: #000000; --sz-color-blue-container: #003352; --sz-color-blue-on-container: #D8EFFF; --sz-color-gold-color: #FFEB3B; --sz-color-gold-on-color: #050505; --sz-color-gold-container: #333100; --sz-color-gold-on-container: #FFFDE7; --sz-color-green-color: #4CAF50; --sz-color-green-on-color: #050505; --sz-color-green-container: #00390B; --sz-color-green-on-container: #D5FFD6; --sz-color-red-color: #F44336; --sz-color-red-on-color: #000000; --sz-color-red-container: #690005; --sz-color-red-on-container: #FFDED9; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #F44336; --sz-identity-phase-2: #4CAF50; --sz-identity-phase-3: #2196F3; --sz-identity-phase-4: #FFEB3B; } @media (prefers-color-scheme: light) { :root:root[data-web-palette="gold"]:not([data-theme]) { color-scheme: light; --ambient-ceiling: color-mix(in srgb, #1565c0, transparent 88%); --ambient-wall: color-mix(in srgb, #1565c0, transparent 90%); --ambient-floor: color-mix(in srgb, #2e7d32, transparent 92%); --ambient-cove: color-mix(in srgb, #b77900, transparent 84%); --ambient-panel: rgba(255,255,255,0.70); --ambient-edge: color-mix(in srgb, #1565c0, transparent 78%); --ambient-shadow: color-mix(in srgb, #1565c0, transparent 84%); --bg: #FFFFFF; --surface: #F8FAFC; --elevated: #EEF2F7; --surface-dim: #F4F4F4; --surface-container-lowest: #FFFFFF; --surface-container-low: #FAFBFD; --surface-container: #F8FAFC; --surface-container-high: #EEF2F7; --surface-container-highest: #E8EDF3; --surface-bright: #FFFFFF; --scrim: rgba(0, 0, 0, 0.32); --md-sys-color-primary: var(--sz-color-gold-color); --md-sys-color-on-primary: var(--sz-color-gold-on-color); --md-sys-color-primary-container: var(--sz-color-gold-container); --md-sys-color-on-primary-container: var(--sz-color-gold-on-container); --md-sys-color-secondary: var(--sz-color-blue-color); --md-sys-color-on-secondary: var(--sz-color-blue-on-color); --md-sys-color-secondary-container: var(--sz-color-blue-container); --md-sys-color-on-secondary-container: var(--sz-color-blue-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #FFFFFF; --md-sys-color-on-background: #111827; --md-sys-color-surface: #F8FAFC; --md-sys-color-on-surface: #111827; --md-sys-color-surface-variant: #EEF2F7; --md-sys-color-on-surface-variant: #4B5563; --md-sys-color-outline: #6B7280; --md-sys-color-outline-variant: #D8DEE8; --md-sys-color-inverse-surface: #111827; --md-sys-color-inverse-on-surface: #FFFFFF; --md-sys-color-inverse-primary: var(--ref-primary-80); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.32); --ref-primary-0: #000000; --ref-primary-10: #291800; --ref-primary-20: #452B00; --ref-primary-30: #633F00; --ref-primary-40: #825500; --ref-primary-50: #A36B00; --ref-primary-60: #C48412; --ref-primary-70: #E29E30; --ref-primary-80: #FFB952; --ref-primary-90: #FFDDB3; --ref-primary-95: #FFEEDC; --ref-primary-99: #FFFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #001B3D; --ref-secondary-20: #003063; --ref-secondary-30: #00468C; --ref-secondary-40: #005DB7; --ref-secondary-50: #3277D2; --ref-secondary-60: #5191EE; --ref-secondary-70: #79ACFF; --ref-secondary-80: #A9C7FF; --ref-secondary-90: #D6E3FF; --ref-secondary-95: #ECF0FF; --ref-secondary-99: #FDFBFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #003909; --ref-tertiary-30: #005312; --ref-tertiary-40: #1B6D24; --ref-tertiary-50: #38873A; --ref-tertiary-60: #53A252; --ref-tertiary-70: #6DBD6A; --ref-tertiary-80: #88D982; --ref-tertiary-90: #A3F69C; --ref-tertiary-95: #C8FFBF; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410003; --ref-error-20: #680008; --ref-error-30: #930010; --ref-error-40: #BA1A20; --ref-error-50: #DD3735; --ref-error-60: #FF544E; --ref-error-70: #FF8980; --ref-error-80: #FFB3AC; --ref-error-90: #FFDAD6; --ref-error-95: #FFEDEB; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #191C20; --ref-neutral-20: #2E3036; --ref-neutral-30: #45474C; --ref-neutral-40: #5C5E64; --ref-neutral-50: #75777D; --ref-neutral-60: #8F9097; --ref-neutral-70: #AAABB1; --ref-neutral-80: #C5C6CD; --ref-neutral-90: #E2E2E9; --ref-neutral-95: #F0F0F7; --ref-neutral-99: #FDFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #181C22; --ref-neutral-variant-20: #2D3038; --ref-neutral-variant-30: #44474E; --ref-neutral-variant-40: #5B5E66; --ref-neutral-variant-50: #74777F; --ref-neutral-variant-60: #8E9099; --ref-neutral-variant-70: #A8ABB4; --ref-neutral-variant-80: #C4C6CF; --ref-neutral-variant-90: #E0E2EC; --ref-neutral-variant-95: #EEF0FA; --ref-neutral-variant-99: #FDFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #F4F4F4; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #FAFBFD; --md-sys-color-surface-container: #F8FAFC; --md-sys-color-surface-container-high: #EEF2F7; --md-sys-color-surface-container-highest: #E8EDF3; --md-sys-color-surface-bright: #FFFFFF; --sz-color-blue-color: #1565C0; --sz-color-blue-on-color: #FFFFFF; --sz-color-blue-container: #D3E4FF; --sz-color-blue-on-container: #001D35; --sz-color-gold-color: #92650A; --sz-color-gold-on-color: #FFFFFF; --sz-color-gold-container: #F9F1A6; --sz-color-gold-on-container: #1C1B00; --sz-color-green-color: #2E7D32; --sz-color-green-on-color: #FFFFFF; --sz-color-green-container: #D5FFD6; --sz-color-green-on-container: #002204; --sz-color-red-color: #D32F2F; --sz-color-red-on-color: #FFFFFF; --sz-color-red-container: #FFDED9; --sz-color-red-on-container: #410002; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #D32F2F; --sz-identity-phase-2: #2E7D32; --sz-identity-phase-3: #1565C0; --sz-identity-phase-4: #B77900; } } :root:root[data-web-palette="gold"][data-theme="dark"], [data-web-palette="gold"][data-theme][data-theme="dark"] { color-scheme: dark; --ambient-ceiling: color-mix(in srgb, #ffeb3b, transparent 84%); --ambient-wall: color-mix(in srgb, #2196f3, transparent 84%); --ambient-floor: color-mix(in srgb, #4caf50, transparent 88%); --ambient-cove: color-mix(in srgb, #ffeb3b, transparent 78%); --ambient-panel: color-mix(in srgb, #fffde7, transparent 92%); --ambient-edge: color-mix(in srgb, #ffeb3b, transparent 72%); --ambient-shadow: color-mix(in srgb, #2196f3, transparent 78%); --bg: #050505; --surface: #0A0A0A; --elevated: #111111; --surface-dim: #050505; --surface-container-lowest: #060606; --surface-container-low: #080808; --surface-container: #0A0A0A; --surface-container-high: #111111; --surface-container-highest: #161616; --surface-bright: #1A1A1A; --scrim: rgba(0, 0, 0, 0.48); --md-sys-color-primary: var(--sz-color-gold-color); --md-sys-color-on-primary: var(--sz-color-gold-on-color); --md-sys-color-primary-container: var(--sz-color-gold-container); --md-sys-color-on-primary-container: var(--sz-color-gold-on-container); --md-sys-color-secondary: var(--sz-color-blue-color); --md-sys-color-on-secondary: var(--sz-color-blue-on-color); --md-sys-color-secondary-container: var(--sz-color-blue-container); --md-sys-color-on-secondary-container: var(--sz-color-blue-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #050505; --md-sys-color-on-background: #F3F4F6; --md-sys-color-surface: #0A0A0A; --md-sys-color-on-surface: #FFFDE7; --md-sys-color-surface-variant: #111111; --md-sys-color-on-surface-variant: #9CA3AF; --md-sys-color-outline: #555555; --md-sys-color-outline-variant: #2A2A2A; --md-sys-color-inverse-surface: #F3F4F6; --md-sys-color-inverse-on-surface: #050505; --md-sys-color-inverse-primary: var(--ref-primary-40); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.48); --ref-primary-0: #000000; --ref-primary-10: #201C00; --ref-primary-20: #363100; --ref-primary-30: #4F4800; --ref-primary-40: #695F00; --ref-primary-50: #847800; --ref-primary-60: #A09200; --ref-primary-70: #BDAD00; --ref-primary-80: #DBC90A; --ref-primary-90: #F9E534; --ref-primary-95: #FFF39E; --ref-primary-99: #FFFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #001D36; --ref-secondary-20: #003258; --ref-secondary-30: #00497D; --ref-secondary-40: #0061A4; --ref-secondary-50: #007BCC; --ref-secondary-60: #1E95F2; --ref-secondary-70: #63B0FF; --ref-secondary-80: #9ECAFF; --ref-secondary-90: #D1E4FF; --ref-secondary-95: #EAF1FF; --ref-secondary-99: #FDFCFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #00390A; --ref-tertiary-30: #005313; --ref-tertiary-40: #006E1C; --ref-tertiary-50: #22892F; --ref-tertiary-60: #41A447; --ref-tertiary-70: #5DC05E; --ref-tertiary-80: #78DC77; --ref-tertiary-90: #94F990; --ref-tertiary-95: #C8FFC0; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410001; --ref-error-20: #690002; --ref-error-30: #930005; --ref-error-40: #BB1614; --ref-error-50: #E0342A; --ref-error-60: #FF5545; --ref-error-70: #FF8A7B; --ref-error-80: #FFB4A9; --ref-error-90: #FFDAD5; --ref-error-95: #FFEDEA; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #1D1C13; --ref-neutral-20: #323027; --ref-neutral-30: #49473D; --ref-neutral-40: #615E54; --ref-neutral-50: #7A776C; --ref-neutral-60: #949185; --ref-neutral-70: #AFAB9F; --ref-neutral-80: #CBC6B9; --ref-neutral-90: #E7E2D5; --ref-neutral-95: #F6F0E3; --ref-neutral-99: #FFFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #1E1C11; --ref-neutral-variant-20: #333124; --ref-neutral-variant-30: #4A473A; --ref-neutral-variant-40: #625F50; --ref-neutral-variant-50: #7B7768; --ref-neutral-variant-60: #959181; --ref-neutral-variant-70: #B0AB9A; --ref-neutral-variant-80: #CBC6B5; --ref-neutral-variant-90: #E8E2D0; --ref-neutral-variant-95: #F6F1DE; --ref-neutral-variant-99: #FFFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #050505; --md-sys-color-surface-container-lowest: #060606; --md-sys-color-surface-container-low: #080808; --md-sys-color-surface-container: #0A0A0A; --md-sys-color-surface-container-high: #111111; --md-sys-color-surface-container-highest: #161616; --md-sys-color-surface-bright: #1A1A1A; --sz-color-blue-color: #2196F3; --sz-color-blue-on-color: #000000; --sz-color-blue-container: #003352; --sz-color-blue-on-container: #D8EFFF; --sz-color-gold-color: #FFEB3B; --sz-color-gold-on-color: #050505; --sz-color-gold-container: #333100; --sz-color-gold-on-container: #FFFDE7; --sz-color-green-color: #4CAF50; --sz-color-green-on-color: #050505; --sz-color-green-container: #00390B; --sz-color-green-on-container: #D5FFD6; --sz-color-red-color: #F44336; --sz-color-red-on-color: #000000; --sz-color-red-container: #690005; --sz-color-red-on-container: #FFDED9; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #F44336; --sz-identity-phase-2: #4CAF50; --sz-identity-phase-3: #2196F3; --sz-identity-phase-4: #FFEB3B; } :root:root[data-web-palette="gold"][data-theme="light"], [data-web-palette="gold"][data-theme][data-theme="light"] { color-scheme: light; --ambient-ceiling: color-mix(in srgb, #1565c0, transparent 88%); --ambient-wall: color-mix(in srgb, #1565c0, transparent 90%); --ambient-floor: color-mix(in srgb, #2e7d32, transparent 92%); --ambient-cove: color-mix(in srgb, #b77900, transparent 84%); --ambient-panel: rgba(255,255,255,0.70); --ambient-edge: color-mix(in srgb, #1565c0, transparent 78%); --ambient-shadow: color-mix(in srgb, #1565c0, transparent 84%); --bg: #FFFFFF; --surface: #F8FAFC; --elevated: #EEF2F7; --surface-dim: #F4F4F4; --surface-container-lowest: #FFFFFF; --surface-container-low: #FAFBFD; --surface-container: #F8FAFC; --surface-container-high: #EEF2F7; --surface-container-highest: #E8EDF3; --surface-bright: #FFFFFF; --scrim: rgba(0, 0, 0, 0.32); --md-sys-color-primary: var(--sz-color-gold-color); --md-sys-color-on-primary: var(--sz-color-gold-on-color); --md-sys-color-primary-container: var(--sz-color-gold-container); --md-sys-color-on-primary-container: var(--sz-color-gold-on-container); --md-sys-color-secondary: var(--sz-color-blue-color); --md-sys-color-on-secondary: var(--sz-color-blue-on-color); --md-sys-color-secondary-container: var(--sz-color-blue-container); --md-sys-color-on-secondary-container: var(--sz-color-blue-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #FFFFFF; --md-sys-color-on-background: #111827; --md-sys-color-surface: #F8FAFC; --md-sys-color-on-surface: #111827; --md-sys-color-surface-variant: #EEF2F7; --md-sys-color-on-surface-variant: #4B5563; --md-sys-color-outline: #6B7280; --md-sys-color-outline-variant: #D8DEE8; --md-sys-color-inverse-surface: #111827; --md-sys-color-inverse-on-surface: #FFFFFF; --md-sys-color-inverse-primary: var(--ref-primary-80); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.32); --ref-primary-0: #000000; --ref-primary-10: #291800; --ref-primary-20: #452B00; --ref-primary-30: #633F00; --ref-primary-40: #825500; --ref-primary-50: #A36B00; --ref-primary-60: #C48412; --ref-primary-70: #E29E30; --ref-primary-80: #FFB952; --ref-primary-90: #FFDDB3; --ref-primary-95: #FFEEDC; --ref-primary-99: #FFFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #001B3D; --ref-secondary-20: #003063; --ref-secondary-30: #00468C; --ref-secondary-40: #005DB7; --ref-secondary-50: #3277D2; --ref-secondary-60: #5191EE; --ref-secondary-70: #79ACFF; --ref-secondary-80: #A9C7FF; --ref-secondary-90: #D6E3FF; --ref-secondary-95: #ECF0FF; --ref-secondary-99: #FDFBFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #003909; --ref-tertiary-30: #005312; --ref-tertiary-40: #1B6D24; --ref-tertiary-50: #38873A; --ref-tertiary-60: #53A252; --ref-tertiary-70: #6DBD6A; --ref-tertiary-80: #88D982; --ref-tertiary-90: #A3F69C; --ref-tertiary-95: #C8FFBF; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410003; --ref-error-20: #680008; --ref-error-30: #930010; --ref-error-40: #BA1A20; --ref-error-50: #DD3735; --ref-error-60: #FF544E; --ref-error-70: #FF8980; --ref-error-80: #FFB3AC; --ref-error-90: #FFDAD6; --ref-error-95: #FFEDEB; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #191C20; --ref-neutral-20: #2E3036; --ref-neutral-30: #45474C; --ref-neutral-40: #5C5E64; --ref-neutral-50: #75777D; --ref-neutral-60: #8F9097; --ref-neutral-70: #AAABB1; --ref-neutral-80: #C5C6CD; --ref-neutral-90: #E2E2E9; --ref-neutral-95: #F0F0F7; --ref-neutral-99: #FDFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #181C22; --ref-neutral-variant-20: #2D3038; --ref-neutral-variant-30: #44474E; --ref-neutral-variant-40: #5B5E66; --ref-neutral-variant-50: #74777F; --ref-neutral-variant-60: #8E9099; --ref-neutral-variant-70: #A8ABB4; --ref-neutral-variant-80: #C4C6CF; --ref-neutral-variant-90: #E0E2EC; --ref-neutral-variant-95: #EEF0FA; --ref-neutral-variant-99: #FDFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #F4F4F4; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #FAFBFD; --md-sys-color-surface-container: #F8FAFC; --md-sys-color-surface-container-high: #EEF2F7; --md-sys-color-surface-container-highest: #E8EDF3; --md-sys-color-surface-bright: #FFFFFF; --sz-color-blue-color: #1565C0; --sz-color-blue-on-color: #FFFFFF; --sz-color-blue-container: #D3E4FF; --sz-color-blue-on-container: #001D35; --sz-color-gold-color: #92650A; --sz-color-gold-on-color: #FFFFFF; --sz-color-gold-container: #F9F1A6; --sz-color-gold-on-container: #1C1B00; --sz-color-green-color: #2E7D32; --sz-color-green-on-color: #FFFFFF; --sz-color-green-container: #D5FFD6; --sz-color-green-on-container: #002204; --sz-color-red-color: #D32F2F; --sz-color-red-on-color: #FFFFFF; --sz-color-red-container: #FFDED9; --sz-color-red-on-container: #410002; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #D32F2F; --sz-identity-phase-2: #2E7D32; --sz-identity-phase-3: #1565C0; --sz-identity-phase-4: #B77900; } :root:root[data-web-palette="gold"][data-theme="true-tone"], [data-web-palette="gold"][data-theme][data-theme="true-tone"] { color-scheme: light; --ambient-ceiling: color-mix(in srgb, #2e7d32, transparent 88%); --ambient-wall: color-mix(in srgb, #2e7d32, transparent 90%); --ambient-floor: color-mix(in srgb, #1565c0, transparent 94%); --ambient-cove: color-mix(in srgb, #92650a, transparent 84%); --ambient-panel: rgba(255,253,247,0.66); --ambient-edge: color-mix(in srgb, #2e7d32, transparent 78%); --ambient-shadow: color-mix(in srgb, #2e7d32, transparent 84%); --bg: #FDFAF4; --surface: #FAF7F0; --elevated: #F2EDE3; --surface-dim: #F5F1E8; --surface-container-lowest: #FEFCF7; --surface-container-low: #FCF9F2; --surface-container: #FAF7F0; --surface-container-high: #F2EDE3; --surface-container-highest: #EBE5D8; --surface-bright: #FEFCF7; --scrim: rgba(0, 0, 0, 0.28); --md-sys-color-primary: var(--sz-color-gold-color); --md-sys-color-on-primary: var(--sz-color-gold-on-color); --md-sys-color-primary-container: var(--sz-color-gold-container); --md-sys-color-on-primary-container: var(--sz-color-gold-on-container); --md-sys-color-secondary: var(--sz-color-blue-color); --md-sys-color-on-secondary: var(--sz-color-blue-on-color); --md-sys-color-secondary-container: var(--sz-color-blue-container); --md-sys-color-on-secondary-container: var(--sz-color-blue-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #FDFAF4; --md-sys-color-on-background: #18160E; --md-sys-color-surface: #FAF7F0; --md-sys-color-on-surface: #18160E; --md-sys-color-surface-variant: #F2EDE3; --md-sys-color-on-surface-variant: #4A4438; --md-sys-color-outline: #7A7062; --md-sys-color-outline-variant: #D6CFBF; --md-sys-color-inverse-surface: #18160E; --md-sys-color-inverse-on-surface: #FDFAF4; --md-sys-color-inverse-primary: var(--ref-primary-80); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.28); --ref-primary-0: #000000; --ref-primary-10: #281800; --ref-primary-20: #432C00; --ref-primary-30: #604100; --ref-primary-40: #7F5600; --ref-primary-50: #9F6D00; --ref-primary-60: #BF8613; --ref-primary-70: #DDA031; --ref-primary-80: #FCBB4A; --ref-primary-90: #FFDEAE; --ref-primary-95: #FFEEDA; --ref-primary-99: #FFFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #001B3D; --ref-secondary-20: #003063; --ref-secondary-30: #00468C; --ref-secondary-40: #005DB7; --ref-secondary-50: #3277D2; --ref-secondary-60: #5191EE; --ref-secondary-70: #79ACFF; --ref-secondary-80: #A9C7FF; --ref-secondary-90: #D6E3FF; --ref-secondary-95: #ECF0FF; --ref-secondary-99: #FDFBFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #003909; --ref-tertiary-30: #005312; --ref-tertiary-40: #1B6D24; --ref-tertiary-50: #38873A; --ref-tertiary-60: #53A252; --ref-tertiary-70: #6DBD6A; --ref-tertiary-80: #88D982; --ref-tertiary-90: #A3F69C; --ref-tertiary-95: #C8FFBF; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410003; --ref-error-20: #680008; --ref-error-30: #930010; --ref-error-40: #BA1A20; --ref-error-50: #DD3735; --ref-error-60: #FF544E; --ref-error-70: #FF8980; --ref-error-80: #FFB3AC; --ref-error-90: #FFDAD6; --ref-error-95: #FFEDEB; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #191D17; --ref-neutral-20: #2D322C; --ref-neutral-30: #444841; --ref-neutral-40: #5B6059; --ref-neutral-50: #747871; --ref-neutral-60: #8E928A; --ref-neutral-70: #A9ACA4; --ref-neutral-80: #C4C8BF; --ref-neutral-90: #E0E4DB; --ref-neutral-95: #EFF2E9; --ref-neutral-99: #FAFDF4; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #171D16; --ref-neutral-variant-20: #2C322A; --ref-neutral-variant-30: #424940; --ref-neutral-variant-40: #5A6057; --ref-neutral-variant-50: #72796F; --ref-neutral-variant-60: #8C9388; --ref-neutral-variant-70: #A7ADA2; --ref-neutral-variant-80: #C2C9BD; --ref-neutral-variant-90: #DEE5D8; --ref-neutral-variant-95: #EDF3E6; --ref-neutral-variant-99: #F8FEF2; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #F5F1E8; --md-sys-color-surface-container-lowest: #FEFCF7; --md-sys-color-surface-container-low: #FCF9F2; --md-sys-color-surface-container: #FAF7F0; --md-sys-color-surface-container-high: #F2EDE3; --md-sys-color-surface-container-highest: #EBE5D8; --md-sys-color-surface-bright: #FEFCF7; --sz-color-blue-color: #1565C0; --sz-color-blue-on-color: #FFFFFF; --sz-color-blue-container: #D3E4FF; --sz-color-blue-on-container: #001D35; --sz-color-gold-color: #92650A; --sz-color-gold-on-color: #FFFFFF; --sz-color-gold-container: #F7F2E5; --sz-color-gold-on-container: #1C1B00; --sz-color-green-color: #2E7D32; --sz-color-green-on-color: #FFFFFF; --sz-color-green-container: #D5FFD6; --sz-color-green-on-container: #002204; --sz-color-red-color: #D32F2F; --sz-color-red-on-color: #FFFFFF; --sz-color-red-container: #FFDED9; --sz-color-red-on-container: #410002; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #D32F2F; --sz-identity-phase-2: #2E7D32; --sz-identity-phase-3: #1565C0; --sz-identity-phase-4: #92650A; } :root:root[data-web-palette="gold"][data-theme="dark-warm"], [data-web-palette="gold"][data-theme][data-theme="dark-warm"] { color-scheme: dark; --ambient-ceiling: color-mix(in srgb, #ffd54f, transparent 84%); --ambient-wall: color-mix(in srgb, #2196f3, transparent 84%); --ambient-floor: color-mix(in srgb, #4caf50, transparent 88%); --ambient-cove: color-mix(in srgb, #ffd54f, transparent 78%); --ambient-panel: color-mix(in srgb, #ffe89a, transparent 92%); --ambient-edge: color-mix(in srgb, #ffd54f, transparent 72%); --ambient-shadow: color-mix(in srgb, #2196f3, transparent 78%); --bg: #0A0705; --surface: #120D07; --elevated: #1B1209; --surface-dim: #0A0705; --surface-container-lowest: #0D0906; --surface-container-low: #100B07; --surface-container: #120D07; --surface-container-high: #1B1209; --surface-container-highest: #24180C; --surface-bright: #2D1E10; --md-sys-color-primary: var(--sz-color-gold-color); --md-sys-color-on-primary: var(--sz-color-gold-on-color); --md-sys-color-primary-container: var(--sz-color-gold-container); --md-sys-color-on-primary-container: var(--sz-color-gold-on-container); --md-sys-color-secondary: var(--sz-color-blue-color); --md-sys-color-on-secondary: var(--sz-color-blue-on-color); --md-sys-color-secondary-container: var(--sz-color-blue-container); --md-sys-color-on-secondary-container: var(--sz-color-blue-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #0A0705; --md-sys-color-on-background: #F3F4F6; --md-sys-color-surface: #120D07; --md-sys-color-on-surface: #F1E7D2; --md-sys-color-surface-variant: #111111; --md-sys-color-on-surface-variant: #B4A587; --md-sys-color-outline: #9D8E73; --md-sys-color-outline-variant: #322619; --md-sys-color-inverse-surface: #F1E7D2; --md-sys-color-inverse-on-surface: #24180C; --md-sys-color-inverse-primary: var(--ref-primary-40); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.48); --ref-primary-0: #000000; --ref-primary-10: #241A00; --ref-primary-20: #3C2F00; --ref-primary-30: #574500; --ref-primary-40: #735C00; --ref-primary-50: #917400; --ref-primary-60: #AF8D00; --ref-primary-70: #CDA721; --ref-primary-80: #EBC23E; --ref-primary-90: #FFE087; --ref-primary-95: #FFEFCC; --ref-primary-99: #FFFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #001D36; --ref-secondary-20: #003258; --ref-secondary-30: #00497D; --ref-secondary-40: #0061A4; --ref-secondary-50: #007BCC; --ref-secondary-60: #1E95F2; --ref-secondary-70: #63B0FF; --ref-secondary-80: #9ECAFF; --ref-secondary-90: #D1E4FF; --ref-secondary-95: #EAF1FF; --ref-secondary-99: #FDFCFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #00390A; --ref-tertiary-30: #005313; --ref-tertiary-40: #006E1C; --ref-tertiary-50: #22892F; --ref-tertiary-60: #41A447; --ref-tertiary-70: #5DC05E; --ref-tertiary-80: #78DC77; --ref-tertiary-90: #94F990; --ref-tertiary-95: #C8FFC0; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410001; --ref-error-20: #690002; --ref-error-30: #930005; --ref-error-40: #BB1614; --ref-error-50: #E0342A; --ref-error-60: #FF5545; --ref-error-70: #FF8A7B; --ref-error-80: #FFB4A9; --ref-error-90: #FFDAD5; --ref-error-95: #FFEDEA; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #1F1B13; --ref-neutral-20: #343027; --ref-neutral-30: #4B463C; --ref-neutral-40: #635E53; --ref-neutral-50: #7C766B; --ref-neutral-60: #969084; --ref-neutral-70: #B1AA9E; --ref-neutral-80: #CDC6B9; --ref-neutral-90: #EAE2D4; --ref-neutral-95: #F8F0E2; --ref-neutral-99: #FFFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #1F1B10; --ref-neutral-variant-20: #353024; --ref-neutral-variant-30: #4C4639; --ref-neutral-variant-40: #645E4F; --ref-neutral-variant-50: #7D7667; --ref-neutral-variant-60: #989080; --ref-neutral-variant-70: #B3AA99; --ref-neutral-variant-80: #CFC6B4; --ref-neutral-variant-90: #EBE1CF; --ref-neutral-variant-95: #FAF0DD; --ref-neutral-variant-99: #FFFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #0A0705; --md-sys-color-surface-container-lowest: #0D0906; --md-sys-color-surface-container-low: #100B07; --md-sys-color-surface-container: #120D07; --md-sys-color-surface-container-high: #1B1209; --md-sys-color-surface-container-highest: #24180C; --md-sys-color-surface-bright: #2D1E10; --sz-color-blue-color: #2196F3; --sz-color-blue-on-color: #000000; --sz-color-blue-container: #003352; --sz-color-blue-on-container: #D8EFFF; --sz-color-gold-color: #FFD54F; --sz-color-gold-on-color: #211B00; --sz-color-gold-container: #3C2F00; --sz-color-gold-on-container: #FFE89A; --sz-color-green-color: #4CAF50; --sz-color-green-on-color: #050505; --sz-color-green-container: #00390B; --sz-color-green-on-container: #D5FFD6; --sz-color-red-color: #F44336; --sz-color-red-on-color: #000000; --sz-color-red-container: #690005; --sz-color-red-on-container: #FFDED9; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #F44336; --sz-identity-phase-2: #4CAF50; --sz-identity-phase-3: #2196F3; --sz-identity-phase-4: #FFD54F; } :root:root[data-web-palette="gold"][data-surface="light"] { color-scheme: light; --ambient-ceiling: color-mix(in srgb, #1565c0, transparent 88%); --ambient-wall: color-mix(in srgb, #1565c0, transparent 90%); --ambient-floor: color-mix(in srgb, #2e7d32, transparent 92%); --ambient-cove: color-mix(in srgb, #b77900, transparent 84%); --ambient-panel: rgba(255,255,255,0.70); --ambient-edge: color-mix(in srgb, #1565c0, transparent 78%); --ambient-shadow: color-mix(in srgb, #1565c0, transparent 84%); --bg: #FFFFFF; --surface: #F8FAFC; --elevated: #EEF2F7; --surface-dim: #F4F4F4; --surface-container-lowest: #FFFFFF; --surface-container-low: #FAFBFD; --surface-container: #F8FAFC; --surface-container-high: #EEF2F7; --surface-container-highest: #E8EDF3; --surface-bright: #FFFFFF; --scrim: rgba(0, 0, 0, 0.32); --md-sys-color-primary: var(--sz-color-gold-color); --md-sys-color-on-primary: var(--sz-color-gold-on-color); --md-sys-color-primary-container: var(--sz-color-gold-container); --md-sys-color-on-primary-container: var(--sz-color-gold-on-container); --md-sys-color-secondary: var(--sz-color-blue-color); --md-sys-color-on-secondary: var(--sz-color-blue-on-color); --md-sys-color-secondary-container: var(--sz-color-blue-container); --md-sys-color-on-secondary-container: var(--sz-color-blue-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #FFFFFF; --md-sys-color-on-background: #111827; --md-sys-color-surface: #F8FAFC; --md-sys-color-on-surface: #111827; --md-sys-color-surface-variant: #EEF2F7; --md-sys-color-on-surface-variant: #4B5563; --md-sys-color-outline: #6B7280; --md-sys-color-outline-variant: #D8DEE8; --md-sys-color-inverse-surface: #111827; --md-sys-color-inverse-on-surface: #FFFFFF; --md-sys-color-inverse-primary: var(--ref-primary-80); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.32); --ref-primary-0: #000000; --ref-primary-10: #291800; --ref-primary-20: #452B00; --ref-primary-30: #633F00; --ref-primary-40: #825500; --ref-primary-50: #A36B00; --ref-primary-60: #C48412; --ref-primary-70: #E29E30; --ref-primary-80: #FFB952; --ref-primary-90: #FFDDB3; --ref-primary-95: #FFEEDC; --ref-primary-99: #FFFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #001B3D; --ref-secondary-20: #003063; --ref-secondary-30: #00468C; --ref-secondary-40: #005DB7; --ref-secondary-50: #3277D2; --ref-secondary-60: #5191EE; --ref-secondary-70: #79ACFF; --ref-secondary-80: #A9C7FF; --ref-secondary-90: #D6E3FF; --ref-secondary-95: #ECF0FF; --ref-secondary-99: #FDFBFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #003909; --ref-tertiary-30: #005312; --ref-tertiary-40: #1B6D24; --ref-tertiary-50: #38873A; --ref-tertiary-60: #53A252; --ref-tertiary-70: #6DBD6A; --ref-tertiary-80: #88D982; --ref-tertiary-90: #A3F69C; --ref-tertiary-95: #C8FFBF; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410003; --ref-error-20: #680008; --ref-error-30: #930010; --ref-error-40: #BA1A20; --ref-error-50: #DD3735; --ref-error-60: #FF544E; --ref-error-70: #FF8980; --ref-error-80: #FFB3AC; --ref-error-90: #FFDAD6; --ref-error-95: #FFEDEB; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #191C20; --ref-neutral-20: #2E3036; --ref-neutral-30: #45474C; --ref-neutral-40: #5C5E64; --ref-neutral-50: #75777D; --ref-neutral-60: #8F9097; --ref-neutral-70: #AAABB1; --ref-neutral-80: #C5C6CD; --ref-neutral-90: #E2E2E9; --ref-neutral-95: #F0F0F7; --ref-neutral-99: #FDFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #181C22; --ref-neutral-variant-20: #2D3038; --ref-neutral-variant-30: #44474E; --ref-neutral-variant-40: #5B5E66; --ref-neutral-variant-50: #74777F; --ref-neutral-variant-60: #8E9099; --ref-neutral-variant-70: #A8ABB4; --ref-neutral-variant-80: #C4C6CF; --ref-neutral-variant-90: #E0E2EC; --ref-neutral-variant-95: #EEF0FA; --ref-neutral-variant-99: #FDFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #F4F4F4; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #FAFBFD; --md-sys-color-surface-container: #F8FAFC; --md-sys-color-surface-container-high: #EEF2F7; --md-sys-color-surface-container-highest: #E8EDF3; --md-sys-color-surface-bright: #FFFFFF; --sz-color-blue-color: #1565C0; --sz-color-blue-on-color: #FFFFFF; --sz-color-blue-container: #D3E4FF; --sz-color-blue-on-container: #001D35; --sz-color-gold-color: #92650A; --sz-color-gold-on-color: #FFFFFF; --sz-color-gold-container: #F9F1A6; --sz-color-gold-on-container: #1C1B00; --sz-color-green-color: #2E7D32; --sz-color-green-on-color: #FFFFFF; --sz-color-green-container: #D5FFD6; --sz-color-green-on-container: #002204; --sz-color-red-color: #D32F2F; --sz-color-red-on-color: #FFFFFF; --sz-color-red-container: #FFDED9; --sz-color-red-on-container: #410002; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #D32F2F; --sz-identity-phase-2: #2E7D32; --sz-identity-phase-3: #1565C0; --sz-identity-phase-4: #B77900; } :root:root[data-web-palette="gold"][data-surface="dark"] { color-scheme: dark; --ambient-ceiling: color-mix(in srgb, #ffeb3b, transparent 84%); --ambient-wall: color-mix(in srgb, #2196f3, transparent 84%); --ambient-floor: color-mix(in srgb, #4caf50, transparent 88%); --ambient-cove: color-mix(in srgb, #ffeb3b, transparent 78%); --ambient-panel: color-mix(in srgb, #fffde7, transparent 92%); --ambient-edge: color-mix(in srgb, #ffeb3b, transparent 72%); --ambient-shadow: color-mix(in srgb, #2196f3, transparent 78%); --bg: #050505; --surface: #0A0A0A; --elevated: #111111; --surface-dim: #050505; --surface-container-lowest: #060606; --surface-container-low: #080808; --surface-container: #0A0A0A; --surface-container-high: #111111; --surface-container-highest: #161616; --surface-bright: #1A1A1A; --scrim: rgba(0, 0, 0, 0.48); --md-sys-color-primary: var(--sz-color-gold-color); --md-sys-color-on-primary: var(--sz-color-gold-on-color); --md-sys-color-primary-container: var(--sz-color-gold-container); --md-sys-color-on-primary-container: var(--sz-color-gold-on-container); --md-sys-color-secondary: var(--sz-color-blue-color); --md-sys-color-on-secondary: var(--sz-color-blue-on-color); --md-sys-color-secondary-container: var(--sz-color-blue-container); --md-sys-color-on-secondary-container: var(--sz-color-blue-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #050505; --md-sys-color-on-background: #F3F4F6; --md-sys-color-surface: #0A0A0A; --md-sys-color-on-surface: #FFFDE7; --md-sys-color-surface-variant: #111111; --md-sys-color-on-surface-variant: #9CA3AF; --md-sys-color-outline: #555555; --md-sys-color-outline-variant: #2A2A2A; --md-sys-color-inverse-surface: #F3F4F6; --md-sys-color-inverse-on-surface: #050505; --md-sys-color-inverse-primary: var(--ref-primary-40); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.48); --ref-primary-0: #000000; --ref-primary-10: #201C00; --ref-primary-20: #363100; --ref-primary-30: #4F4800; --ref-primary-40: #695F00; --ref-primary-50: #847800; --ref-primary-60: #A09200; --ref-primary-70: #BDAD00; --ref-primary-80: #DBC90A; --ref-primary-90: #F9E534; --ref-primary-95: #FFF39E; --ref-primary-99: #FFFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #001D36; --ref-secondary-20: #003258; --ref-secondary-30: #00497D; --ref-secondary-40: #0061A4; --ref-secondary-50: #007BCC; --ref-secondary-60: #1E95F2; --ref-secondary-70: #63B0FF; --ref-secondary-80: #9ECAFF; --ref-secondary-90: #D1E4FF; --ref-secondary-95: #EAF1FF; --ref-secondary-99: #FDFCFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #00390A; --ref-tertiary-30: #005313; --ref-tertiary-40: #006E1C; --ref-tertiary-50: #22892F; --ref-tertiary-60: #41A447; --ref-tertiary-70: #5DC05E; --ref-tertiary-80: #78DC77; --ref-tertiary-90: #94F990; --ref-tertiary-95: #C8FFC0; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410001; --ref-error-20: #690002; --ref-error-30: #930005; --ref-error-40: #BB1614; --ref-error-50: #E0342A; --ref-error-60: #FF5545; --ref-error-70: #FF8A7B; --ref-error-80: #FFB4A9; --ref-error-90: #FFDAD5; --ref-error-95: #FFEDEA; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #1D1C13; --ref-neutral-20: #323027; --ref-neutral-30: #49473D; --ref-neutral-40: #615E54; --ref-neutral-50: #7A776C; --ref-neutral-60: #949185; --ref-neutral-70: #AFAB9F; --ref-neutral-80: #CBC6B9; --ref-neutral-90: #E7E2D5; --ref-neutral-95: #F6F0E3; --ref-neutral-99: #FFFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #1E1C11; --ref-neutral-variant-20: #333124; --ref-neutral-variant-30: #4A473A; --ref-neutral-variant-40: #625F50; --ref-neutral-variant-50: #7B7768; --ref-neutral-variant-60: #959181; --ref-neutral-variant-70: #B0AB9A; --ref-neutral-variant-80: #CBC6B5; --ref-neutral-variant-90: #E8E2D0; --ref-neutral-variant-95: #F6F1DE; --ref-neutral-variant-99: #FFFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #050505; --md-sys-color-surface-container-lowest: #060606; --md-sys-color-surface-container-low: #080808; --md-sys-color-surface-container: #0A0A0A; --md-sys-color-surface-container-high: #111111; --md-sys-color-surface-container-highest: #161616; --md-sys-color-surface-bright: #1A1A1A; --sz-color-blue-color: #2196F3; --sz-color-blue-on-color: #000000; --sz-color-blue-container: #003352; --sz-color-blue-on-container: #D8EFFF; --sz-color-gold-color: #FFEB3B; --sz-color-gold-on-color: #050505; --sz-color-gold-container: #333100; --sz-color-gold-on-container: #FFFDE7; --sz-color-green-color: #4CAF50; --sz-color-green-on-color: #050505; --sz-color-green-container: #00390B; --sz-color-green-on-container: #D5FFD6; --sz-color-red-color: #F44336; --sz-color-red-on-color: #000000; --sz-color-red-container: #690005; --sz-color-red-on-container: #FFDED9; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #F44336; --sz-identity-phase-2: #4CAF50; --sz-identity-phase-3: #2196F3; --sz-identity-phase-4: #FFEB3B; } :root:root[data-web-palette="blue"]:not([data-theme]) { color-scheme: dark; --ambient-ceiling: color-mix(in srgb, #ffeb3b, transparent 84%); --ambient-wall: color-mix(in srgb, #2196f3, transparent 84%); --ambient-floor: color-mix(in srgb, #4caf50, transparent 88%); --ambient-cove: color-mix(in srgb, #ffeb3b, transparent 78%); --ambient-panel: color-mix(in srgb, #fffde7, transparent 92%); --ambient-edge: color-mix(in srgb, #ffeb3b, transparent 72%); --ambient-shadow: color-mix(in srgb, #2196f3, transparent 78%); --bg: #050505; --surface: #0A0A0A; --elevated: #111111; --surface-dim: #050505; --surface-container-lowest: #060606; --surface-container-low: #080808; --surface-container: #0A0A0A; --surface-container-high: #111111; --surface-container-highest: #161616; --surface-bright: #1A1A1A; --scrim: rgba(0, 0, 0, 0.48); --md-sys-color-primary: var(--sz-color-blue-color); --md-sys-color-on-primary: var(--sz-color-blue-on-color); --md-sys-color-primary-container: var(--sz-color-blue-container); --md-sys-color-on-primary-container: var(--sz-color-blue-on-container); --md-sys-color-secondary: var(--sz-color-gold-color); --md-sys-color-on-secondary: var(--sz-color-gold-on-color); --md-sys-color-secondary-container: var(--sz-color-gold-container); --md-sys-color-on-secondary-container: var(--sz-color-gold-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #050505; --md-sys-color-on-background: #F3F4F6; --md-sys-color-surface: #0A0A0A; --md-sys-color-on-surface: #FFFDE7; --md-sys-color-surface-variant: #111111; --md-sys-color-on-surface-variant: #9CA3AF; --md-sys-color-outline: #555555; --md-sys-color-outline-variant: #2A2A2A; --md-sys-color-inverse-surface: #F3F4F6; --md-sys-color-inverse-on-surface: #050505; --md-sys-color-inverse-primary: var(--ref-primary-40); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.48); --ref-primary-0: #000000; --ref-primary-10: #001D36; --ref-primary-20: #003258; --ref-primary-30: #00497D; --ref-primary-40: #0061A4; --ref-primary-50: #007BCC; --ref-primary-60: #1E95F2; --ref-primary-70: #63B0FF; --ref-primary-80: #9ECAFF; --ref-primary-90: #D1E4FF; --ref-primary-95: #EAF1FF; --ref-primary-99: #FDFCFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #201C00; --ref-secondary-20: #363100; --ref-secondary-30: #4F4800; --ref-secondary-40: #695F00; --ref-secondary-50: #847800; --ref-secondary-60: #A09200; --ref-secondary-70: #BDAD00; --ref-secondary-80: #DBC90A; --ref-secondary-90: #F9E534; --ref-secondary-95: #FFF39E; --ref-secondary-99: #FFFBFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #00390A; --ref-tertiary-30: #005313; --ref-tertiary-40: #006E1C; --ref-tertiary-50: #22892F; --ref-tertiary-60: #41A447; --ref-tertiary-70: #5DC05E; --ref-tertiary-80: #78DC77; --ref-tertiary-90: #94F990; --ref-tertiary-95: #C8FFC0; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410001; --ref-error-20: #690002; --ref-error-30: #930005; --ref-error-40: #BB1614; --ref-error-50: #E0342A; --ref-error-60: #FF5545; --ref-error-70: #FF8A7B; --ref-error-80: #FFB4A9; --ref-error-90: #FFDAD5; --ref-error-95: #FFEDEA; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #1D1C13; --ref-neutral-20: #323027; --ref-neutral-30: #49473D; --ref-neutral-40: #615E54; --ref-neutral-50: #7A776C; --ref-neutral-60: #949185; --ref-neutral-70: #AFAB9F; --ref-neutral-80: #CBC6B9; --ref-neutral-90: #E7E2D5; --ref-neutral-95: #F6F0E3; --ref-neutral-99: #FFFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #1E1C11; --ref-neutral-variant-20: #333124; --ref-neutral-variant-30: #4A473A; --ref-neutral-variant-40: #625F50; --ref-neutral-variant-50: #7B7768; --ref-neutral-variant-60: #959181; --ref-neutral-variant-70: #B0AB9A; --ref-neutral-variant-80: #CBC6B5; --ref-neutral-variant-90: #E8E2D0; --ref-neutral-variant-95: #F6F1DE; --ref-neutral-variant-99: #FFFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #050505; --md-sys-color-surface-container-lowest: #060606; --md-sys-color-surface-container-low: #080808; --md-sys-color-surface-container: #0A0A0A; --md-sys-color-surface-container-high: #111111; --md-sys-color-surface-container-highest: #161616; --md-sys-color-surface-bright: #1A1A1A; --sz-color-blue-color: #2196F3; --sz-color-blue-on-color: #000000; --sz-color-blue-container: #003352; --sz-color-blue-on-container: #D8EFFF; --sz-color-gold-color: #FFEB3B; --sz-color-gold-on-color: #050505; --sz-color-gold-container: #333100; --sz-color-gold-on-container: #FFFDE7; --sz-color-green-color: #4CAF50; --sz-color-green-on-color: #050505; --sz-color-green-container: #00390B; --sz-color-green-on-container: #D5FFD6; --sz-color-red-color: #F44336; --sz-color-red-on-color: #000000; --sz-color-red-container: #690005; --sz-color-red-on-container: #FFDED9; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #F44336; --sz-identity-phase-2: #4CAF50; --sz-identity-phase-3: #2196F3; --sz-identity-phase-4: #FFEB3B; } @media (prefers-color-scheme: light) { :root:root[data-web-palette="blue"]:not([data-theme]) { color-scheme: light; --ambient-ceiling: color-mix(in srgb, #1565c0, transparent 88%); --ambient-wall: color-mix(in srgb, #1565c0, transparent 90%); --ambient-floor: color-mix(in srgb, #2e7d32, transparent 92%); --ambient-cove: color-mix(in srgb, #b77900, transparent 84%); --ambient-panel: rgba(255,255,255,0.70); --ambient-edge: color-mix(in srgb, #1565c0, transparent 78%); --ambient-shadow: color-mix(in srgb, #1565c0, transparent 84%); --bg: #FFFFFF; --surface: #F8FAFC; --elevated: #EEF2F7; --surface-dim: #F4F4F4; --surface-container-lowest: #FFFFFF; --surface-container-low: #FAFBFD; --surface-container: #F8FAFC; --surface-container-high: #EEF2F7; --surface-container-highest: #E8EDF3; --surface-bright: #FFFFFF; --scrim: rgba(0, 0, 0, 0.32); --md-sys-color-primary: var(--sz-color-blue-color); --md-sys-color-on-primary: var(--sz-color-blue-on-color); --md-sys-color-primary-container: var(--sz-color-blue-container); --md-sys-color-on-primary-container: var(--sz-color-blue-on-container); --md-sys-color-secondary: var(--sz-color-gold-color); --md-sys-color-on-secondary: var(--sz-color-gold-on-color); --md-sys-color-secondary-container: var(--sz-color-gold-container); --md-sys-color-on-secondary-container: var(--sz-color-gold-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #FFFFFF; --md-sys-color-on-background: #111827; --md-sys-color-surface: #F8FAFC; --md-sys-color-on-surface: #111827; --md-sys-color-surface-variant: #EEF2F7; --md-sys-color-on-surface-variant: #4B5563; --md-sys-color-outline: #6B7280; --md-sys-color-outline-variant: #D8DEE8; --md-sys-color-inverse-surface: #111827; --md-sys-color-inverse-on-surface: #FFFFFF; --md-sys-color-inverse-primary: var(--ref-primary-80); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.32); --ref-primary-0: #000000; --ref-primary-10: #001B3D; --ref-primary-20: #003063; --ref-primary-30: #00468C; --ref-primary-40: #005DB7; --ref-primary-50: #3277D2; --ref-primary-60: #5191EE; --ref-primary-70: #79ACFF; --ref-primary-80: #A9C7FF; --ref-primary-90: #D6E3FF; --ref-primary-95: #ECF0FF; --ref-primary-99: #FDFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #291800; --ref-secondary-20: #452B00; --ref-secondary-30: #633F00; --ref-secondary-40: #825500; --ref-secondary-50: #A36B00; --ref-secondary-60: #C48412; --ref-secondary-70: #E29E30; --ref-secondary-80: #FFB952; --ref-secondary-90: #FFDDB3; --ref-secondary-95: #FFEEDC; --ref-secondary-99: #FFFBFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #003909; --ref-tertiary-30: #005312; --ref-tertiary-40: #1B6D24; --ref-tertiary-50: #38873A; --ref-tertiary-60: #53A252; --ref-tertiary-70: #6DBD6A; --ref-tertiary-80: #88D982; --ref-tertiary-90: #A3F69C; --ref-tertiary-95: #C8FFBF; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410003; --ref-error-20: #680008; --ref-error-30: #930010; --ref-error-40: #BA1A20; --ref-error-50: #DD3735; --ref-error-60: #FF544E; --ref-error-70: #FF8980; --ref-error-80: #FFB3AC; --ref-error-90: #FFDAD6; --ref-error-95: #FFEDEB; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #191C20; --ref-neutral-20: #2E3036; --ref-neutral-30: #45474C; --ref-neutral-40: #5C5E64; --ref-neutral-50: #75777D; --ref-neutral-60: #8F9097; --ref-neutral-70: #AAABB1; --ref-neutral-80: #C5C6CD; --ref-neutral-90: #E2E2E9; --ref-neutral-95: #F0F0F7; --ref-neutral-99: #FDFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #181C22; --ref-neutral-variant-20: #2D3038; --ref-neutral-variant-30: #44474E; --ref-neutral-variant-40: #5B5E66; --ref-neutral-variant-50: #74777F; --ref-neutral-variant-60: #8E9099; --ref-neutral-variant-70: #A8ABB4; --ref-neutral-variant-80: #C4C6CF; --ref-neutral-variant-90: #E0E2EC; --ref-neutral-variant-95: #EEF0FA; --ref-neutral-variant-99: #FDFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #F4F4F4; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #FAFBFD; --md-sys-color-surface-container: #F8FAFC; --md-sys-color-surface-container-high: #EEF2F7; --md-sys-color-surface-container-highest: #E8EDF3; --md-sys-color-surface-bright: #FFFFFF; --sz-color-blue-color: #1565C0; --sz-color-blue-on-color: #FFFFFF; --sz-color-blue-container: #D3E4FF; --sz-color-blue-on-container: #001D35; --sz-color-gold-color: #92650A; --sz-color-gold-on-color: #FFFFFF; --sz-color-gold-container: #F9F1A6; --sz-color-gold-on-container: #1C1B00; --sz-color-green-color: #2E7D32; --sz-color-green-on-color: #FFFFFF; --sz-color-green-container: #D5FFD6; --sz-color-green-on-container: #002204; --sz-color-red-color: #D32F2F; --sz-color-red-on-color: #FFFFFF; --sz-color-red-container: #FFDED9; --sz-color-red-on-container: #410002; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #D32F2F; --sz-identity-phase-2: #2E7D32; --sz-identity-phase-3: #1565C0; --sz-identity-phase-4: #B77900; } } :root:root[data-web-palette="blue"][data-theme="dark"], [data-web-palette="blue"][data-theme][data-theme="dark"] { color-scheme: dark; --ambient-ceiling: color-mix(in srgb, #ffeb3b, transparent 84%); --ambient-wall: color-mix(in srgb, #2196f3, transparent 84%); --ambient-floor: color-mix(in srgb, #4caf50, transparent 88%); --ambient-cove: color-mix(in srgb, #ffeb3b, transparent 78%); --ambient-panel: color-mix(in srgb, #fffde7, transparent 92%); --ambient-edge: color-mix(in srgb, #ffeb3b, transparent 72%); --ambient-shadow: color-mix(in srgb, #2196f3, transparent 78%); --bg: #050505; --surface: #0A0A0A; --elevated: #111111; --surface-dim: #050505; --surface-container-lowest: #060606; --surface-container-low: #080808; --surface-container: #0A0A0A; --surface-container-high: #111111; --surface-container-highest: #161616; --surface-bright: #1A1A1A; --scrim: rgba(0, 0, 0, 0.48); --md-sys-color-primary: var(--sz-color-blue-color); --md-sys-color-on-primary: var(--sz-color-blue-on-color); --md-sys-color-primary-container: var(--sz-color-blue-container); --md-sys-color-on-primary-container: var(--sz-color-blue-on-container); --md-sys-color-secondary: var(--sz-color-gold-color); --md-sys-color-on-secondary: var(--sz-color-gold-on-color); --md-sys-color-secondary-container: var(--sz-color-gold-container); --md-sys-color-on-secondary-container: var(--sz-color-gold-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #050505; --md-sys-color-on-background: #F3F4F6; --md-sys-color-surface: #0A0A0A; --md-sys-color-on-surface: #FFFDE7; --md-sys-color-surface-variant: #111111; --md-sys-color-on-surface-variant: #9CA3AF; --md-sys-color-outline: #555555; --md-sys-color-outline-variant: #2A2A2A; --md-sys-color-inverse-surface: #F3F4F6; --md-sys-color-inverse-on-surface: #050505; --md-sys-color-inverse-primary: var(--ref-primary-40); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.48); --ref-primary-0: #000000; --ref-primary-10: #001D36; --ref-primary-20: #003258; --ref-primary-30: #00497D; --ref-primary-40: #0061A4; --ref-primary-50: #007BCC; --ref-primary-60: #1E95F2; --ref-primary-70: #63B0FF; --ref-primary-80: #9ECAFF; --ref-primary-90: #D1E4FF; --ref-primary-95: #EAF1FF; --ref-primary-99: #FDFCFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #201C00; --ref-secondary-20: #363100; --ref-secondary-30: #4F4800; --ref-secondary-40: #695F00; --ref-secondary-50: #847800; --ref-secondary-60: #A09200; --ref-secondary-70: #BDAD00; --ref-secondary-80: #DBC90A; --ref-secondary-90: #F9E534; --ref-secondary-95: #FFF39E; --ref-secondary-99: #FFFBFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #00390A; --ref-tertiary-30: #005313; --ref-tertiary-40: #006E1C; --ref-tertiary-50: #22892F; --ref-tertiary-60: #41A447; --ref-tertiary-70: #5DC05E; --ref-tertiary-80: #78DC77; --ref-tertiary-90: #94F990; --ref-tertiary-95: #C8FFC0; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410001; --ref-error-20: #690002; --ref-error-30: #930005; --ref-error-40: #BB1614; --ref-error-50: #E0342A; --ref-error-60: #FF5545; --ref-error-70: #FF8A7B; --ref-error-80: #FFB4A9; --ref-error-90: #FFDAD5; --ref-error-95: #FFEDEA; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #1D1C13; --ref-neutral-20: #323027; --ref-neutral-30: #49473D; --ref-neutral-40: #615E54; --ref-neutral-50: #7A776C; --ref-neutral-60: #949185; --ref-neutral-70: #AFAB9F; --ref-neutral-80: #CBC6B9; --ref-neutral-90: #E7E2D5; --ref-neutral-95: #F6F0E3; --ref-neutral-99: #FFFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #1E1C11; --ref-neutral-variant-20: #333124; --ref-neutral-variant-30: #4A473A; --ref-neutral-variant-40: #625F50; --ref-neutral-variant-50: #7B7768; --ref-neutral-variant-60: #959181; --ref-neutral-variant-70: #B0AB9A; --ref-neutral-variant-80: #CBC6B5; --ref-neutral-variant-90: #E8E2D0; --ref-neutral-variant-95: #F6F1DE; --ref-neutral-variant-99: #FFFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #050505; --md-sys-color-surface-container-lowest: #060606; --md-sys-color-surface-container-low: #080808; --md-sys-color-surface-container: #0A0A0A; --md-sys-color-surface-container-high: #111111; --md-sys-color-surface-container-highest: #161616; --md-sys-color-surface-bright: #1A1A1A; --sz-color-blue-color: #2196F3; --sz-color-blue-on-color: #000000; --sz-color-blue-container: #003352; --sz-color-blue-on-container: #D8EFFF; --sz-color-gold-color: #FFEB3B; --sz-color-gold-on-color: #050505; --sz-color-gold-container: #333100; --sz-color-gold-on-container: #FFFDE7; --sz-color-green-color: #4CAF50; --sz-color-green-on-color: #050505; --sz-color-green-container: #00390B; --sz-color-green-on-container: #D5FFD6; --sz-color-red-color: #F44336; --sz-color-red-on-color: #000000; --sz-color-red-container: #690005; --sz-color-red-on-container: #FFDED9; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #F44336; --sz-identity-phase-2: #4CAF50; --sz-identity-phase-3: #2196F3; --sz-identity-phase-4: #FFEB3B; } :root:root[data-web-palette="blue"][data-theme="light"], [data-web-palette="blue"][data-theme][data-theme="light"] { color-scheme: light; --ambient-ceiling: color-mix(in srgb, #1565c0, transparent 88%); --ambient-wall: color-mix(in srgb, #1565c0, transparent 90%); --ambient-floor: color-mix(in srgb, #2e7d32, transparent 92%); --ambient-cove: color-mix(in srgb, #b77900, transparent 84%); --ambient-panel: rgba(255,255,255,0.70); --ambient-edge: color-mix(in srgb, #1565c0, transparent 78%); --ambient-shadow: color-mix(in srgb, #1565c0, transparent 84%); --bg: #FFFFFF; --surface: #F8FAFC; --elevated: #EEF2F7; --surface-dim: #F4F4F4; --surface-container-lowest: #FFFFFF; --surface-container-low: #FAFBFD; --surface-container: #F8FAFC; --surface-container-high: #EEF2F7; --surface-container-highest: #E8EDF3; --surface-bright: #FFFFFF; --scrim: rgba(0, 0, 0, 0.32); --md-sys-color-primary: var(--sz-color-blue-color); --md-sys-color-on-primary: var(--sz-color-blue-on-color); --md-sys-color-primary-container: var(--sz-color-blue-container); --md-sys-color-on-primary-container: var(--sz-color-blue-on-container); --md-sys-color-secondary: var(--sz-color-gold-color); --md-sys-color-on-secondary: var(--sz-color-gold-on-color); --md-sys-color-secondary-container: var(--sz-color-gold-container); --md-sys-color-on-secondary-container: var(--sz-color-gold-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #FFFFFF; --md-sys-color-on-background: #111827; --md-sys-color-surface: #F8FAFC; --md-sys-color-on-surface: #111827; --md-sys-color-surface-variant: #EEF2F7; --md-sys-color-on-surface-variant: #4B5563; --md-sys-color-outline: #6B7280; --md-sys-color-outline-variant: #D8DEE8; --md-sys-color-inverse-surface: #111827; --md-sys-color-inverse-on-surface: #FFFFFF; --md-sys-color-inverse-primary: var(--ref-primary-80); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.32); --ref-primary-0: #000000; --ref-primary-10: #001B3D; --ref-primary-20: #003063; --ref-primary-30: #00468C; --ref-primary-40: #005DB7; --ref-primary-50: #3277D2; --ref-primary-60: #5191EE; --ref-primary-70: #79ACFF; --ref-primary-80: #A9C7FF; --ref-primary-90: #D6E3FF; --ref-primary-95: #ECF0FF; --ref-primary-99: #FDFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #291800; --ref-secondary-20: #452B00; --ref-secondary-30: #633F00; --ref-secondary-40: #825500; --ref-secondary-50: #A36B00; --ref-secondary-60: #C48412; --ref-secondary-70: #E29E30; --ref-secondary-80: #FFB952; --ref-secondary-90: #FFDDB3; --ref-secondary-95: #FFEEDC; --ref-secondary-99: #FFFBFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #003909; --ref-tertiary-30: #005312; --ref-tertiary-40: #1B6D24; --ref-tertiary-50: #38873A; --ref-tertiary-60: #53A252; --ref-tertiary-70: #6DBD6A; --ref-tertiary-80: #88D982; --ref-tertiary-90: #A3F69C; --ref-tertiary-95: #C8FFBF; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410003; --ref-error-20: #680008; --ref-error-30: #930010; --ref-error-40: #BA1A20; --ref-error-50: #DD3735; --ref-error-60: #FF544E; --ref-error-70: #FF8980; --ref-error-80: #FFB3AC; --ref-error-90: #FFDAD6; --ref-error-95: #FFEDEB; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #191C20; --ref-neutral-20: #2E3036; --ref-neutral-30: #45474C; --ref-neutral-40: #5C5E64; --ref-neutral-50: #75777D; --ref-neutral-60: #8F9097; --ref-neutral-70: #AAABB1; --ref-neutral-80: #C5C6CD; --ref-neutral-90: #E2E2E9; --ref-neutral-95: #F0F0F7; --ref-neutral-99: #FDFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #181C22; --ref-neutral-variant-20: #2D3038; --ref-neutral-variant-30: #44474E; --ref-neutral-variant-40: #5B5E66; --ref-neutral-variant-50: #74777F; --ref-neutral-variant-60: #8E9099; --ref-neutral-variant-70: #A8ABB4; --ref-neutral-variant-80: #C4C6CF; --ref-neutral-variant-90: #E0E2EC; --ref-neutral-variant-95: #EEF0FA; --ref-neutral-variant-99: #FDFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #F4F4F4; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #FAFBFD; --md-sys-color-surface-container: #F8FAFC; --md-sys-color-surface-container-high: #EEF2F7; --md-sys-color-surface-container-highest: #E8EDF3; --md-sys-color-surface-bright: #FFFFFF; --sz-color-blue-color: #1565C0; --sz-color-blue-on-color: #FFFFFF; --sz-color-blue-container: #D3E4FF; --sz-color-blue-on-container: #001D35; --sz-color-gold-color: #92650A; --sz-color-gold-on-color: #FFFFFF; --sz-color-gold-container: #F9F1A6; --sz-color-gold-on-container: #1C1B00; --sz-color-green-color: #2E7D32; --sz-color-green-on-color: #FFFFFF; --sz-color-green-container: #D5FFD6; --sz-color-green-on-container: #002204; --sz-color-red-color: #D32F2F; --sz-color-red-on-color: #FFFFFF; --sz-color-red-container: #FFDED9; --sz-color-red-on-container: #410002; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #D32F2F; --sz-identity-phase-2: #2E7D32; --sz-identity-phase-3: #1565C0; --sz-identity-phase-4: #B77900; } :root:root[data-web-palette="blue"][data-theme="true-tone"], [data-web-palette="blue"][data-theme][data-theme="true-tone"] { color-scheme: light; --ambient-ceiling: color-mix(in srgb, #2e7d32, transparent 88%); --ambient-wall: color-mix(in srgb, #2e7d32, transparent 90%); --ambient-floor: color-mix(in srgb, #1565c0, transparent 94%); --ambient-cove: color-mix(in srgb, #92650a, transparent 84%); --ambient-panel: rgba(255,253,247,0.66); --ambient-edge: color-mix(in srgb, #2e7d32, transparent 78%); --ambient-shadow: color-mix(in srgb, #2e7d32, transparent 84%); --bg: #FDFAF4; --surface: #FAF7F0; --elevated: #F2EDE3; --surface-dim: #F5F1E8; --surface-container-lowest: #FEFCF7; --surface-container-low: #FCF9F2; --surface-container: #FAF7F0; --surface-container-high: #F2EDE3; --surface-container-highest: #EBE5D8; --surface-bright: #FEFCF7; --scrim: rgba(0, 0, 0, 0.28); --md-sys-color-primary: var(--sz-color-blue-color); --md-sys-color-on-primary: var(--sz-color-blue-on-color); --md-sys-color-primary-container: var(--sz-color-blue-container); --md-sys-color-on-primary-container: var(--sz-color-blue-on-container); --md-sys-color-secondary: var(--sz-color-gold-color); --md-sys-color-on-secondary: var(--sz-color-gold-on-color); --md-sys-color-secondary-container: var(--sz-color-gold-container); --md-sys-color-on-secondary-container: var(--sz-color-gold-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #FDFAF4; --md-sys-color-on-background: #18160E; --md-sys-color-surface: #FAF7F0; --md-sys-color-on-surface: #18160E; --md-sys-color-surface-variant: #F2EDE3; --md-sys-color-on-surface-variant: #4A4438; --md-sys-color-outline: #7A7062; --md-sys-color-outline-variant: #D6CFBF; --md-sys-color-inverse-surface: #18160E; --md-sys-color-inverse-on-surface: #FDFAF4; --md-sys-color-inverse-primary: var(--ref-primary-80); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.28); --ref-primary-0: #000000; --ref-primary-10: #001B3D; --ref-primary-20: #003063; --ref-primary-30: #00468C; --ref-primary-40: #005DB7; --ref-primary-50: #3277D2; --ref-primary-60: #5191EE; --ref-primary-70: #79ACFF; --ref-primary-80: #A9C7FF; --ref-primary-90: #D6E3FF; --ref-primary-95: #ECF0FF; --ref-primary-99: #FDFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #281800; --ref-secondary-20: #432C00; --ref-secondary-30: #604100; --ref-secondary-40: #7F5600; --ref-secondary-50: #9F6D00; --ref-secondary-60: #BF8613; --ref-secondary-70: #DDA031; --ref-secondary-80: #FCBB4A; --ref-secondary-90: #FFDEAE; --ref-secondary-95: #FFEEDA; --ref-secondary-99: #FFFBFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #003909; --ref-tertiary-30: #005312; --ref-tertiary-40: #1B6D24; --ref-tertiary-50: #38873A; --ref-tertiary-60: #53A252; --ref-tertiary-70: #6DBD6A; --ref-tertiary-80: #88D982; --ref-tertiary-90: #A3F69C; --ref-tertiary-95: #C8FFBF; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410003; --ref-error-20: #680008; --ref-error-30: #930010; --ref-error-40: #BA1A20; --ref-error-50: #DD3735; --ref-error-60: #FF544E; --ref-error-70: #FF8980; --ref-error-80: #FFB3AC; --ref-error-90: #FFDAD6; --ref-error-95: #FFEDEB; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #191D17; --ref-neutral-20: #2D322C; --ref-neutral-30: #444841; --ref-neutral-40: #5B6059; --ref-neutral-50: #747871; --ref-neutral-60: #8E928A; --ref-neutral-70: #A9ACA4; --ref-neutral-80: #C4C8BF; --ref-neutral-90: #E0E4DB; --ref-neutral-95: #EFF2E9; --ref-neutral-99: #FAFDF4; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #171D16; --ref-neutral-variant-20: #2C322A; --ref-neutral-variant-30: #424940; --ref-neutral-variant-40: #5A6057; --ref-neutral-variant-50: #72796F; --ref-neutral-variant-60: #8C9388; --ref-neutral-variant-70: #A7ADA2; --ref-neutral-variant-80: #C2C9BD; --ref-neutral-variant-90: #DEE5D8; --ref-neutral-variant-95: #EDF3E6; --ref-neutral-variant-99: #F8FEF2; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #F5F1E8; --md-sys-color-surface-container-lowest: #FEFCF7; --md-sys-color-surface-container-low: #FCF9F2; --md-sys-color-surface-container: #FAF7F0; --md-sys-color-surface-container-high: #F2EDE3; --md-sys-color-surface-container-highest: #EBE5D8; --md-sys-color-surface-bright: #FEFCF7; --sz-color-blue-color: #1565C0; --sz-color-blue-on-color: #FFFFFF; --sz-color-blue-container: #D3E4FF; --sz-color-blue-on-container: #001D35; --sz-color-gold-color: #92650A; --sz-color-gold-on-color: #FFFFFF; --sz-color-gold-container: #F7F2E5; --sz-color-gold-on-container: #1C1B00; --sz-color-green-color: #2E7D32; --sz-color-green-on-color: #FFFFFF; --sz-color-green-container: #D5FFD6; --sz-color-green-on-container: #002204; --sz-color-red-color: #D32F2F; --sz-color-red-on-color: #FFFFFF; --sz-color-red-container: #FFDED9; --sz-color-red-on-container: #410002; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #D32F2F; --sz-identity-phase-2: #2E7D32; --sz-identity-phase-3: #1565C0; --sz-identity-phase-4: #92650A; } :root:root[data-web-palette="blue"][data-theme="dark-warm"], [data-web-palette="blue"][data-theme][data-theme="dark-warm"] { color-scheme: dark; --ambient-ceiling: color-mix(in srgb, #ffd54f, transparent 84%); --ambient-wall: color-mix(in srgb, #2196f3, transparent 84%); --ambient-floor: color-mix(in srgb, #4caf50, transparent 88%); --ambient-cove: color-mix(in srgb, #ffd54f, transparent 78%); --ambient-panel: color-mix(in srgb, #ffe89a, transparent 92%); --ambient-edge: color-mix(in srgb, #ffd54f, transparent 72%); --ambient-shadow: color-mix(in srgb, #2196f3, transparent 78%); --bg: #0A0705; --surface: #120D07; --elevated: #1B1209; --surface-dim: #0A0705; --surface-container-lowest: #0D0906; --surface-container-low: #100B07; --surface-container: #120D07; --surface-container-high: #1B1209; --surface-container-highest: #24180C; --surface-bright: #2D1E10; --md-sys-color-primary: var(--sz-color-blue-color); --md-sys-color-on-primary: var(--sz-color-blue-on-color); --md-sys-color-primary-container: var(--sz-color-blue-container); --md-sys-color-on-primary-container: var(--sz-color-blue-on-container); --md-sys-color-secondary: var(--sz-color-gold-color); --md-sys-color-on-secondary: var(--sz-color-gold-on-color); --md-sys-color-secondary-container: var(--sz-color-gold-container); --md-sys-color-on-secondary-container: var(--sz-color-gold-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #0A0705; --md-sys-color-on-background: #F3F4F6; --md-sys-color-surface: #120D07; --md-sys-color-on-surface: #F1E7D2; --md-sys-color-surface-variant: #111111; --md-sys-color-on-surface-variant: #B4A587; --md-sys-color-outline: #9D8E73; --md-sys-color-outline-variant: #322619; --md-sys-color-inverse-surface: #F1E7D2; --md-sys-color-inverse-on-surface: #24180C; --md-sys-color-inverse-primary: var(--ref-primary-40); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.48); --ref-primary-0: #000000; --ref-primary-10: #001D36; --ref-primary-20: #003258; --ref-primary-30: #00497D; --ref-primary-40: #0061A4; --ref-primary-50: #007BCC; --ref-primary-60: #1E95F2; --ref-primary-70: #63B0FF; --ref-primary-80: #9ECAFF; --ref-primary-90: #D1E4FF; --ref-primary-95: #EAF1FF; --ref-primary-99: #FDFCFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #241A00; --ref-secondary-20: #3C2F00; --ref-secondary-30: #574500; --ref-secondary-40: #735C00; --ref-secondary-50: #917400; --ref-secondary-60: #AF8D00; --ref-secondary-70: #CDA721; --ref-secondary-80: #EBC23E; --ref-secondary-90: #FFE087; --ref-secondary-95: #FFEFCC; --ref-secondary-99: #FFFBFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #00390A; --ref-tertiary-30: #005313; --ref-tertiary-40: #006E1C; --ref-tertiary-50: #22892F; --ref-tertiary-60: #41A447; --ref-tertiary-70: #5DC05E; --ref-tertiary-80: #78DC77; --ref-tertiary-90: #94F990; --ref-tertiary-95: #C8FFC0; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410001; --ref-error-20: #690002; --ref-error-30: #930005; --ref-error-40: #BB1614; --ref-error-50: #E0342A; --ref-error-60: #FF5545; --ref-error-70: #FF8A7B; --ref-error-80: #FFB4A9; --ref-error-90: #FFDAD5; --ref-error-95: #FFEDEA; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #1F1B13; --ref-neutral-20: #343027; --ref-neutral-30: #4B463C; --ref-neutral-40: #635E53; --ref-neutral-50: #7C766B; --ref-neutral-60: #969084; --ref-neutral-70: #B1AA9E; --ref-neutral-80: #CDC6B9; --ref-neutral-90: #EAE2D4; --ref-neutral-95: #F8F0E2; --ref-neutral-99: #FFFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #1F1B10; --ref-neutral-variant-20: #353024; --ref-neutral-variant-30: #4C4639; --ref-neutral-variant-40: #645E4F; --ref-neutral-variant-50: #7D7667; --ref-neutral-variant-60: #989080; --ref-neutral-variant-70: #B3AA99; --ref-neutral-variant-80: #CFC6B4; --ref-neutral-variant-90: #EBE1CF; --ref-neutral-variant-95: #FAF0DD; --ref-neutral-variant-99: #FFFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #0A0705; --md-sys-color-surface-container-lowest: #0D0906; --md-sys-color-surface-container-low: #100B07; --md-sys-color-surface-container: #120D07; --md-sys-color-surface-container-high: #1B1209; --md-sys-color-surface-container-highest: #24180C; --md-sys-color-surface-bright: #2D1E10; --sz-color-blue-color: #2196F3; --sz-color-blue-on-color: #000000; --sz-color-blue-container: #003352; --sz-color-blue-on-container: #D8EFFF; --sz-color-gold-color: #FFD54F; --sz-color-gold-on-color: #211B00; --sz-color-gold-container: #3C2F00; --sz-color-gold-on-container: #FFE89A; --sz-color-green-color: #4CAF50; --sz-color-green-on-color: #050505; --sz-color-green-container: #00390B; --sz-color-green-on-container: #D5FFD6; --sz-color-red-color: #F44336; --sz-color-red-on-color: #000000; --sz-color-red-container: #690005; --sz-color-red-on-container: #FFDED9; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #F44336; --sz-identity-phase-2: #4CAF50; --sz-identity-phase-3: #2196F3; --sz-identity-phase-4: #FFD54F; } :root:root[data-web-palette="blue"][data-surface="light"] { color-scheme: light; --ambient-ceiling: color-mix(in srgb, #1565c0, transparent 88%); --ambient-wall: color-mix(in srgb, #1565c0, transparent 90%); --ambient-floor: color-mix(in srgb, #2e7d32, transparent 92%); --ambient-cove: color-mix(in srgb, #b77900, transparent 84%); --ambient-panel: rgba(255,255,255,0.70); --ambient-edge: color-mix(in srgb, #1565c0, transparent 78%); --ambient-shadow: color-mix(in srgb, #1565c0, transparent 84%); --bg: #FFFFFF; --surface: #F8FAFC; --elevated: #EEF2F7; --surface-dim: #F4F4F4; --surface-container-lowest: #FFFFFF; --surface-container-low: #FAFBFD; --surface-container: #F8FAFC; --surface-container-high: #EEF2F7; --surface-container-highest: #E8EDF3; --surface-bright: #FFFFFF; --scrim: rgba(0, 0, 0, 0.32); --md-sys-color-primary: var(--sz-color-blue-color); --md-sys-color-on-primary: var(--sz-color-blue-on-color); --md-sys-color-primary-container: var(--sz-color-blue-container); --md-sys-color-on-primary-container: var(--sz-color-blue-on-container); --md-sys-color-secondary: var(--sz-color-gold-color); --md-sys-color-on-secondary: var(--sz-color-gold-on-color); --md-sys-color-secondary-container: var(--sz-color-gold-container); --md-sys-color-on-secondary-container: var(--sz-color-gold-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #FFFFFF; --md-sys-color-on-background: #111827; --md-sys-color-surface: #F8FAFC; --md-sys-color-on-surface: #111827; --md-sys-color-surface-variant: #EEF2F7; --md-sys-color-on-surface-variant: #4B5563; --md-sys-color-outline: #6B7280; --md-sys-color-outline-variant: #D8DEE8; --md-sys-color-inverse-surface: #111827; --md-sys-color-inverse-on-surface: #FFFFFF; --md-sys-color-inverse-primary: var(--ref-primary-80); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.32); --ref-primary-0: #000000; --ref-primary-10: #001B3D; --ref-primary-20: #003063; --ref-primary-30: #00468C; --ref-primary-40: #005DB7; --ref-primary-50: #3277D2; --ref-primary-60: #5191EE; --ref-primary-70: #79ACFF; --ref-primary-80: #A9C7FF; --ref-primary-90: #D6E3FF; --ref-primary-95: #ECF0FF; --ref-primary-99: #FDFBFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #291800; --ref-secondary-20: #452B00; --ref-secondary-30: #633F00; --ref-secondary-40: #825500; --ref-secondary-50: #A36B00; --ref-secondary-60: #C48412; --ref-secondary-70: #E29E30; --ref-secondary-80: #FFB952; --ref-secondary-90: #FFDDB3; --ref-secondary-95: #FFEEDC; --ref-secondary-99: #FFFBFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #003909; --ref-tertiary-30: #005312; --ref-tertiary-40: #1B6D24; --ref-tertiary-50: #38873A; --ref-tertiary-60: #53A252; --ref-tertiary-70: #6DBD6A; --ref-tertiary-80: #88D982; --ref-tertiary-90: #A3F69C; --ref-tertiary-95: #C8FFBF; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410003; --ref-error-20: #680008; --ref-error-30: #930010; --ref-error-40: #BA1A20; --ref-error-50: #DD3735; --ref-error-60: #FF544E; --ref-error-70: #FF8980; --ref-error-80: #FFB3AC; --ref-error-90: #FFDAD6; --ref-error-95: #FFEDEB; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #191C20; --ref-neutral-20: #2E3036; --ref-neutral-30: #45474C; --ref-neutral-40: #5C5E64; --ref-neutral-50: #75777D; --ref-neutral-60: #8F9097; --ref-neutral-70: #AAABB1; --ref-neutral-80: #C5C6CD; --ref-neutral-90: #E2E2E9; --ref-neutral-95: #F0F0F7; --ref-neutral-99: #FDFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #181C22; --ref-neutral-variant-20: #2D3038; --ref-neutral-variant-30: #44474E; --ref-neutral-variant-40: #5B5E66; --ref-neutral-variant-50: #74777F; --ref-neutral-variant-60: #8E9099; --ref-neutral-variant-70: #A8ABB4; --ref-neutral-variant-80: #C4C6CF; --ref-neutral-variant-90: #E0E2EC; --ref-neutral-variant-95: #EEF0FA; --ref-neutral-variant-99: #FDFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #F4F4F4; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #FAFBFD; --md-sys-color-surface-container: #F8FAFC; --md-sys-color-surface-container-high: #EEF2F7; --md-sys-color-surface-container-highest: #E8EDF3; --md-sys-color-surface-bright: #FFFFFF; --sz-color-blue-color: #1565C0; --sz-color-blue-on-color: #FFFFFF; --sz-color-blue-container: #D3E4FF; --sz-color-blue-on-container: #001D35; --sz-color-gold-color: #92650A; --sz-color-gold-on-color: #FFFFFF; --sz-color-gold-container: #F9F1A6; --sz-color-gold-on-container: #1C1B00; --sz-color-green-color: #2E7D32; --sz-color-green-on-color: #FFFFFF; --sz-color-green-container: #D5FFD6; --sz-color-green-on-container: #002204; --sz-color-red-color: #D32F2F; --sz-color-red-on-color: #FFFFFF; --sz-color-red-container: #FFDED9; --sz-color-red-on-container: #410002; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #D32F2F; --sz-identity-phase-2: #2E7D32; --sz-identity-phase-3: #1565C0; --sz-identity-phase-4: #B77900; } :root:root[data-web-palette="blue"][data-surface="dark"] { color-scheme: dark; --ambient-ceiling: color-mix(in srgb, #ffeb3b, transparent 84%); --ambient-wall: color-mix(in srgb, #2196f3, transparent 84%); --ambient-floor: color-mix(in srgb, #4caf50, transparent 88%); --ambient-cove: color-mix(in srgb, #ffeb3b, transparent 78%); --ambient-panel: color-mix(in srgb, #fffde7, transparent 92%); --ambient-edge: color-mix(in srgb, #ffeb3b, transparent 72%); --ambient-shadow: color-mix(in srgb, #2196f3, transparent 78%); --bg: #050505; --surface: #0A0A0A; --elevated: #111111; --surface-dim: #050505; --surface-container-lowest: #060606; --surface-container-low: #080808; --surface-container: #0A0A0A; --surface-container-high: #111111; --surface-container-highest: #161616; --surface-bright: #1A1A1A; --scrim: rgba(0, 0, 0, 0.48); --md-sys-color-primary: var(--sz-color-blue-color); --md-sys-color-on-primary: var(--sz-color-blue-on-color); --md-sys-color-primary-container: var(--sz-color-blue-container); --md-sys-color-on-primary-container: var(--sz-color-blue-on-container); --md-sys-color-secondary: var(--sz-color-gold-color); --md-sys-color-on-secondary: var(--sz-color-gold-on-color); --md-sys-color-secondary-container: var(--sz-color-gold-container); --md-sys-color-on-secondary-container: var(--sz-color-gold-on-container); --md-sys-color-tertiary: var(--sz-color-green-color); --md-sys-color-on-tertiary: var(--sz-color-green-on-color); --md-sys-color-tertiary-container: var(--sz-color-green-container); --md-sys-color-on-tertiary-container: var(--sz-color-green-on-container); --md-sys-color-error: var(--sz-color-red-color); --md-sys-color-on-error: var(--sz-color-red-on-color); --md-sys-color-error-container: var(--sz-color-red-container); --md-sys-color-on-error-container: var(--sz-color-red-on-container); --md-sys-color-background: #050505; --md-sys-color-on-background: #F3F4F6; --md-sys-color-surface: #0A0A0A; --md-sys-color-on-surface: #FFFDE7; --md-sys-color-surface-variant: #111111; --md-sys-color-on-surface-variant: #9CA3AF; --md-sys-color-outline: #555555; --md-sys-color-outline-variant: #2A2A2A; --md-sys-color-inverse-surface: #F3F4F6; --md-sys-color-inverse-on-surface: #050505; --md-sys-color-inverse-primary: var(--ref-primary-40); --md-sys-color-shadow: #000000; --md-sys-color-scrim: rgba(0, 0, 0, 0.48); --ref-primary-0: #000000; --ref-primary-10: #001D36; --ref-primary-20: #003258; --ref-primary-30: #00497D; --ref-primary-40: #0061A4; --ref-primary-50: #007BCC; --ref-primary-60: #1E95F2; --ref-primary-70: #63B0FF; --ref-primary-80: #9ECAFF; --ref-primary-90: #D1E4FF; --ref-primary-95: #EAF1FF; --ref-primary-99: #FDFCFF; --ref-primary-100: #FFFFFF; --ref-secondary-0: #000000; --ref-secondary-10: #201C00; --ref-secondary-20: #363100; --ref-secondary-30: #4F4800; --ref-secondary-40: #695F00; --ref-secondary-50: #847800; --ref-secondary-60: #A09200; --ref-secondary-70: #BDAD00; --ref-secondary-80: #DBC90A; --ref-secondary-90: #F9E534; --ref-secondary-95: #FFF39E; --ref-secondary-99: #FFFBFF; --ref-secondary-100: #FFFFFF; --ref-tertiary-0: #000000; --ref-tertiary-10: #002204; --ref-tertiary-20: #00390A; --ref-tertiary-30: #005313; --ref-tertiary-40: #006E1C; --ref-tertiary-50: #22892F; --ref-tertiary-60: #41A447; --ref-tertiary-70: #5DC05E; --ref-tertiary-80: #78DC77; --ref-tertiary-90: #94F990; --ref-tertiary-95: #C8FFC0; --ref-tertiary-99: #F6FFF0; --ref-tertiary-100: #FFFFFF; --ref-error-0: #000000; --ref-error-10: #410001; --ref-error-20: #690002; --ref-error-30: #930005; --ref-error-40: #BB1614; --ref-error-50: #E0342A; --ref-error-60: #FF5545; --ref-error-70: #FF8A7B; --ref-error-80: #FFB4A9; --ref-error-90: #FFDAD5; --ref-error-95: #FFEDEA; --ref-error-99: #FFFBFF; --ref-error-100: #FFFFFF; --ref-neutral-0: #000000; --ref-neutral-10: #1D1C13; --ref-neutral-20: #323027; --ref-neutral-30: #49473D; --ref-neutral-40: #615E54; --ref-neutral-50: #7A776C; --ref-neutral-60: #949185; --ref-neutral-70: #AFAB9F; --ref-neutral-80: #CBC6B9; --ref-neutral-90: #E7E2D5; --ref-neutral-95: #F6F0E3; --ref-neutral-99: #FFFBFF; --ref-neutral-100: #FFFFFF; --ref-neutral-variant-0: #000000; --ref-neutral-variant-10: #1E1C11; --ref-neutral-variant-20: #333124; --ref-neutral-variant-30: #4A473A; --ref-neutral-variant-40: #625F50; --ref-neutral-variant-50: #7B7768; --ref-neutral-variant-60: #959181; --ref-neutral-variant-70: #B0AB9A; --ref-neutral-variant-80: #CBC6B5; --ref-neutral-variant-90: #E8E2D0; --ref-neutral-variant-95: #F6F1DE; --ref-neutral-variant-99: #FFFBFF; --ref-neutral-variant-100: #FFFFFF; --md-sys-color-primary-fixed: var(--ref-primary-90); --md-sys-color-primary-fixed-dim: var(--ref-primary-80); --md-sys-color-on-primary-fixed: var(--ref-primary-10); --md-sys-color-on-primary-fixed-variant: var(--ref-primary-30); --md-sys-color-secondary-fixed: var(--ref-secondary-90); --md-sys-color-secondary-fixed-dim: var(--ref-secondary-80); --md-sys-color-on-secondary-fixed: var(--ref-secondary-10); --md-sys-color-on-secondary-fixed-variant: var(--ref-secondary-30); --md-sys-color-tertiary-fixed: var(--ref-tertiary-90); --md-sys-color-tertiary-fixed-dim: var(--ref-tertiary-80); --md-sys-color-on-tertiary-fixed: var(--ref-tertiary-10); --md-sys-color-on-tertiary-fixed-variant: var(--ref-tertiary-30); --md-sys-color-surface-dim: #050505; --md-sys-color-surface-container-lowest: #060606; --md-sys-color-surface-container-low: #080808; --md-sys-color-surface-container: #0A0A0A; --md-sys-color-surface-container-high: #111111; --md-sys-color-surface-container-highest: #161616; --md-sys-color-surface-bright: #1A1A1A; --sz-color-blue-color: #2196F3; --sz-color-blue-on-color: #000000; --sz-color-blue-container: #003352; --sz-color-blue-on-container: #D8EFFF; --sz-color-gold-color: #FFEB3B; --sz-color-gold-on-color: #050505; --sz-color-gold-container: #333100; --sz-color-gold-on-container: #FFFDE7; --sz-color-green-color: #4CAF50; --sz-color-green-on-color: #050505; --sz-color-green-container: #00390B; --sz-color-green-on-container: #D5FFD6; --sz-color-red-color: #F44336; --sz-color-red-on-color: #000000; --sz-color-red-container: #690005; --sz-color-red-on-container: #FFDED9; --md-sys-color-surface-tint: var(--md-sys-color-primary); --accent: var(--md-sys-color-primary); --accent2: var(--md-sys-color-primary); --accent-hover: var(--md-sys-color-primary); --accent2-hover: var(--md-sys-color-primary); --gold: var(--md-sys-color-primary); --sz-accent: var(--md-sys-color-primary); --text: var(--md-sys-color-on-background); --cream: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant); --sz-identity-phase-1: #F44336; --sz-identity-phase-2: #4CAF50; --sz-identity-phase-3: #2196F3; --sz-identity-phase-4: #FFEB3B; } } /* generated-stable-web-palettes:end */ }