/*
 * KZN Builders Association — design tokens.
 * Change brand colours, fonts and radii here only; all other CSS references these variables.
 */
:root {
    /* Brand */
    --color-brand: #e9f24b;          /* logo lime-yellow: buttons, highlights (always with dark text) */
    --color-brand-hover: #d9e335;    /* hover/active state of brand buttons */
    --color-brand-soft: #f8fbd0;     /* tinted backgrounds */
    --color-accent: #1d7fc4;         /* logo stripe blue: links on light backgrounds */
    --color-accent-hover: #155f93;

    /* Neutrals */
    --color-ink: #151821;            /* header, footer, dark sections */
    --color-ink-2: #1f2330;          /* raised surfaces on dark sections */
    --color-ink-3: #2c3142;          /* borders on dark sections */
    --color-text: #1d2230;           /* body text on light backgrounds */
    --color-text-muted: #5b6273;
    --color-text-on-dark: #ffffff;
    --color-text-on-dark-muted: #b7bcc9;
    --color-surface: #ffffff;
    --color-surface-muted: #f4f5f1;  /* alternating light sections */
    --color-border: #e1e4ea;

    /* States */
    --color-success: #1e7e45;
    --color-success-bg: #e6f5ec;
    --color-danger: #b42318;
    --color-danger-bg: #fdecea;
    --color-focus: #1d7fc4;

    /* Typography */
    --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-heading: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;

    /* Shape & depth */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(21, 24, 33, .08);
    --shadow: 0 10px 30px rgba(21, 24, 33, .10);

    /* Layout */
    --header-height: 76px;
    --section-space: clamp(3rem, 7vw, 5.5rem);

    /* Bootstrap mapped to the same tokens */
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-surface);
    --bs-link-color: var(--color-accent);
    --bs-link-color-rgb: 29, 127, 196;
    --bs-link-hover-color: var(--color-accent-hover);
    --bs-link-hover-color-rgb: 21, 95, 147;
    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius-sm);
    --bs-form-invalid-color: var(--color-danger);
    --bs-form-invalid-border-color: var(--color-danger);
    --bs-form-valid-border-color: var(--color-success);
}