/* ========================================================================== DGTrack — design tokens Ported from the marketing kit's landing-page.html. This is the single source of colour truth: theme.json points its palette at these variables, so the Site Editor swatches and the front end can never drift apart. Three layers, in order of precedence: 1. :root light defaults 2. @media (prefers-color-scheme) follow the operating system 3. :root[data-theme="..."] an explicit choice from the header toggle ========================================================================== */ :root { --dgt-ground: #EAEFEA; --dgt-surface: #FFFFFF; --dgt-surface-2: #F3F7F3; --dgt-ink: #0C2119; --dgt-ink-soft: #4A5B53; --dgt-ink-faint: #74857C; --dgt-line: #D2DDD6; --dgt-band: #1A443A; --dgt-band-ink: #E2F1EC; --dgt-band-soft: #9CC4B9; --dgt-accent: #17624F; --dgt-accent-ink: #FFFFFF; --dgt-amber: #9A6408; --dgt-amber-bg: #FBEDD2; --dgt-amber-line: #E3C286; --dgt-shadow: 0 1px 2px rgba(12, 33, 25, .06), 0 8px 24px -12px rgba(12, 33, 25, .18); --dgt-shadow-lift: 0 2px 4px rgba(12, 33, 25, .07), 0 16px 40px -18px rgba(12, 33, 25, .26); /* Typography stacks. No web fonts — nothing to download, nothing to consent to. */ --dgt-display: Georgia, "Iowan Old Style", "Palatino Linotype", ui-serif, serif; --dgt-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --dgt-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; --dgt-radius: 14px; --dgt-radius-lg: 18px; --dgt-radius-pill: 999px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --dgt-ground: #0A1411; --dgt-surface: #11201B; --dgt-surface-2: #16271F; --dgt-ink: #E7F0EB; --dgt-ink-soft: #A2B4AB; --dgt-ink-faint: #7C8F86; --dgt-line: #21352C; --dgt-band: #0E241E; --dgt-band-ink: #DCEDE7; --dgt-band-soft: #8FB5AA; --dgt-accent: #7FC9BF; --dgt-accent-ink: #06201A; --dgt-amber: #FFC24B; --dgt-amber-bg: #2B2113; --dgt-amber-line: #5C4620; --dgt-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px -14px rgba(0, 0, 0, .7); --dgt-shadow-lift: 0 2px 6px rgba(0, 0, 0, .55), 0 18px 44px -20px rgba(0, 0, 0, .8); color-scheme: dark; } } :root[data-theme="light"] { --dgt-ground: #EAEFEA; --dgt-surface: #FFFFFF; --dgt-surface-2: #F3F7F3; --dgt-ink: #0C2119; --dgt-ink-soft: #4A5B53; --dgt-ink-faint: #74857C; --dgt-line: #D2DDD6; --dgt-band: #1A443A; --dgt-band-ink: #E2F1EC; --dgt-band-soft: #9CC4B9; --dgt-accent: #17624F; --dgt-accent-ink: #FFFFFF; --dgt-amber: #9A6408; --dgt-amber-bg: #FBEDD2; --dgt-amber-line: #E3C286; --dgt-shadow: 0 1px 2px rgba(12, 33, 25, .06), 0 8px 24px -12px rgba(12, 33, 25, .18); --dgt-shadow-lift: 0 2px 4px rgba(12, 33, 25, .07), 0 16px 40px -18px rgba(12, 33, 25, .26); color-scheme: light; } :root[data-theme="dark"] { --dgt-ground: #0A1411; --dgt-surface: #11201B; --dgt-surface-2: #16271F; --dgt-ink: #E7F0EB; --dgt-ink-soft: #A2B4AB; --dgt-ink-faint: #7C8F86; --dgt-line: #21352C; --dgt-band: #0E241E; --dgt-band-ink: #DCEDE7; --dgt-band-soft: #8FB5AA; --dgt-accent: #7FC9BF; --dgt-accent-ink: #06201A; --dgt-amber: #FFC24B; --dgt-amber-bg: #2B2113; --dgt-amber-line: #5C4620; --dgt-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px -14px rgba(0, 0, 0, .7); --dgt-shadow-lift: 0 2px 6px rgba(0, 0, 0, .55), 0 18px 44px -20px rgba(0, 0, 0, .8); color-scheme: dark; } /* The editor iframe renders inside , not , so mirror the defaults there to stop the canvas falling back to unstyled colours while editing. */ .editor-styles-wrapper { background-color: var(--dgt-ground); color: var(--dgt-ink); }