/*
 * Fin Rescue – design tokens (single source of brand colours, fonts and shape).
 * Colours are the existing Fin Rescue brand colours from the logo and the previous website.
 * Change the brand here only; components reference these variables.
 */
:root {
    /* Brand */
    --fr-navy: #02283f;          /* primary dark – header, footer, headings */
    --fr-navy-light: #033454;    /* hover/secondary dark surfaces */
    --fr-blue: #0a89c0;          /* primary action colour (buttons, links) */
    --fr-blue-dark: #07709e;     /* hover/active for primary actions */
    --fr-teal: #338dab;          /* secondary accent from the logo rings */
    --fr-steel: #336699;         /* "Rescue" logo blue */
    --fr-green: #8bc902;         /* highlight accent (used sparingly) */
    --fr-green-dark: #5e8a00;    /* accessible green for text on white */

    /* Neutrals */
    --fr-ink: #1b2a36;           /* body text */
    --fr-muted: #52606d;         /* secondary text */
    --fr-border: #dde4ea;
    --fr-surface: #f4f7fa;       /* light section background */
    --fr-white: #ffffff;

    /* Status */
    --fr-success-bg: #e8f6ec;
    --fr-success-text: #1e6b34;
    --fr-error-bg: #fdecec;
    --fr-error-text: #a12222;
    --fr-info-bg: #e7f4fa;

    /* Typography */
    --fr-font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Shape & depth */
    --fr-radius: 10px;
    --fr-radius-lg: 16px;
    --fr-shadow-sm: 0 2px 8px rgba(2, 40, 63, 0.06);
    --fr-shadow: 0 10px 30px rgba(2, 40, 63, 0.10);

    /* Bootstrap mapping */
    --bs-body-font-family: var(--fr-font);
    --bs-body-color: var(--fr-ink);
    --bs-link-color: var(--fr-blue-dark);
    --bs-link-color-rgb: 7, 112, 158;
    --bs-link-hover-color: var(--fr-navy);
    --bs-link-hover-color-rgb: 2, 40, 63;
    --bs-primary: var(--fr-blue);
    --bs-primary-rgb: 10, 137, 192;
    --bs-border-radius: var(--fr-radius);
    --bs-focus-ring-color: rgba(10, 137, 192, 0.35);
}