/* ============================================================================
   WALTER NORTH ADELAIDE — WEB DESIGN TOKENS
   ----------------------------------------------------------------------------
   Read off the LIVE site's resolved computed styles on 29/07/26 at 1440px and
   390px (not copied from a spec, not read from source CSS). These are what the
   site actually renders.

   Import this FIRST in any Walter web surface.

   ⚠ SCOPE LAW: this governs WEB surfaces only. The PRINT Style Guide (job 2324)
   is a different system and the two diverge deliberately — the built site
   re-tuned the print palette warm. Styling a web surface from the print guide is
   the exact error that made downsizer calculator v1 off-brand.
   No #121B21 "Walter Black". No cool greys. No green. No tracked uppercase.
   ============================================================================ */

:root {
  /* --- root ------------------------------------------------------------- */
  /* The site sets html { font-size: 62.5% } so 1rem = 10px. Every rem value
     below is therefore rem × 10 = px. Keep this or every size shifts.        */
  --root-font-size: 62.5%;
  --content-width: 148rem;              /* 1480px */

  /* --- colour: warm end to end ------------------------------------------ */
  --primary:               #4E2A0A;     /* deep bronze-brown. BODY TEXT + dark bands */
  --primary-hover:         #5a300c;
  --primary-dark:          #713c0f;     /* focus ring on primary buttons */
  --primary-light:         #f6d7bb;     /* warm highlight tint */
  --primary-ultra-light:   #fcf2e8;     /* text on primary; light warm plane */
  --primary-trans-50:      rgba(78, 42, 10, 0.5);   /* hero image overlay */
  --primary-trans-60:      rgba(78, 42, 10, 0.6);

  --secondary:             #cbc8c4;     /* warm stone. Section bands, form fill */
  --secondary-hover:       #e7e6e4;
  --secondary-light:       #dbd9d6;
  --secondary-ultra-light: #f3f2f1;     /* quiet plane */
  --secondary-semi-light:  #aba6a0;
  --secondary-dark:        #44403c;

  --base:                  #482B11;     /* HEADING colour + footer ground */
  --accent:                #dedede;     /* hero headline only */
  --neutral:               #CBC8C5;
  --action-light:          #d9d8d9;     /* footer legal links */
  --white:                 #fff;
  --black:                 #000;

  --body-color:            var(--primary);
  --body-bg-color:         var(--white);
  --heading-color:         var(--base);

  /* The ONE sanctioned addition, scoped to the calculator. Expresses a
     shortfall/negative state; no ACSS token covers it. 8.9:1 on white.       */
  --w-alert:               #7A2E1E;

  /* --- type ------------------------------------------------------------- */
  --heading-font-weight: 500;           /* NEVER 300. 300 reads thin + generic */
  --font-display: "aviano-didone", "Didot", "Bodoni MT", Georgia, serif;
  --font-body:    "acumin-variable", "Helvetica Neue", Arial, sans-serif;

  /* Body is a CONSTANT 24px at every viewport — verified 1440px AND 390px.  */
  --text-m:  2.4rem;                    /* 24px — THE body size */
  --text-xs: 1.5rem;                    /* 15px — fine print floor */
  --text-l:  clamp(2.88rem, calc(0.3069230769vw + 2.7817846154rem), 3.1992rem);

  /* ⚠ --text-s IS BROKEN IN ACSS: clamp(2.5rem, …, 1.5rem) has min > max, so
     CSS returns the MIN and it pins at 25px at EVERY viewport — larger than
     the 24px body it is meant to sit under. Do not use --text-s. Use 1.5rem
     literal for fine print. Root fix belongs in the ACSS config, site-wide.  */
  --text-s-BROKEN: clamp(2.5rem, calc(-0.9615384615vw + 2.8076923077rem), 1.5rem);

  --h1: 2.6rem;                                                            /* 26px */
  --h2: clamp(3.456rem, calc(0.7774361538vw + 3.2072204308rem), 4.2645336rem); /* 34.6 → 42.6px */
  --h3: clamp(2.3rem, calc(0.1923076923vw + 2.2384615385rem), 2.5rem);     /* 23 → 25px */
  --h4: 2.4rem;                                                            /* 24px */
  --h5: clamp(2rem, calc(-0.1918748918vw + 2.0613999654rem), 1.8004501125rem); /* 20 → 18px */

  --h1-line-height: 1.2;
  --h2-line-height: 1.2;
  --h3-line-height: 1.2;
  --body-line-height: calc(6px + 2.2ex);

  /* --- space ------------------------------------------------------------ */
  --space-xxl: clamp(4.737186074rem, calc(1.9353980058vw + 4.1178587122rem), 6.75rem);  /* → 67.5px */
  --space-xl:  clamp(3.553778rem, calc(0.9098288462vw + 3.2626327692rem), 4.5rem);      /* → 45px */
  --space-l:   clamp(2.666rem, calc(0.3211538462vw + 2.5632307692rem), 3rem);           /* → 30px */
  --space-m:   2rem;                                                                    /* 20px */
  --space-s:   clamp(1.5003750938rem, calc(-0.1606170773vw + 1.5517725585rem), 1.3333333333rem);
  --space-xs:  clamp(1.125562711rem, calc(-0.2275709828vw + 1.1983854255rem), 0.8888888889rem);
  --section-padding-x: clamp(2.4rem, calc(0.5769230769vw + 2.2153846154rem), 3rem);

  /* --- shape ------------------------------------------------------------ */
  --btn-radius: 0;                      /* NOTHING on this site is rounded */
  --btn-border-radius: 0;
  --focus-color: #4E2A0A;
  --focus-width: 0.2rem;
  /* Shadows: none used anywhere. Do not introduce any. */
}

