/* ==========================================================================
   Arch House Australia - design tokens
   Tokens only. A selector in this file means you are in the wrong file.
   Direction: docs\ART-DIRECTION.md ("Ripple Portals on Plaster").

   The brand mark is achromatic: black script on white, letterspaced
   AUSTRALIA beneath. So the palette is derived from his MATERIALS, not
   invented, and photography carries all the chroma. His arches ship in
   sage, blush, hot pink, blue, black and white, which is exactly why no
   single product finish may become the brand colour.
   ========================================================================== */

:root {
  /* ---- Ground and surface ---- */
  --plaster:  #f7f2e9;  /* page ground */
  --limewash: #efe6d8;  /* alternating band */
  --gesso:    #fffbf4;  /* cards, raised surfaces */
  --sand:     #d9cbb8;  /* hairlines, rules, portal outlines */
  --sand-dim: #e7dccb;

  /* ---- Ink ---- */
  --espresso: #2b2118;  /* body ink and dark bands */
  --espresso-soft: #574839;
  --espresso-mute: #736354;  /* 5.17 on plaster, 4.66 on limewash, 5.59 on gesso. The previous #7d6d5c measured 4.47 and 4.03 and failed AA on body text. */

  /* ---- Timber, for structure not decoration ---- */
  --oak:      #8a6b4d;  /* form borders, active states */

  /* ---- One reserved CTA accent. Nothing else uses walnut. ---- */
  --walnut:      #5b3a26;
  --walnut-deep: #432919;

  /* ---- Type ---- */
  --font-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --font-body: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--2: clamp(0.76rem, 0.74rem + 0.10vw, 0.82rem);
  --step--1: clamp(0.86rem, 0.83rem + 0.14vw, 0.94rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.20vw, 1.12rem);
  --step-1:  clamp(1.22rem, 1.14rem + 0.42vw, 1.46rem);
  --step-2:  clamp(1.50rem, 1.33rem + 0.82vw, 2.05rem);
  --step-3:  clamp(1.88rem, 1.56rem + 1.52vw, 2.95rem);
  --step-4:  clamp(2.25rem, 1.75rem + 2.40vw, 3.75rem);
  --step-5:  clamp(2.60rem, 1.95rem + 3.10vw, 4.75rem);

  --lh-tight: 1.05;
  --lh-head:  1.16;
  --lh-body:  1.65;
  --tr-tight: -0.015em;
  --tr-caps:   0.18em;

  /* ---- Space ---- */
  --sp-1: 0.35rem;
  --sp-2: 0.7rem;
  --sp-3: 1.1rem;
  --sp-4: 1.7rem;
  --sp-5: 2.6rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: clamp(4.5rem, 3rem + 7vw, 9.5rem);

  --wrap:       77rem;
  --wrap-tight: 60rem;
  --wrap-text:  40rem;

  /* ---- Radius. The arch is the brand, so it is a token. ---- */
  --r-sm: 3px;
  --r-md: 8px;
  --r-lg: 16px;
  --arch:      50% 50% 0 0 / 32% 32% 0 0;  /* his U-arch */
  --arch-full: 999px 999px 0 0;             /* semicircular head */

  /* ---- Elevation: warm shadows only. Grey shadows kill timber. ---- */
  --sh-1: 0 1px 2px rgba(43,33,24,.06), 0 2px 8px rgba(43,33,24,.05);
  --sh-2: 0 4px 12px rgba(43,33,24,.08), 0 12px 34px rgba(43,33,24,.07);
  --sh-3: 0 10px 26px rgba(43,33,24,.11), 0 30px 70px rgba(43,33,24,.10);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .55s;
}

/* --------------------------------------------------------------------------
   The fluting. His slatted plinths and fluted arch panels, reproduced as a
   repeating gradient: no image weight, any width, any ground colour.
   -------------------------------------------------------------------------- */
:root {
  --flute: repeating-linear-gradient(90deg,
    rgba(43,33,24,.16) 0px,
    rgba(43,33,24,.04) 3px,
    rgba(255,255,255,.55) 7px,
    rgba(255,255,255,.18) 11px,
    rgba(43,33,24,.04) 15px,
    rgba(43,33,24,.16) 18px);
  --flute-dark: repeating-linear-gradient(90deg,
    rgba(0,0,0,.42) 0px,
    rgba(0,0,0,.10) 3px,
    rgba(255,255,255,.10) 7px,
    rgba(255,255,255,.03) 11px,
    rgba(0,0,0,.10) 15px,
    rgba(0,0,0,.42) 18px);
}

/* ---- Self-hosted faces. No CDN call: the CSP is self-only. ---- */
@font-face {
  font-family: "Marcellus";
  src: url("../fonts/marcellus-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../fonts/urbanist-var.woff2") format("woff2-variations"),
       url("../fonts/urbanist-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}