/* ========================================================================== Cadence landing — Material Design 3 system tokens. The M3 color system (m3.material.io/styles/color/system) applied to the EXISTING Cadence palette: seed green #38A169, warm-black #080A05, ivory #FDFBF7. Nothing about the brand changes — the hues are mapped into Google's tonal roles (primary / surface containers / outline …) so every component reads them by ROLE, never by raw hex. Default scheme = dark (the site's long-standing default); [data-theme= "light"] on flips to the light scheme. js/theme.js owns that attribute and localStorage('cadence-theme'). ========================================================================== */ :root { color-scheme: dark; /* ---- Primary · Cadence green (seed #38A169, hue ~147) ------------------ */ --md-sys-color-primary: #8AD1A1; --md-sys-color-on-primary: #053721; --md-sys-color-primary-container: #0E5230; --md-sys-color-on-primary-container: #ACE4BC; --md-sys-color-primary-fixed-dim: #38A169; /* the brand seed itself */ /* ---- Secondary · muted sage (desaturated companion) -------------------- */ --md-sys-color-secondary: #B5CCB6; --md-sys-color-on-secondary: #19261B; --md-sys-color-secondary-container: #28392C; --md-sys-color-on-secondary-container: #D1E6D3; /* ---- Tertiary · warm gold (callback / highlight accent) ---------------- */ --md-sys-color-tertiary: #E3C274; --md-sys-color-on-tertiary: #3B2F00; --md-sys-color-tertiary-container: #533F00; --md-sys-color-on-tertiary-container: #F9DF94; /* ---- Error ------------------------------------------------------------- */ --md-sys-color-error: #FFB4AB; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000A; --md-sys-color-on-error-container: #FFDAD6; /* ---- Surfaces · warm-black family (from #080A05) ----------------------- */ --md-sys-color-surface-dim: #090B06; --md-sys-color-surface-bright: #35392F; --md-sys-color-surface: #0A0C07; /* page ground */ --md-sys-color-surface-container-lowest: #040603; --md-sys-color-surface-container-low: #111410; --md-sys-color-surface-container: #151811; --md-sys-color-surface-container-high: #1F221B; --md-sys-color-surface-container-highest:#2A2D25; --md-sys-color-on-surface: #E1E3D9; --md-sys-color-surface-variant: #45493C; --md-sys-color-on-surface-variant: #C2C8BA; --md-sys-color-inverse-surface: #FDFBF7; --md-sys-color-inverse-on-surface: #2E312A; --md-sys-color-outline: #8C9284; --md-sys-color-outline-variant: #45493C; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; /* Semantic aliases (readable names for one-off accents) */ --color-accent: var(--md-sys-color-primary); --color-accent-strong: #5FBE90; /* legacy icon green, kept in-family */ --color-success: var(--md-sys-color-primary); --color-warning: var(--md-sys-color-tertiary); /* ---- Typography · Roboto Flex, the M3 2021 type scale ------------------ Sizes per spec (display 57 / headline 32 / title 22 / body 16 / label 14), clamped responsively where sections.css needs fluid display sizes. */ --md-sys-typescale-display-large: 600 clamp(2.75rem, 1.2rem + 5.2vw, 3.5625rem)/1.12 var(--font-brand); --md-sys-typescale-headline-large: 650 clamp(1.75rem, 1.05rem + 2.6vw, 2.125rem)/1.2 var(--font-brand); --md-sys-typescale-headline-medium: 650 clamp(1.5rem, 1rem + 1.8vw, 1.75rem)/1.25 var(--font-brand); --md-sys-typescale-title-large: 600 1.375rem/1.28 var(--font-brand); --md-sys-typescale-title-medium: 600 1rem/1.35 var(--font-brand); --md-sys-typescale-body-large: 400 1.0625rem/1.65 var(--font-text); --md-sys-typescale-body-medium: 400 0.9375rem/1.6 var(--font-text); --md-sys-typescale-body-small: 400 0.8125rem/1.55 var(--font-text); --md-sys-typescale-label-large: 500 0.875rem/1.45 var(--font-text); --md-sys-typescale-label-medium: 500 0.75rem/1.35 var(--font-text); --tracking-display: -0.015em; --tracking-headline: -0.01em; --tracking-label: 0.02em; /* ---- Shape scale -------------------------------------------------------- */ --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 999px; /* ---- Elevation (M3 level shadows, ambient + key per level) -------------- */ --md-sys-elevation-level0: none; --md-sys-elevation-level1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15); --md-sys-elevation-level2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15); --md-sys-elevation-level3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30); --md-sys-elevation-level4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.30); --md-sys-elevation-level5: 0 8px 12px 6px rgba(0,0,0,.15), 0 4px 4px rgba(0,0,0,.30); /* ---- Motion · M3 easing + durations ------------------------------------- */ --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --md-sys-motion-duration-short4: 200ms; --md-sys-motion-duration-medium2: 300ms; --md-sys-motion-duration-long2: 500ms; /* ---- State layers (opacity of content-color overlays) -------------------- */ --md-sys-state-hover-opacity: 0.08; --md-sys-state-focus-opacity: 0.12; --md-sys-state-pressed-opacity: 0.12; /* ---- Fonts ---------------------------------------------------------------- */ --font-brand: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-text: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", "SF Mono", "Fira Code", monospace; } /* -------------------------------------------------------------------------- Light scheme — same roles, ivory family from the legacy #FDFBF7. -------------------------------------------------------------------------- */ [data-theme="light"] { color-scheme: light; --md-sys-color-primary: #186A3C; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #ACE4BC; --md-sys-color-on-primary-container: #032214; --md-sys-color-primary-fixed-dim: #2F855A; --md-sys-color-secondary: #3B4E3E; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #D1E6D3; --md-sys-color-on-secondary-container: #0B140E; --md-sys-color-tertiary: #6D5711; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #F9DF94; --md-sys-color-on-tertiary-container: #211B00; --md-sys-color-error: #BA1A1A; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFDAD6; --md-sys-color-on-error-container: #410002; --md-sys-color-surface-dim: #DEDBCF; --md-sys-color-surface-bright: #FFFEF8; --md-sys-color-surface: #FDFBF7; /* the legacy ivory */ --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #F7F5EC; --md-sys-color-surface-container: #F1EFE5; --md-sys-color-surface-container-high: #EBE9E0; --md-sys-color-surface-container-highest:#E6E4DA; --md-sys-color-on-surface: #191C15; --md-sys-color-surface-variant: #E1E3D5; --md-sys-color-on-surface-variant: #44483C; --md-sys-color-inverse-surface: #2E312A; --md-sys-color-inverse-on-surface: #F0F1E6; --md-sys-color-outline: #75796A; --md-sys-color-outline-variant: #C5C9B9; --color-accent: var(--md-sys-color-primary); --color-accent-strong: #2F855A; } /* Layout rhythm shared by every section (not a color role, but system-wide) */ :root { --section-pad: clamp(4.5rem, 3rem + 5vw, 7.5rem); --container-max: 72rem; --container-pad: clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem); }