/* ==========================================================================
   Design tokens
   Loaded before every other theme stylesheet. Section stylesheets consume
   these; they must not define colour literals of their own.
   ========================================================================== */

:root {
    /* ---------- Brand orange ----------
       #f26622 on white is 3.1:1, under the 4.5:1 WCAG AA floor for text below
       18.66px. It stays the accent on dark backgrounds, on rules and on bars,
       where it clears AA comfortably. Small orange text on light uses
       --bc-orange-ink (4.9:1), and solid buttons carrying white text use
       --bc-btn (4.9:1), same hue. */
    --bc-orange:        #f26622;
    --bc-orange-ink:    #c2490f;
    --bc-orange-tint:   rgba(242, 102, 34, 0.08);

    /* Small orange text over a photo. #f26622 only reaches ~3.7:1 against a
       dimmed photo; this lifts it past 4.5:1 without changing the hue read. */
    --bc-orange-on-photo: #ff8c42;

    --bc-btn:           #c2490f;
    --bc-btn-hover:     #a33d0c;

    /* ---------- Neutrals ---------- */
    --bc-ink:           #1a1a1d;
    --bc-ink-deep:      #141416;
    --bc-ink-deepest:   #0d0d0f;
    --bc-body:          #4a4a50;
    --bc-muted:         #6b6b70;
    --bc-faint:         #8a8a8f;

    --bc-surface:       #ffffff;
    --bc-surface-alt:   #f5f5f5;
    --bc-line:          #e5e5e5;
    --bc-field-line:    #d8d8dc;
    --bc-error:         #b3261e;

    /* ---------- Ink on dark backgrounds ---------- */
    --bc-on-dark:       #ffffff;
    --bc-on-dark-70:    rgba(255, 255, 255, 0.7);
    --bc-on-dark-55:    rgba(255, 255, 255, 0.55);
    --bc-on-dark-30:    rgba(255, 255, 255, 0.3);
    --bc-on-dark-20:    rgba(255, 255, 255, 0.2);
    --bc-on-dark-10:    rgba(255, 255, 255, 0.1);

    /* Diagonal hatch laid over dark photo panels. */
    --bc-hatch:         repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 14px);

    /* ---------- Type ---------- */
    --bc-font:          'Montserrat', sans-serif;
    --bc-font-body:     'Open Sans', sans-serif;

    /* ---------- Layout ---------- */
    --bc-content-max-width: 1208px;
    --bc-content-width:     80%;
    --bc-radius:            4px;
    --bc-focus-ring:        3px;
}