/* ===========================================================================
   Briarpatch Restaurants — design tokens.

   The restaurant's own colours, from its logo and its dining room: the navy
   of the wordmark and the willow damask, cream paper, the red of the rose,
   the green of its leaves, the lavender-blue plate; brass for the plaques and
   the gift certificates. One condensed display serif (Noto Serif Display,
   narrowed on its width axis — the stand-in for the old site's Magiora), set
   in capitals as the restaurant always has; Figtree for reading.
   =========================================================================== */

:root{
  /* navy — the wordmark, the willow damask */
  --navy:#14295A;
  --navy-2:#1D3672;
  --navy-deep:#0C1B3E;
  --navy-ink:#081330;

  /* paper */
  --cream:#FFF9F1;
  --paper:#FBF3E6;
  --linen:#F3E9D8;
  --sand:#E6D6BE;
  --white:#FFFFFF;

  /* ink on paper */
  --ink:#1B2440;
  --ink-2:#3A4466;
  --muted:#5B6283;

  /* the rose, its leaves, the plate */
  --rose:#A42238;
  --rose-2:#BF2D46;
  --rose-deep:#7A1528;
  --rose-ink:#5E0F1F;
  --rose-soft:#F6DCE0;
  --leaf:#2F8A6B;
  --leaf-hi:#48B38A;
  --sage:#9DBCA5;
  --plate:#9AA2C2;

  /* brass — plaques, certificates, the gilt line */
  --brass:#C4A062;
  --brass-hi:#E3C58E;
  --brass-lo:#8C6A32;

  /* text on dark grounds */
  --on-dark:#F7EFE1;
  --on-dark-2:#D5DBEA;
  --on-dark-3:#A9B3CF;

  /* lines */
  --line:rgba(20,41,90,.14);
  --line-strong:rgba(20,41,90,.32);
  --line-dark:rgba(247,239,225,.16);
  --line-dark-strong:rgba(247,239,225,.34);

  /* type */
  --font-display:"Noto Serif Display", "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --font-text:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script:"Oooh Baby", "Snell Roundhand", "Apple Chancery", cursive;
  --font-cert:"Times New Roman", Tinos, Times, "Liberation Serif", serif;
  --font-hand:"Oooh Baby", "Segoe Script", "Bradley Hand", cursive;
  --stretch-display:62.5%;
  --stretch-italic:78%;

  --fs-hero:clamp(2.7rem, 1.1rem + 5.4vw, 7.4rem);
  --fs-h1:clamp(2.9rem, 1.5rem + 5.2vw, 6.4rem);
  --fs-h2:clamp(2.35rem, 1.45rem + 3.4vw, 4.75rem);
  --fs-h3:clamp(1.45rem, 1.15rem + 1.1vw, 2.15rem);
  --fs-lede:clamp(1.14rem, 1.02rem + .55vw, 1.5rem);
  --fs-body:1.0625rem;
  --fs-small:.9rem;
  --fs-kicker:.76rem;
  --lh-display:.93;

  /* layout */
  --container:1240px;
  --gutter:clamp(1.1rem, .45rem + 2.6vw, 2.6rem);
  --section-y:clamp(3rem, 2rem + 3vw, 5.4rem);
  --section-y-tight:clamp(2rem, 1.6rem + 1.2vw, 3rem);
  --bp-gap:clamp(1rem, .55rem + 1.5vw, 2.1rem);
  --header-h:86px;

  --r-xs:3px;
  --r-sm:6px;
  --r:14px;
  --r-lg:22px;
  --pill:999px;

  --shadow-1:0 1px 2px rgba(12,27,62,.06), 0 8px 20px -10px rgba(12,27,62,.22);
  --shadow-2:0 2px 4px rgba(12,27,62,.06), 0 26px 50px -26px rgba(12,27,62,.5);
  --shadow-3:0 44px 90px -34px rgba(8,19,48,.6), 0 12px 24px -12px rgba(8,19,48,.3);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* the willow — the decor box's leaves, as masks (recoloured in place) */
  --willow-top:url("../img/willow-top.png");
  --willow-bottom:url("../img/willow-bottom.png");
  --willow-left:url("../img/willow-left.png");
  --willow-right:url("../img/willow-right.png");
  --willow-band:url("../img/willow-band.png");
  --damask:url("../img/damask.webp");
  --sketch:url("../img/sketch.webp");
  --frame:clamp(16px, .7rem + 1.6vw, 40px);

  /* a single willow leaf: the kicker's mark, the list bullet */
  --leaf-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M1 8C9 1.5 22 .5 39 8 22 15.5 9 14.5 1 8Z'/%3E%3C/svg%3E");
  --arrow-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E");
  --check-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.4 4.4L19 7.4'/%3E%3C/svg%3E");
}