/* ==========================================================================
   The Barking Barrel — design tokens
   Source of truth: resources/brand-resources/colors-fonts.md
   ========================================================================== */

:root {
    /* ---------------------------------------------------------------------
       Colour — brand palette, verbatim from the style guide
       --------------------------------------------------------------------- */

    --bb-cream: #f7f2e7;         /* page background */
    --bb-cream-card: #fffdf8;    /* raised surfaces */
    --bb-cream-deep: #ede6d6;    /* nav / footer ground */

    --bb-border: #eadfc6;
    --bb-border-strong: #e4d9be;
    --bb-border-stronger: #dcd1b8;

    --bb-sage: #85a384;
    --bb-sage-dark: #607c5f;

    --bb-tan: #c79868;
    --bb-tan-dark: #a97c4f;

    --bb-brown: #5b4632;         /* body text */
    --bb-brown-muted: #74604a;
    --bb-brown-soft: #8a7a63;
    --bb-brown-faint: #a6957d;

    /* ---------------------------------------------------------------------
       Colour — accessibility additions

       The palette as given cannot produce an AA-compliant small-text button.
       Measured against WCAG 2.1:

         white on --bb-sage-dark  #6E8C6C  3.73:1   fails AA (needs 4.5)
         white on --bb-tan-dark   #A97C4F  3.70:1   fails AA
         --bb-sage-dark on cream           3.34:1   large text only
         --bb-sage      on cream           2.32:1   decorative only

       So the two "ink" tokens below are darkened until they pass, and they
       are what solid buttons and small coloured text use. The original hues
       stay exactly as specified for large display type, icons and ornament,
       where 3:1 is the bar and they meet it.
       --------------------------------------------------------------------- */

    --bb-sage-ink: #85a384;      /* 5.04:1 on white · 4.51:1 on cream */
    --bb-tan-ink: #8a6440;       /* 5.28:1 on white · 4.73:1 on cream */

    /* Semantic aliases — components reference these, not raw hues. */
    --bb-text: var(--bb-brown);
    --bb-text-muted: var(--bb-brown-muted);
    --bb-heading: var(--bb-sage-ink);
    --bb-link: var(--bb-sage-ink);
    --bb-link-hover: var(--bb-tan-ink);
    --bb-focus: var(--bb-sage-ink);

    /* ---------------------------------------------------------------------
       Type

       Retrokia Caps is the logo face. It is commercial and licensed for the
       mark only, so it is never loaded as a webfont — the wordmark ships as
       artwork and headings use Baloo 2.
       --------------------------------------------------------------------- */

    --bb-font-display: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
    --bb-font-script: "Caveat", "Brush Script MT", cursive;
    --bb-font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Fluid scale. clamp() keeps headings proportionate between 360px and
       1400px without a cascade of breakpoint overrides. */
    --bb-text-xs: 0.8125rem;   /* 13px */
    --bb-text-sm: 0.875rem;    /* 14px */
    --bb-text-base: 1rem;      /* 16px */
    --bb-text-lg: 1.125rem;
    --bb-text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --bb-text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.9rem);
    --bb-text-3xl: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem);
    --bb-text-4xl: clamp(2.3rem, 1.7rem + 3vw, 3.6rem);
    --bb-text-script: clamp(1.6rem, 1.3rem + 1.4vw, 2.15rem);

    --bb-leading-tight: 1.15;
    --bb-leading-snug: 1.35;
    --bb-leading-normal: 1.65;

    /* ---------------------------------------------------------------------
       Space — 4px base
       --------------------------------------------------------------------- */

    --bb-space-1: 0.25rem;
    --bb-space-2: 0.5rem;
    --bb-space-3: 0.75rem;
    --bb-space-4: 1rem;
    --bb-space-5: 1.5rem;
    --bb-space-6: 2rem;
    --bb-space-7: 3rem;
    --bb-space-8: 4rem;
    --bb-space-9: 6rem;

    --bb-section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);

    /* ---------------------------------------------------------------------
       Shape

       Noticeably rounder than Bootstrap's defaults. The mark is a barrel
       full of bubbles — every shape in it is a curve — so soft radii are
       what stop the page reading as a stock template.
       --------------------------------------------------------------------- */

    --bb-radius-sm: 0.5rem;
    --bb-radius: 0.875rem;
    --bb-radius-lg: 1.25rem;
    --bb-radius-xl: 1.75rem;
    --bb-radius-pill: 999px;

    /* ---------------------------------------------------------------------
       Elevation — warm brown shadows, not neutral grey. Grey shadows over a
       cream ground read as dirt.
       --------------------------------------------------------------------- */

    --bb-shadow-sm: 0 1px 2px rgb(91 70 50 / 0.06), 0 2px 6px rgb(91 70 50 / 0.05);
    --bb-shadow: 0 2px 4px rgb(91 70 50 / 0.06), 0 8px 20px rgb(91 70 50 / 0.08);
    --bb-shadow-lg: 0 4px 8px rgb(91 70 50 / 0.07), 0 18px 40px rgb(91 70 50 / 0.11);
    --bb-shadow-focus: 0 0 0 0.22rem rgb(90 118 88 / 0.35);

    /* ---------------------------------------------------------------------
       Motion
       --------------------------------------------------------------------- */

    --bb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --bb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --bb-duration-fast: 160ms;
    --bb-duration: 280ms;
    --bb-duration-slow: 560ms;

    --bb-nav-height: 4.5rem;
}

/* Honour the OS setting globally. Individual components still opt out of
   their own effects, but this catches anything that slips through. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --bb-duration-fast: 0.01ms;
        --bb-duration: 0.01ms;
        --bb-duration-slow: 0.01ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}