/* ============================================================
   oceanparksm.com — SHARED DESIGN TOKENS
   One source of truth. Every page references these tokens;
   nothing downstream declares a raw color, font, or type size.
   Tints/shades: color-mix() on these tokens only.
   Approved design: "Sunset at the Pier" v1 · 2026-07-11
   ============================================================ */
:root{
  /* -- Font (ONE font — weights do the work) ---------------- */
  --font-site: 'Nunito', 'Segoe UI', system-ui, sans-serif;

  /* -- Palette : "Sunset at the Pier" ------------------------ */
  --op-ink:    #14324A;   /* deep pacific navy — all text      */
  --op-ocean:  #0E7FA5;   /* pacific blue — links, accents     */
  --op-sunset: #FF6B4A;   /* coral — primary CTA               */
  --op-sun:    #FFB637;   /* sun gold — secondary accent       */
  --op-palm:   #2E9E6B;   /* palm green — tips / success       */
  --op-sand:   #F6E7CE;   /* warm sand — soft section bg       */
  --op-foam:   #FDFAF3;   /* foam white — page background      */
  --op-white:  #FFFFFF;   /* cards                             */

  /* -- Type ladder ------------------------------------------- */
  --fs-hero:  clamp(2.3rem, 5vw, 3.6rem);   --fw-hero: 900;
  --fs-h2:    clamp(1.5rem, 2.6vw, 1.9rem); --fw-h2: 900;
  --fs-h3:    1.2rem;                        --fw-h3: 800;
  --fs-body:  1.05rem;                       --fw-body: 400;
  --fs-small: .9rem;

  /* -- Shape --------------------------------------------------- */
  --radius-card: 18px;
  --radius-pill: 999px;
  --shadow-card: 0 6px 18px color-mix(in srgb, var(--op-ink) 12%, transparent);

  /* -- Composites (defined once, referenced everywhere) -------- */
  --grad-hero: linear-gradient(180deg,
    color-mix(in srgb, var(--op-sun) 42%, var(--op-white)) 0%,
    color-mix(in srgb, var(--op-sunset) 35%, color-mix(in srgb, var(--op-sun) 60%, var(--op-white))) 34%,
    color-mix(in srgb, var(--op-sunset) 55%, color-mix(in srgb, var(--op-sun) 55%, var(--op-white))) 62%,
    color-mix(in srgb, var(--op-sunset) 88%, var(--op-white)) 100%);
}

/* -- Shared base -------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--font-site);
  font-size:var(--fs-body);
  font-weight:var(--fw-body);
  color:var(--op-ink);
  background:var(--op-foam);
}