/* ============================================================
   CORPORATE VR - design tokens ("the safe pair of hands")
   60-30-10: Gallery White #FAFAF7 / Deep Petrol #0C3B3C /
   Signal Mint #2BD4B0. Sora + Instrument Sans.
   ============================================================ */

:root {
  /* -- canvas & surfaces ------------------------------------ */
  --bg:          #FAFAF7;   /* Gallery White */
  --surface:     #FFFFFF;
  --bg-tint:     #EFF5F3;   /* mint-tinted band */
  --bg-cream:    #F6F9F8;   /* faint petrol wash */

  /* -- ink ---------------------------------------------------- */
  --ink:         #1C2B2C;   /* petrol-tinted ink, never pure black */
  --ink-soft:    #4A5B5C;
  --ink-faint:   #7E8C8D;
  --line:        #E3EAE8;   /* hairline */

  /* -- brand -------------------------------------------------- */
  --petrol:      #0C3B3C;   /* 30 - bands, cards, footer */
  --petrol-deep: #072828;
  --mint:        #2BD4B0;   /* 10 - the accent */
  --mint-deep:   #17A98B;
  --mint-ink:    #0E7A64;

  /* -- type --------------------------------------------------- */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* -- shape (soft squares) ----------------------------------- */
  --r-sm:   10px;
  --r-md:   16px;   /* the spec radius */
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* -- elevation (quiet) -------------------------------------- */
  --shadow-card: 0 8px 26px -14px rgba(12, 59, 60, .18);
  --shadow-pop:  0 26px 54px -22px rgba(12, 59, 60, .28);
  --shadow-mint: 0 16px 36px -16px rgba(43, 212, 176, .4);

  /* -- layout ------------------------------------------------- */
  --wrap:   1180px;
  --gutter: clamp(20px, 4vw, 36px);
}