/* Ocean Depths — professional, calming maritime.
   Palette: Deep Navy #1a2332 · Teal #2d8b8b · Seafoam #a8dadc · Cream #f1faee
   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: #f1faee;
    --soft: #e4f2ec;
    --surface: #ffffff;
    --text: #2c3b4a;
    --heading: #1a2332;
    --muted: #667889;
    --line: #d3e5e2;

    --brand: #2d8b8b;
    --brand-strong: #1f6b6b;
    --rank: #2d8b8b;
    --score: #1a2332;

    --topbar-bg: #e4f2ec;
    --topbar-text: #52697a;

    --header-bg: #1a2332;
    --header-border: #1a2332;
    --header-logo: #f1faee;
    --header-link: #a8dadc;
    --header-link-hover: #ffffff;

    --hero-bg: linear-gradient(160deg, #1a2332 0%, #24455a 100%);
    --hero-text: #f1faee;
    --hero-sub: #a8dadc;

    --badge-bg: #2d8b8b;
    --badge-text: #ffffff;

    --cta-bg: #2d8b8b;
    --cta-text: #ffffff;
    --cta-hover: #1f6b6b;

    --footer-bg: #1a2332;
    --footer-text: #90a5b3;
    --footer-link: #a8dadc;

    --radius: 8px;
    --radius-pill: 3px;
    --radius-cta: 5px;
    --shadow: 0 1px 3px rgba(26, 35, 50, .07);
    --shadow-hover: 0 8px 22px rgba(26, 35, 50, .13);
}