/* ==========================================================================
   THE DOUGHJO JA — TOKENS
   Built out of the logo: chunky rounded letters, warm brown and tan, a badge
   you could stamp on a paper bag. The page is made of big flat fields of the
   client's own colours at full strength — no tints, no pastels — so it reads
   as finished before a single photograph exists.
   ========================================================================== */

:root {

  /* --------------------------------------------- THE NINE, AT FULL STRENGTH */
  /* Every one of these is the client's supplied value, used as a ground in
     its own right rather than watered down into a tint. */
  --cream:    #f9f6f0;
  --caramel:  #bf7e46;
  --tan:      #d4a373;
  --brown:    #63442c;
  --forest:   #3e4a3d;
  --olive:    #626324;
  --olive-lt: #6c712d;
  --sage:     #8a9a86;
  --blush:    #ead7d0;

  /* Two shades of the brand brown, for ink and for the deepest ground. */
  --cocoa:    #30200f;   /* ink on every warm ground: 4.7:1 on caramel,
                            6.9:1 on tan, 14.9:1 on cream */
  --bark:     #241709;

  /* ------------------------------------------------------------------- INK */
  --ink:      #30200f;
  --ink-2:    #5c4428;   /* 7.2:1 on cream */
  --ink-3:    #6f5536;   /* 5.4:1 on cream */
  --on-dark:   #f9f6f0;
  --on-dark-2: #e3d5c0;
  --on-dark-3: #bda584;

  /* On caramel and tan the secondary ink is the cocoa softened, never grey. */
  /* On caramel there is no room for softened ink: anything under full
     strength drops below 4.5:1. Hierarchy on the warm grounds comes from
     weight and size, not from fading the text out. */
  --on-warm-2: #30200f;
  /* The caramel lifted until small text clears 4.5:1 on brown (4.9:1),
     forest (5.1:1) and cocoa (8.7:1). The anchor stays for fills. */
  --caramel-lt: #e0bb93;

  /* ------------------------------------------------------------- HAIRLINES */
  --rule-ink:  rgba(48, 32, 15, .22);
  --rule-ink-sf: rgba(48, 32, 15, .12);
  --rule-light: rgba(249, 246, 240, .28);
  --rule-light-sf: rgba(249, 246, 240, .14);

  /* ------------------------------------------------------------- TYPEFACES */
  /* Gabarito is the closest living face to the badge's own lettering:
     geometric, rounded, confident at weight. Hanken Grotesk is the warm
     humanist that carries the reading. Two faces, nothing else. */
  --display: 'Gabarito', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  /* A brush script for the headings that announce a section, and nothing
     else. It never carries a price, a product name, a button or a line of
     body copy: a script is harder to read than a grotesque, so it is used
     where there are a few large words and avoided where there are many
     small ones. */
  /* The display voice. Only the italic 500 is loaded, so every rule that
     reads this must set font-style: italic too - ask for normal and the
     face does not match and the text silently falls back to Gabarito. */
  --script: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --text:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ------------------------------------------------------------ TYPE SCALE */
  /* Big and sure of itself. The display sizes are posters, not headings. */
  /* Capped so the claim, the sub and both buttons clear the fold on a
     1280x800 laptop, which is the shortest desktop this audience uses. */
  --t-mega:   clamp(3.1rem, 6.6vw, 6.4rem);
  --t-hero:   clamp(2.6rem, 6.5vw, 5.75rem);
  --t-sect:   clamp(2.1rem, 4.6vw, 4rem);
  --t-sub:    clamp(1.35rem, 2vw, 1.85rem);
  --t-lead:   clamp(1.08rem, 1.3vw, 1.3rem);
  --t-body:   1.0625rem;
  --t-sm:     .9375rem;
  /* 13px read as too small on a phone for anything that is a sentence
     rather than a label, so the floor is 14px everywhere. */
  --t-xs:     .875rem;
  --t-mark:   .75rem;

  --lh-mega: .9;
  --lh-head: 1.04;
  --lh-body: 1.65;

  --tr-mega: -.035em;
  --tr-head: -.025em;
  --tr-mark: .14em;

  /* ----------------------------------------------------------------- SPACE */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;

  --gutter:  clamp(1.25rem, 4vw, 4rem);
  --section: clamp(4rem, 7.5vw, 7.5rem);
  --measure: 60ch;
  --shell:   88rem;
  --shell-narrow: 56rem;

  /* ----------------------------------------------------------------- FORM */
  /* The badge is a circle and the lettering is rounded, so the furniture is
     rounded too. This is the one place the brand asks for it. */
  --r-sm:   10px;
  --r-md:   18px;
  --r-lg:   28px;
  --r-pill: 999px;

  --lift:      0 2px 4px rgba(36, 23, 9, .06), 0 12px 32px rgba(36, 23, 9, .08);
  --lift-deep: 0 8px 20px rgba(36, 23, 9, .16), 0 40px 80px rgba(36, 23, 9, .24);

  /* --------------------------------------------------------------- MOTION */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --d-1: .2s;
  --d-2: .45s;
  --d-3: .8s;

  --z-nav: 60;
  --z-wa: 70;      /* over the page, under the basket drawer */
  --z-drawer: 90;
  --z-skip: 120;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-1: .01ms; --d-2: .01ms; --d-3: .01ms; }
}