/* =============================================================
   MAREA EVENTS — Design tokens as CSS custom properties.
   Single source of truth for non-Tailwind CSS. Mirrors the
   values in /assets/js/tailwind.config.js. Import this FIRST.
   ============================================================= */
:root {
  /* --- Brand palette --- */
  --c-marea-blu:    #1C7FC0;
  --c-blu-onda:     #2FA3E0;
  --c-blu-profondo: #123A52;
  --c-corallo:      #ED5424;
  --c-crema:        #FBF6EE;
  --c-sabbia:       #F1E8D9;
  --c-pietra:       #7A7163;
  --c-bianco:       #FFFFFF;

  /* Page canvas: a desaturated wash of Pietra. The section cards
     (Crema / Sabbia) sit on top of this, so they read as surfaces
     instead of blending into the background. */
  --c-pietra-tenue: #E7E3DC;

  /* --- Typography --- */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Mulish", system-ui, -apple-system, sans-serif;

  --fs-eyebrow:  12px;
  --fs-body:     17px;
  --fs-subtitle: 18px;
  --fs-h2:       34px;
  --fs-h1:       52px;

  --lh-body: 1.7;
  --ls-eyebrow: 0.22em;

  /* --- Radii --- */
  --r-panel: 32px;
  --r-card:  24px;
  --r-image: 20px;
  --r-pill:  999px;

  /* --- Elevation --- */
  --shadow-float: 0 20px 60px -20px rgba(18, 58, 82, 0.25);
  --shadow-soft:  0 10px 30px -12px rgba(18, 58, 82, 0.18);

  /* --- Layout --- */
  --content-max: 1200px;
  --header-h: 100px;

  /* --- Per-pillar accent colors (badge system) ---
     Signature colour of each service, from the brand board.
     Pale hues (lab/catering/studio/daily) are deepened so the tint
     stays legible as text/tags on the white world-cards. */
  --pillar-classic:  #1A2741;  /* navy profondo */
  --pillar-elite:    #C85E31;  /* terracotta */
  --pillar-lab:      #B8851C;  /* oro caldo */
  --pillar-catering: #5F8C88;  /* salvia marina */
  --pillar-studio:   #A98A5E;  /* sabbia/pietra */
  --pillar-daily:    #C87882;  /* rosa cipria */
}