/* ALLIN MAKI · tokens
   Apron's system (getapron.com, measured 2026-09-03), re-keyed to alpaca fleece.
   Every role below exists on Apron with the value noted in the comment.
   The alpaca value replaces only the hue family; scale, weights, radii and
   motion timings are Apron's own numbers. */

:root {
  /* ---- Colour: ink and paper ------------------------------------------- */
  --ink:            #000000;               /* Apron black #000 */
  --paper:          #FDFBF6;               /* Apron page ground #FFFEF9 */
  --white:          #FFFFFF;

  /* ---- Colour: the accent family (Apron marigold → alpaca fawn) --------- */
  --accent:         #E4B46F;               /* #FFD801 primary */
  --accent-hover:   #D9A65C;               /* #FFCA28 hover */
  --accent-active:  #CD9848;               /* #FFB800 active */

  /* ---- Colour: status ---------------------------------------------------
     Not from Apron: the reference has no status colour, because it never has
     to say a claim was met. Sampled from the swatch Ingmar picked, 04-09-2026.
     This is a fill, meant to sit behind pale text, which is why it is lighter
     than the --pass in css/order.css: that one is a foreground on a pale tint
     and has to be dark. Two roles, two values, one meaning. */
  --pass-fill:      #0F8C73;

  /* ---- Colour: the tint family (Apron buttercream → pale fleece) -------- */
  --tint:           #F3E6CF;               /* #FBEFAF header, CTA band */
  --tint-card:      #F8EFDF;               /* #FFF6D4 folding card at rest */
  --tint-fold-b:    #EBD5AE;               /* #F9EA9F second fold target */
  --tint-deep:      #F3E6CF;               /* #FDF5CF card colour-scheme */

  /* ---- Colour: alpha scale (Apron, unchanged) --------------------------- */
  --ink-a05: rgba(0,0,0,.05);
  --ink-a10: rgba(0,0,0,.10);
  --ink-a15: rgba(0,0,0,.15);
  --ink-a20: rgba(0,0,0,.20);
  --ink-a30: rgba(0,0,0,.30);
  --ink-a40: rgba(0,0,0,.40);
  --ink-a60: rgba(0,0,0,.60);              /* hero overlay */
  --ink-a70: rgba(0,0,0,.70);
  --ink-a80: rgba(0,0,0,.80);
  --white-a15: rgba(255,255,255,.15);
  --white-a30: rgba(255,255,255,.30);
  --white-a60: rgba(255,255,255,.60);
  --white-a80: rgba(255,255,255,.80);

  /* ---- Colour: the fleece scale (product colours, not decoration) ------- */
  /* light to dark in the order the range runs (16 September 2026): Sahara is
     the mix between Ivory White and Blond, Sandstone between Blond and Hazelnut */
  --fleece-ivory:     #EDE6DA;
  --fleece-sahara:    #E4D5BD;
  --fleece-blond:     #DCC9A8;
  --fleece-sandstone: #BE9A70;
  --fleece-hazelnut:  #A2764F;
  --fleece-caramel:   #90613A;
  --fleece-walnut:    #6E4A2E;
  --fleece-cacao:     #563824;
  --fleece-chocolate: #43291B;
  --fleece-obsidian:  #241E1A;

  /* ---- Type families ---------------------------------------------------- */
  /* "Champ fallback" is Arial cut to Champ's measurements, declared in
     base.css. It stands between Champ and the rest so that the swap, when it
     comes, does not move the page. See the note there. */
  --font-display: "Champ", "Champ fallback", "Bricolage Grotesque", Arial, sans-serif;
  --font-body:    "DM Sans", "DM Sans fallback", Arial, sans-serif;
  --font-mono:    "DM Mono", monospace;

  /* ---- Spacing scale (Apron space tokens 8x..9j) ------------------------ */
  --s-0: 0px;  --s-2: 2px;  --s-4: 4px;  --s-6: 6px;  --s-8: 8px;  --s-10: 10px;
  --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-28: 28px; --s-30: 30px;
  --s-32: 32px; --s-36: 36px; --s-40: 40px; --s-48: 48px; --s-54: 54px; --s-56: 56px;
  --s-64: 64px; --s-80: 80px; --s-96: 96px; --s-120: 120px; --s-128: 128px;

  /* ---- Radius ----------------------------------------------------------- */
  --r-4: 4px; --r-8: 8px; --r-16: 16px; --r-20: 20px; --r-22: 22px; --r-32: 32px;
  --r-pill: 9999px;

  /* ---- Shadow (Apron uses exactly two on the home page) ----------------- */
  --shadow-frame: 0px 18.772px 37.543px rgba(93, 56, 0, 0.10);   /* collage photos */
  --shadow-drop:  0px 4px 4px rgba(0, 0, 0, 0.15);               /* stamp drop-shadow */
  --shadow-card:  0px 4px 12px rgba(70, 58, 0, 0.10);            /* carousel blog card */

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1360px;
  /* The content width, as one number rather than the nine copies of 1050px
     that were spread across four stylesheets. 1050 is Apron's folding-card
     stack and it became the width of everything, so the body of every inner
     page ran 147px narrower than its own hero and its own footer at 1440, and
     310px narrower at 1920. It steps twice, and it stops at 1240: js/main.js
     reads --fold-step and --fold-slide off the stack and the sticky pinning is
     calibrated against it.

     This widens boxes. It does not widen a single measure: every cap on a line
     of running text stays exactly where it was, because a wider box and a
     longer line are two different decisions and only one of them was wrong. */
  --stack-w: 1050px;
  --gutter: 48px;                          /* 24px below 768 */
  --header-h: 92px;                        /* 64px below 1150 */
  --banner-h: 40px;

  /* ---- Motion ----------------------------------------------------------- */
  --t-fast: 0.13s;                         /* collapsible open/close */
  --t-hover: 0.3s;                         /* button background + border */
  --t-link: 0.2s;                          /* text link background */
  --t-menu: 0.15s;                         /* menu fade */
  --t-bg: 0.5s;                            /* html background */
  --t-media: 1s;                           /* carousel picture opacity */
  --marquee-duration: 60s;
  --ease-io: ease-in-out;
}

@media (min-width: 1360px) { :root { --stack-w: 1160px; } }
@media (min-width: 1600px) { :root { --stack-w: 1240px; } }

@media (max-width: 767px) {
  :root { --gutter: 24px; }
}
@media (max-width: 1149px) {
  :root { --header-h: 64px; }
}