/* ==========================================================
   tokens.css
   Single source of truth.

   --accent / --accent-deep / --accent-ink are rewritten at
   runtime by js/swatch.js. Everything downstream inherits.
   ========================================================== */

:root {

  /* ---- base ------------------------------------------------
     A cool green-grey paper. Deliberately not warm cream:
     the photographs carry the warmth, the page stays out of
     their way.                                                */
  --paper:        #E8EBE6;
  --paper-2:      #F2F4F0;
  --paper-3:      #DCE0DA;
  --ink:          #16181C;
  --ink-2:        #1E2126;
  --ink-3:        #2C3037;
  --line:         #C6CAC2;
  --muted:        #565C61;
  --muted-dark:   #979DA3;

  /* ---- stage tints, one per day of the job ---------------- */
  --tint-prep:    #E8EAE5;
  --tint-first:   #F0E7E6;
  --tint-wood:    #E7EAE2;
  --tint-second:  #F1E7E0;
  --tint-done:    #E4E9E4;

  /* ---- dynamic accent ------------------------------------- */
  --accent:       #35513F;
  --accent-deep:  #263A2D;
  --accent-ink:   #FFFFFF;

  /* ---- type -----------------------------------------------
     Archivo Expanded heavy for statements, Newsreader for
     narrative. A serif reading face is unusual on a trade
     site and it is the point: this section is a story about
     someone being in your house, not a spec sheet.           */
  --font-display: 'Archivo', 'Helvetica Neue', sans-serif;
  --font-read:    'Newsreader', Georgia, serif;
  --font-mono:    'Martian Mono', ui-monospace, monospace;

  --step--1: clamp(0.8rem, 0.78rem + 0.12vw, 0.88rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.2vw, 1.15rem);
  --step-1:  clamp(1.2rem, 1.08rem + 0.6vw, 1.55rem);
  --step-2:  clamp(1.5rem, 1.25rem + 1.2vw, 2.2rem);
  --step-3:  clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --step-4:  clamp(2.6rem, 1.7rem + 4.4vw, 5rem);
  --step-5:  clamp(3.2rem, 1.5rem + 8vw, 8.5rem);

  /* ---- spacing --------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;
  --sp-4: 1rem;    --sp-5: 1.5rem;  --sp-6: 2rem;
  --sp-7: 3rem;    --sp-8: 4rem;    --sp-9: 6rem;  --sp-10: 9rem;

  --max-w: 1320px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 10px;

  --shadow-sm: 0 2px 10px rgba(22,24,28,.07);
  --shadow:    0 18px 44px rgba(22,24,28,.14);
  --shadow-lg: 0 40px 90px rgba(22,24,28,.3);

  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --dur-fast: 180ms;
  --dur:      460ms;
  --repaint:  760ms;
}

/* the roller pass when a colour changes */
body, .btn, .chip, .swatch-strip, .day, .panel,
.marquee, .footer, .filter-btn, .form-field input,
.form-field textarea {
  transition:
    background-color var(--repaint) var(--ease),
    border-color var(--repaint) var(--ease),
    color var(--repaint) var(--ease);
}