/* Copied verbatim from brand/kit-r2/bin-wrangler/tokens.css (BBAOS-653 r2). Edit the kit, then re-copy. */
/* ==========================================================================
   BIN WRANGLER tokens (kit-r2, BBAOS-653, 2026-11-12)
   Western-premium: sage #91C498 sampled from Canva logo 8, charcoal, saddle
   leather, bone, with Curb cyan as a sparing spark. Sans-serif only.
   Ratios are WCAG 2.x contrast against the paired colour. Use: v2.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=Barlow:wght@400;500;600;700&display=swap");

:root {
  /* Sage */
  --bw-sage-100: #E7F2E8;  /* soft panels. charcoal 13.5:1 */
  --bw-sage-300: #B9DABD;
  --bw-sage-500: #91C498;  /* BRAND sage (logo 8 field). Big colour blocks; charcoal text on it 7.8:1. NOT text on bone */
  --bw-sage-700: #3E6B47;  /* AA text/links on bone 5.5:1, white on it 6.2:1 */
  --bw-sage-900: #2F5537;  /* primary button. white 8.5:1, on bone 7.5:1 */

  /* Leather + charcoal */
  --bw-charcoal:   #1E2622;  /* ink: headings + body. 13.7:1 on bone (AAA) */
  --bw-charcoal-soft: #4A4F4C; /* secondary text. 7.4:1 on bone */
  --bw-leather:    #5B3A26;  /* saddle leather: dark bands, stitched rules, badges. white 10.1:1, on bone 9.0:1 */
  --bw-leather-soft: #8A5A3A; /* tooling details, icons. 5.2:1 on bone */
  --bw-bone:       #F5F1E8;  /* page background */
  --bw-hide:       #EAE3D4;  /* alternate surface. charcoal 12.1:1 */
  --bw-white:      #FFFFFF;

  /* Cyan spark (shared with Curb Relief) */
  --bw-cyan:     #0CC0DF;    /* only on charcoal/leather (7.1:1 on charcoal) or as decoration. 2.0:1 on bone: never text there */
  --bw-cyan-700: #07758A;    /* if cyan text is needed on bone: 4.75:1 */

  /* Status */
  --bw-ok:    #2E6B3E;  /* 5.7:1 on bone */
  --bw-error: #B3261E;  /* 5.8:1 on bone */

  /* Semantic */
  --color-bg:        var(--bw-bone);
  --color-bg-alt:    var(--bw-hide);
  --color-surface:   var(--bw-white);
  --color-text:      var(--bw-charcoal);
  --color-text-soft: var(--bw-charcoal-soft);
  --color-accent:    var(--bw-sage-500);
  --color-link:      var(--bw-sage-700);
  --color-dark-band: var(--bw-charcoal);   /* bone text 13.7:1, sage 7.8:1, cyan 7.1:1 */
  --color-border:    #D9D0BE;

  /* Buttons */
  --btn-bg:          var(--bw-sage-900);   /* white text 8.5:1 */
  --btn-bg-hover:    var(--bw-charcoal);   /* bone text 13.7:1 */
  --btn-text:        var(--bw-white);
  --btn-alt-bg:      var(--bw-sage-500);   /* on charcoal bands: charcoal text 7.8:1 */
  --btn-alt-text:    var(--bw-charcoal);
  --focus-ring:      0 0 0 3px var(--bw-bone), 0 0 0 6px var(--bw-charcoal);

  /* Type: Archivo Expanded (wide, branded-iron feel, matches the wordmark) + Barlow (road-sign grotesk, easy body) */
  --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display-stretch: 125%;   /* use font-stretch: var(--font-display-stretch) on headings */
  --font-body:    "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking-caps: 0.14em;
  --text-body:  1.25rem;   /* 20px */
  --text-small: 1.125rem;  /* 18px floor */
  --text-lead:  clamp(1.375rem, 1.1rem + 1vw, 1.625rem);
  --text-h3:    clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  --text-h2:    clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
  --text-h1:    clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --weight-display: 700;
  --leading-body: 1.6;

  /* Shape + depth: tighter radii, stitched-leather rule */
  --radius:    10px;
  --radius-sm: 6px;
  --tap:       52px;
  --rule-stitch: 2px dashed var(--bw-leather-soft);
  --shadow-sm: 0 1px 2px rgba(30,38,34,.10), 0 2px 8px rgba(30,38,34,.06);
  --shadow-lg: 0 14px 34px rgba(30,38,34,.18), 0 2px 6px rgba(30,38,34,.10);

  /* Premium hover (brief rule 2) */
  --hover-dur:   200ms;
  --hover-ease:  cubic-bezier(.2,.7,.2,1);
  --hover-lift:  translateY(-4px);
  --hover-border: var(--bw-sage-500);
}
@media (prefers-reduced-motion: reduce) { :root { --hover-dur: 0ms; --hover-lift: none; } }