/* Modern Minimalist — clean contemporary grayscale.
   Palette: Charcoal #36454f · Slate Gray #708090 · Light Gray #d3d3d3 · White #ffffff
   Type: DejaVu Sans Bold headers / DejaVu Sans body */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

:root {
    --font-heading: 'Open Sans', 'DejaVu Sans', Verdana, sans-serif;
    --font-body: 'Open Sans', 'DejaVu Sans', Verdana, sans-serif;

    --bg: #ffffff;
    --soft: #f5f6f7;
    --surface: #ffffff;
    --text: #4a5560;
    --heading: #36454f;
    --muted: #708090;
    --line: #e4e7ea;

    --brand: #36454f;
    --brand-strong: #222d35;
    --rank: #708090;
    --score: #36454f;

    --topbar-bg: #f5f6f7;
    --topbar-text: #708090;

    --header-bg: #ffffff;
    --header-border: #e4e7ea;
    --header-logo: #36454f;
    --header-link: #4a5560;
    --header-link-hover: #36454f;

    --hero-bg: #ffffff;
    --hero-text: #36454f;
    --hero-sub: #708090;

    --badge-bg: #36454f;
    --badge-text: #ffffff;

    --cta-bg: #36454f;
    --cta-text: #ffffff;
    --cta-hover: #222d35;

    --footer-bg: #36454f;
    --footer-text: #a9b4bd;
    --footer-link: #d3d3d3;

    --radius: 4px;
    --radius-pill: 2px;
    --radius-cta: 2px;
    --shadow: 0 1px 2px rgba(54, 69, 79, .06);
    --shadow-hover: 0 6px 18px rgba(54, 69, 79, .10);
}