/* ============================================================================
   BASE — the voice
   ============================================================================ */
html { font-size: var(--root-font-size); }

body {
  font-family: var(--font-body);
  /* The condensed voice. Setting font-family ALONE renders FULL-WIDTH Acumin —
     you must also set the width axis or the page speaks two widths at once.  */
  font-stretch: 67.5%;
  font-variation-settings: "wght" 300, "wdth" 67.5, "slnt" 0;
  font-size: var(--text-m);             /* 24px */
  line-height: var(--body-line-height);
  color: var(--body-color);
  background-color: var(--body-bg-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--heading-font-weight);   /* 500 */
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--heading-color);
  text-transform: lowercase;            /* the site's section-heading idiom */
}

/* ============================================================================
   COMPONENTS — the site's real recipes
   ============================================================================ */

/* The signature control: stone fill, dotted brown underline, 20px condensed,
   placeholder at FULL strength (not dimmed). The 1px dotted #4E2A0A underline
   is the site's ONLY line treatment.                                         */
.w-field {
  background: var(--secondary);
  border: 0;
  border-bottom: 1px dotted var(--primary);
  border-radius: 0;
  padding: .5rem 1rem;
  font-family: var(--font-body);
  font-stretch: 67.5%;
  font-size: 2rem;                      /* 20px */
  color: var(--primary);
}
.w-field::placeholder { color: var(--primary); opacity: 1; }
.w-field:focus-visible { outline: var(--focus-width) solid var(--primary-dark); outline-offset: .2rem; }

/* THE ONLY UPPERCASE ON THE ENTIRE SITE. Nothing else may be uppercase. */
.w-submit {
  background: var(--primary);
  color: var(--white);
  border: 0; border-radius: 0;
  padding: 1rem 2.4rem;
  min-width: 15rem;
  font-family: var(--font-body);
  font-stretch: 67.5%;
  font-weight: 300;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0;
  cursor: pointer;
  transition: opacity .2s ease;
}
.w-submit:hover { opacity: .8; }

/* Buttons are SENTENCE CASE ("Download the brochure"), solid planes, square. */
.w-btn {
  padding-block: .6em; padding-inline: 2.5em;
  min-inline-size: 20rem;
  line-height: 1;
  font-family: var(--font-body);
  font-stretch: 67.5%;
  font-size: clamp(1.4rem, .38vw + 1.28rem, 1.8rem);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  border: .25rem solid;
  border-radius: 0;
  cursor: pointer;
}
.w-btn--primary   { background: var(--primary);   color: var(--primary-ultra-light); border-color: var(--primary); }
.w-btn--primary:hover   { background: var(--primary-hover); }
.w-btn--secondary { background: var(--secondary); color: var(--base); border-color: var(--secondary); }
.w-btn--secondary:hover { background: var(--secondary-hover); }

/* The only rule/divider idiom on the site. */
.w-rule { border: 0; border-top: 1px dotted var(--primary); }

/* Band grounds. */
.w-band--stone   { background: var(--secondary); }
.w-band--brown   { background: var(--primary); color: var(--primary-ultra-light); }
.w-band--white   { background: var(--white); }
.w-band--quiet   { background: var(--secondary-ultra-light); }
.w-band--warm    { background: var(--primary-ultra-light); }
.w-band--footer  { background: var(--base); color: var(--white); }