/* ============================================================
   Chef Life Aruba — brand tokens
   Single source of truth. Do not hard-code hex values in pages.

   The brand has two temperatures, not two identities:
     RESTAURANT   marine at night   (dark)
     PRIVATE CHEF shell in the day  (light)
   Same type, same grid, same gold. Only the ground changes.
   ============================================================ */

:root{
  /* ---- ground: restaurant / night ---- */
  --deep:       #061821;  /* deepest base                */
  --marine:     #0C2A38;  /* lifted panel                */
  --marine-lo:  #103544;  /* lifted panel, one step up   */

  /* ---- ground: private chef / day ---- */
  --shell:      #EDE4D6;  /* base                        */
  --shell-lo:   #E4D8C6;  /* recessed                    */
  --shell-hi:   #F6F0E5;  /* raised card                 */

  /* ---- ink ---- */
  --salt:       #F4EFE6;  /* type on dark                */
  --sand:       #A9998A;  /* secondary type on dark      */
  --ink:        #14232B;  /* type on light               */
  --ink-60:     rgba(20,35,43,.66);   /* 4.57:1 on --shell — safe for body copy */
  --ink-38:     rgba(20,35,43,.38);   /* 2.22:1 — DECORATIVE ONLY, never type   */

  /* ---- accent: Aruba gold ----
     --gold      on dark grounds
                 8.92:1 on --deep, 7.37:1 on --marine
     --gold-deep on light grounds
                 4.55:1 on --shell, 5.05:1 on --shell-hi

     --gold-deep was #B87F27, which measured 2.73:1 on --shell and
     failed at every size despite being labelled contrast-safe. It
     carries the eyebrows, links, prices and button text on the
     private chef page, all at 11–14px. Darkened along the same hue
     (H 36) until it cleared 4.5:1. If you lighten it back toward
     the old value, you are re-breaking the light side of the site. */
  --gold:       #F0A830;
  --gold-lift:  #FFBF52;
  --gold-deep:  #885E1D;

  /* ---- semantic ---- */
  --turquoise:  #3FBFAE;  /* live / open-now only        */

  /* ---- rules ---- */
  --rule:       rgba(244,239,230,.14);
  --rule-soft:  rgba(244,239,230,.08);
  --rule-ink:   rgba(20,35,43,.16);

  /* ---- type ----
     Display  Fraunces   variable, uses SOFT + WONK axes
     Body     Archivo    grotesque, tight apertures
     Utility  Plex Mono  prices, times, labels, data       */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- layout ---- */
  --gutter: clamp(20px, 5vw, 84px);
  --ease:   cubic-bezier(.2,.8,.2,1);
}

/* ---- reset + floor ---------------------------------------- */
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0;
  font-family:var(--body);
  font-weight:300;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px }

/* Fraunces looks generic at default settings. These axes are the point. */
.u-display{
  font-family:var(--display);
  font-variation-settings:"SOFT" 20, "WONK" 1;
  letter-spacing:-.02em;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}