/* ==========================================================================
   DUSTYWALKS77 — DESIGN TOKENS
   Every color, size, and timing value the site uses lives here.
   Change a value here and it updates everywhere. Do not hardcode hex codes
   in the other stylesheets.

   Colors are sampled from the original Dustywalks77 artwork drawn by
   Dusty's daughter (assets/img/dustywalks77-artwork.jpg).
   ========================================================================== */

:root {
  /* ---- Brand colors (straight from the artwork) ----------------------- */
  --c-sky:        #43a7d7;  /* sky blue   — primary brand color           */
  --c-grass:      #2caf5d;  /* grass green — secondary brand color        */
  --c-charcoal:   #101419;  /* near-black — structure + body type          */
  --c-sun:        #ffe51c;  /* sun yellow — highlight, used sparingly      */
  --c-orange:     #f45a2a;  /* cap orange — accent, used sparingly         */
  --c-purple:     #4a32b5;  /* "COOL GUY" purple — accent, used sparingly  */
  --c-white:      #f7fafc;  /* soft white — page background                */
  --c-cloud:      #d7e9f7;  /* cloud tint pulled from the artwork          */

  /* ---- Accessible text variants ---------------------------------------
     The raw brand blues/greens do NOT hit 4.5:1 against white, so they are
     never used for text. These darkened versions are. Keep it that way. */
  --c-sky-ink:    #10607f;  /* 6.1:1 on --c-white                          */
  --c-grass-ink:  #14713c;  /* 5.9:1 on --c-white                          */
  --c-orange-ink: #b53507;  /* 5.4:1 on --c-white                          */
  --c-purple-ink: #3d29a0;  /* 9.4:1 on --c-white                          */

  /* ---- Neutrals -------------------------------------------------------- */
  --c-ink:        var(--c-charcoal);
  --c-ink-soft:   #414a55;  /* 8.4:1 on --c-white — secondary body copy    */
  --c-ink-faint:  #5c6672;  /* 5.4:1 on --c-white — captions, meta         */
  --c-line:       #dbe3ea;
  --c-surface:    #ffffff;
  --c-surface-2:  #eef4f9;

  /* ---- Dark sections (footer, contact band) ---------------------------- */
  --c-dark-bg:     #0c1015;
  --c-dark-sub:    #171d25;
  --c-dark-line:   #2a323d;
  --c-dark-text:   #e8eef4;
  --c-dark-faint:  #9aa7b4;

  /* ---- Type ------------------------------------------------------------ */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale — clamp() so nothing needs breakpoint overrides. */
  --t-xs:   0.8125rem;                              /* 13px  meta/labels   */
  --t-sm:   0.9375rem;                              /* 15px  small copy    */
  --t-base: 1.0625rem;                              /* 17px  body          */
  --t-lg:   clamp(1.125rem, 0.5vw + 1rem,  1.3125rem);
  --t-xl:   clamp(1.375rem, 1vw   + 1.1rem, 1.75rem);
  --t-2xl:  clamp(1.75rem,  2vw   + 1.2rem, 2.5rem);
  --t-3xl:  clamp(2.125rem, 3.4vw + 1.2rem, 3.5rem);
  --t-4xl:  clamp(2.75rem,  6.5vw + 0.8rem, 5.75rem);

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  /* ---- Spacing (8px 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;

  /* Vertical rhythm between major page sections */
  --section-y: clamp(3.5rem, 7vw, 7rem);

  /* ---- Layout ---------------------------------------------------------- */
  --wrap:        76rem;   /* 1216px standard content width */
  --wrap-narrow: 46rem;   /*  736px reading width          */
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --header-h:    4.5rem;

  /* ---- Radii ----------------------------------------------------------
     Deliberately soft + slightly uneven in places, so cards feel drawn
     rather than stamped out by a corporate template. */
  --r-sm:  0.5rem;
  --r-md:  0.875rem;
  --r-lg:  1.5rem;
  --r-xl:  2rem;
  --r-pill: 999px;
  --r-organic:      1.75rem 2.25rem 1.5rem 2rem / 2rem 1.5rem 2.25rem 1.75rem;
  --r-organic-alt:  2.25rem 1.5rem 2rem 1.75rem / 1.5rem 2rem 1.75rem 2.25rem;

  /* ---- Shadows --------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(16, 20, 25, 0.06), 0 2px 6px rgba(16, 20, 25, 0.05);
  --sh-md: 0 2px 4px rgba(16, 20, 25, 0.05), 0 10px 26px rgba(16, 20, 25, 0.08);
  --sh-lg: 0 4px 8px rgba(16, 20, 25, 0.05), 0 24px 56px rgba(16, 20, 25, 0.12);

  /* ---- Motion ---------------------------------------------------------- */
  --e-out:   cubic-bezier(0.22, 0.9, 0.28, 1);
  --e-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast:  140ms;
  --d-base:  240ms;
  --d-slow:  620ms;

  /* ---- Focus ring (never remove this) ---------------------------------- */
  --focus: 3px solid var(--c-purple);
  --focus-offset: 3px;
}

/* Anyone who asks for less motion gets less motion. Enforced globally in
   base.css; this token lets components opt into a "static" variant too. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d-base: 1ms;
    --d-slow: 1ms;
  }
}