/* ==========================================================================
   B.O.S. TRUCKING & SITE — DESIGN TOKENS
   --------------------------------------------------------------------------
   Every colour, type size and space value on the site resolves to a token
   declared here. Change a brand value once and it propagates everywhere.

   The yellow is sampled from the supplied logo artwork (assets/originals/
   IMG_0662.PNG), not guessed: #F8B804. The marketing flyers drift between
   #E8B004 and #FCD014; the logo is treated as the authority.

   Contrast ratios in the comments are measured, not estimated. Every text and
   UI pair used on the site clears WCAG 2.1 AA, and the primary pairs clear AAA.
   ========================================================================== */

:root {
  /* ---- Surfaces -------------------------------------------------------- */
  --bos-black: #0a0a0a;          /* page background                        */
  --bos-black-pure: #000000;     /* logo plate, footer floor               */
  --bos-surface-1: #141414;      /* cards, panels                          */
  --bos-surface-2: #1c1c1c;      /* inputs, raised rows                    */
  --bos-surface-3: #232323;      /* hover state on raised rows             */
  --bos-hairline: #2a2a2a;       /* dividers, card borders                 */
  --bos-hairline-strong: #3a3a3a;

  /* ---- Brand accent ---------------------------------------------------- */
  --bos-yellow: #f8b804;         /* 11.17:1 on --bos-black  -> AAA         */
  --bos-yellow-bright: #ffc933;  /* 12.87:1 on --bos-black  -> AAA (hover) */
  --bos-yellow-deep: #c98a00;    /* pressed, gradient low end              */
  --bos-yellow-ink: #8a6200;     /*  5.49:1 on white -> AA (print/email)   */
  --bos-yellow-wash: rgba(248, 184, 4, 0.09);
  --bos-yellow-edge: rgba(248, 184, 4, 0.28);

  /* ---- Text ------------------------------------------------------------ */
  --bos-white: #ffffff;          /* 19.80:1 on --bos-black  -> AAA         */
  --bos-text: #f5f5f4;           /* 18.15:1 on --bos-black  -> AAA         */
  --bos-text-muted: #b5b5b0;     /*  9.62:1 on --bos-black  -> AAA         */
  --bos-text-faint: #8a8a86;     /*  5.71:1 on --bos-black  -> AA          */
  --bos-on-yellow: #0a0a0a;      /* 11.17:1 on --bos-yellow -> AAA         */

  /* ---- Feedback -------------------------------------------------------- */
  --bos-error: #ff8f7a;          /*  8.32:1 on --bos-black                 */
  --bos-success: #7ee0a1;

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

  --fs-eyebrow: 0.8125rem;
  --fs-small: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-body-lg: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  --fs-h4: clamp(1.0625rem, 0.5vw + 1rem, 1.1875rem);
  --fs-h3: clamp(1.375rem, 1.2vw + 1.1rem, 1.75rem);
  --fs-h2: clamp(2rem, 3.4vw + 1rem, 3.25rem);
  --fs-h1: clamp(2.625rem, 6.4vw + 1rem, 5.25rem);
  --fs-price: clamp(2.5rem, 3.4vw + 1.6rem, 3.5rem);

  --lh-display: 0.94;
  --lh-tight: 1.15;
  --lh-body: 1.65;

  --ls-display: 0.005em;
  --ls-eyebrow: 0.14em;
  --ls-button: 0.06em;

  /* ---- Space (4px base) ------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --section-y: clamp(3.5rem, 7vw, 8rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container: 1200px;
  --measure: 68ch;

  /* ---- Form ------------------------------------------------------------ */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --clip-corner: 10px;   /* angular corner cut, echoes the logo hexagon */

  --header-h: 72px;
  --actionbar-h: 64px;

  --ring: 3px solid var(--bos-yellow-bright);
  --ring-offset: 2px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 320ms;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03),
                 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.05),
                 0 28px 56px -26px rgba(0, 0, 0, 0.95);

  /* Dark scrim applied over every photograph so overlaid text always sits on
     at least a 0.72 alpha field. This is also what keeps today's screenshot
     sourced imagery looking intentional rather than soft. */
  --photo-scrim: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.97) 0%,
    rgba(10, 10, 10, 0.86) 22%,
    rgba(10, 10, 10, 0.55) 55%,
    rgba(10, 10, 10, 0.72) 100%
  );
  --photo-scrim-card: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.88) 0%,
    rgba(10, 10, 10, 0.25) 60%,
    rgba(10, 10, 10, 0.1) 100%
  );
}

@media (min-width: 900px) {
  :root {
    --header-h: 84px;
  }
}