/* Brand tokens. Neutrals are opacity tints of these hues, never new ones. Light and dark are Material schemes; the consuming mkdocs.yml wires the header toggle. Semantic tokens are redefined per scheme so later rules keep the same names. */ :root { --cadasto-navy: #0a1a66; /* dark blue */ --cadasto-green: #24e363; --cadasto-blue: #5cb2ff; /* light blue */ --cadasto-mint: #a8f5bf; --cadasto-silver: #cfd6e5; --cadasto-white: #ffffff; /* Exact stacks from cadasto.com (Divi customizer: headings vs body). Lucida is part of that fallback path; the theme's composed body stack would otherwise fall through to -apple-system and read as a different face whenever the webfont misses. */ --cadasto-display: "Fira Sans", Helvetica, Arial, Lucida, sans-serif; --cadasto-text: "Roboto", Helvetica, Arial, Lucida, sans-serif; /* `theme.font` is false, so the theme no longer sets these names. The composed `--md-text-font-family` is overridden on `body` below. */ --md-text-font: "Roboto"; --md-code-font: "Roboto Mono"; } /* The theme composes `--md-text-font-family` on `body`, not `:root`. A value set only on `:root` is inherited and then overwritten, so the page would keep `-apple-system` in the fallback path and miss Lucida. */ body { --md-text-font-family: var(--cadasto-text); } /* The theme declares its scheme variables on the element carrying `data-md-color-scheme` — that is , not . A custom property set on beats one inherited from `:root`, so these overrides must use the same selector or they are silently discarded. */ /* Ink pair: the brand hues at the strength each surface can carry, plus the label colour that reads on top of them. Rules elsewhere use these names and stop caring which scheme is active. Measured against the scheme background: see tools/contrast.py, which fails if any of this drops below WCAG AA. */ /* --- dark (default) ------------------------------------------------------- */ [data-md-color-scheme="slate"] { /* On navy the brand hues are already high contrast — 6.85:1 and 9.05:1 — so dark mode uses them unmodified. Labels on top of them must be navy: white on the brand blue is 2.27:1 and on the green 1.72:1. */ --cadasto-ink-blue: var(--cadasto-blue); --cadasto-ink-green: var(--cadasto-green); --cadasto-on-ink: var(--cadasto-navy); --cadasto-fg: var(--cadasto-white); --cadasto-fg-muted: rgba(255, 255, 255, 0.75); /* cadasto.com sets titles white on navy. */ --cadasto-heading: var(--cadasto-white); /* Icon inks, cycled across the landing cards in this order, as on cadasto.com: light blue, light green, silver. */ --cadasto-icon-1: var(--cadasto-blue); --cadasto-icon-2: var(--cadasto-mint); --cadasto-icon-3: var(--cadasto-silver); /* Landing call-to-action buttons: white with a navy label, as on cadasto.com. The hover keeps the green fill (`--cadasto-ink-green`). */ --cadasto-cta-bg: var(--cadasto-white); --cadasto-cta-fg: var(--cadasto-navy); --cadasto-cta-outline: var(--cadasto-white); --cadasto-surface: rgba(255, 255, 255, 0.05); --cadasto-surface-hover: rgba(255, 255, 255, 0.08); --cadasto-raised: rgba(255, 255, 255, 0.06); --cadasto-border: rgba(207, 214, 229, 0.22); --cadasto-border-strong: rgba(207, 214, 229, 0.42); --cadasto-nav-bg: rgba(10, 26, 102, 0.85); --md-default-bg-color: var(--cadasto-navy); --md-default-fg-color: var(--cadasto-fg); --md-default-fg-color--light: var(--cadasto-fg-muted); --md-default-fg-color--lighter: rgba(255, 255, 255, 0.45); --md-primary-fg-color: var(--cadasto-ink-blue); --md-primary-fg-color--light: var(--cadasto-blue); --md-primary-fg-color--dark: var(--cadasto-navy); --md-accent-fg-color: var(--cadasto-ink-green); /* Material paints button labels on the accent fill with this. Its own default is white, which is 1.72:1 on the green. */ --md-accent-bg-color: var(--cadasto-on-ink); --md-typeset-color: var(--cadasto-fg); --md-typeset-a-color: var(--cadasto-ink-blue); --md-code-bg-color: rgba(0, 0, 0, 0.25); --md-footer-bg-color: var(--cadasto-navy); } /* --- light ---------------------------------------------------------------- */ [data-md-color-scheme="default"] { /* The brand blue and green are tuned for navy. On white they measure 2.27:1 and 1.72:1, far under the 4.5:1 WCAG AA floor for body text, and an underline fixes only 1.4.1 (colour alone), never 1.4.3 (contrast). Mixing each toward the navy keeps the brand hue and clears AA — 5.12:1 and 4.99:1 — so light mode gets its own ink rather than a seventh colour. Labels on top of these must be white; navy is 3.03:1 and 3.11:1. */ --cadasto-ink-blue: color-mix(in srgb, var(--cadasto-blue) 55%, var(--cadasto-navy)); --cadasto-ink-green: color-mix(in srgb, var(--cadasto-green) 50%, var(--cadasto-navy)); --cadasto-on-ink: var(--cadasto-white); --cadasto-fg: var(--cadasto-navy); /* 0.65, not 0.6: this carries body copy — the hero tagline and every card paragraph — and 0.6 measured 4.41:1 on white. 0.65 is 5.20:1. */ --cadasto-fg-muted: rgba(10, 26, 102, 0.65); --cadasto-heading: var(--cadasto-navy); /* The dark-mode icon inks are pale: on white they fall under the 3:1 floor for meaningful icons (1.4.11). Each keeps its hue, mixed toward the navy. */ --cadasto-icon-1: var(--cadasto-ink-blue); --cadasto-icon-2: var(--cadasto-ink-green); --cadasto-icon-3: color-mix(in srgb, var(--cadasto-silver) 35%, var(--cadasto-navy)); /* A white button disappears on a white page, so light mode keeps the blue ink fill with a white label. */ --cadasto-cta-bg: var(--cadasto-ink-blue); --cadasto-cta-fg: var(--cadasto-white); --cadasto-cta-outline: var(--cadasto-ink-blue); --cadasto-surface: rgba(10, 26, 102, 0.04); --cadasto-surface-hover: rgba(10, 26, 102, 0.07); --cadasto-raised: var(--cadasto-white); --cadasto-border: var(--cadasto-silver); --cadasto-border-strong: rgba(10, 26, 102, 0.26); --cadasto-nav-bg: rgba(255, 255, 255, 0.85); --md-default-bg-color: var(--cadasto-white); --md-default-fg-color: var(--cadasto-fg); --md-default-fg-color--light: var(--cadasto-fg-muted); /* 0.5, not 0.38: Material puts this on icons and small controls, which 1.4.11 holds to 3:1. At 0.38 it was 2.35:1; 0.5 is 3.29:1. */ --md-default-fg-color--lighter: rgba(10, 26, 102, 0.5); --md-primary-fg-color: var(--cadasto-ink-blue); --md-primary-fg-color--light: var(--cadasto-blue); --md-primary-fg-color--dark: var(--cadasto-navy); --md-accent-fg-color: var(--cadasto-ink-green); --md-accent-bg-color: var(--cadasto-on-ink); --md-typeset-color: var(--cadasto-fg); --md-typeset-a-color: var(--cadasto-ink-blue); --md-code-bg-color: rgba(10, 26, 102, 0.05); --md-footer-bg-color: var(--cadasto-navy); }