/**
 * Design tokens and global reset styles.
 */

:root {
    --ohb-blue: #39a9e8;
    --ohb-blue-dark: #178ed1;
    --ohb-green: #8ccf32;
    --ohb-green-dark: #5f8d22;
    --ohb-green-hover: #4c7319;
    --ohb-on-green: #ffffff;
    --ohb-cta: #0369a1;
    --ohb-cta-hover: #075985;
    --ohb-on-cta: #ffffff;
    --ohb-text: #0f2740;
    --ohb-muted: #334155;
    --ohb-canvas: #e8eef4;
    --ohb-surface: #ffffff;
    --ohb-light-blue: #d4e8f5;
    --ohb-light-green: #dcecc8;
    --ohb-tint: #edf3f8;
    --ohb-border: #b7c9d6;
    --ohb-shadow-soft: 0 2px 4px rgba(15, 39, 64, 0.06), 0 12px 28px rgba(15, 39, 64, 0.1);
    --ohb-footer-bg: #c5d6e3;
    --ohb-footer-bg-end: #c8d9cf;
    --ohb-footer-border: #9bb4c3;
    --ohb-footer-chip: rgba(255, 255, 255, 0.42);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Roboto", Arial, sans-serif;
    color: var(--ohb-text);
    background-color: var(--ohb-canvas);
    margin: 0;
}

.text-muted {
    color: var(--ohb-muted) !important;
}