/* ============================================================
   Vessel — Brand tokens
   ------------------------------------------------------------
   This is the customization layer. Rebrand the template by
   editing the values below; index.html reads all of them.
   Loaded BEFORE the inline <style> in index.html.
   ============================================================ */

:root{
  /* ---- Core palette ---------------------------------------
     porcelain  = page background (cool off-white)
     ash        = card / plinth-top surface
     stone      = rules, plinth side, borders
     slate      = muted body text, captions
     ink        = display type, dark section backgrounds
     ink-soft   = secondary dark band (Care section)
     cobalt     = THE accent — glaze-cobalt, links, focus ring
     cobalt-lift = lighter accent for large fills / hover on dark
  --------------------------------------------------------- */
  --porcelain:#F2F3F2;
  --ash:#E3E5E4;
  --stone:#C3C7C6;
  --slate:#5C6362;
  --ink:#16191B;
  --ink-soft:#2B3033;
  --cobalt:#2F5D73;      /* AA on porcelain: 5.6:1 */
  --cobalt-lift:#4E8AA6; /* large fills / hover only — do not use for small text */

  /* ---- Typefaces ------------------------------------------
     Change these AND the Google Fonts <link> in index.html.
  --------------------------------------------------------- */
  --serif:'Instrument Serif',Georgia,serif; /* display / headings */
  --sans:'Inter',system-ui,sans-serif;      /* body / UI */
  --mono:'JetBrains Mono',monospace;        /* labels, prices, eyebrows */

  /* ---- Shape ------------------------------------------------
     The template's signature look is near-square corners.
  --------------------------------------------------------- */
  --r:1px;
}