/* =========================================================================
   Design tokens — the ONLY file a new client theme needs to change.

   Colours, fonts, radius and spacing used by site.css and the section
   partials. Override these values (or load a client file after this one)
   to re-brand the whole front end. Bootstrap variables are mapped below so
   buttons, links and forms follow the same palette.
   ========================================================================= */

:root {
    /* Brand */
    --site-primary: #0a8c8c;
    --site-primary-rgb: 10, 140, 140;
    --site-primary-dark: #0C5B72;
    --site-primary-contrast: #ffffff;
    --site-accent: #f5a623;
    --site-accent-hover: #e09410;
    --site-teal-light: #1ab5b5;
    --site-cyan-accent: #1adede;

    /* Neutrals */
    --site-text: #2d3748;
    --site-muted: #6b7280;
    --site-heading: #0c1f35;
    --site-bg: #ffffff;
    --site-surface: #f8fafc;
    --site-surface-alt: #eef2f7;
    --site-dark: #0c1f35;
    --site-dark-text: rgba(255, 255, 255, 0.85);
    --site-border: #e5e7eb;

    /* Typography (add the matching Google Fonts link in layouts/app if changed) */
    --site-font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --site-font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --site-heading-weight: 800;
    --site-font-size: 1.05rem;
    --site-line-height: 1.65;

    /* Shape & spacing */
    --site-radius: .5rem;
    --site-radius-lg: 1rem;
    --site-shadow: 0 10px 30px rgba(15, 23, 42, .08);
    --site-section-y: clamp(3.5rem, 7vw, 6rem);
    --site-container: 1200px;
    --site-header-height: 76px;

    /* Bootstrap mapping */
    --bs-primary: var(--site-primary);
    --bs-primary-rgb: var(--site-primary-rgb);
    --bs-link-color: var(--site-primary);
    --bs-link-color-rgb: var(--site-primary-rgb);
    --bs-link-hover-color: var(--site-primary-dark);
    --bs-body-font-family: var(--site-font-body);
    --bs-body-color: var(--site-text);
    --bs-body-bg: var(--site-bg);
    --bs-border-color: var(--site-border);
    --bs-border-radius: var(--site-radius);
}
