/* ============================================================
   Trepa't — Color tokens
   Source: TREPAT_MANUAL.pdf (Pantone/RGB/CMYK, p.6) + sampled
   from the master goat artwork (RECURSOS_GRAF_TREPAT-04.png).

   The manual lists four spot colors. In the artwork the dark is a
   deep petrol (#034153) rather than the manual's mid teal 7475 C —
   we keep BOTH: petrol is the structural "ink", the two teals are
   secondary accents.
   ============================================================ */

:root {
  /* ---- Brand spot colors (manual, p.6) ---- */
  --coral:        #F2827F;   /* PANTONE 2029 C · R242 G130 B127 — primary */
  --teal-mid:     #487A7B;   /* PANTONE 7475 C · R72 G122 B123 */
  --teal-light:   #71B0B4;   /* PANTONE 2232 C · R113 G176 B180 */
  --cream:        #F5E1A4;   /* PANTONE 7401 C · R245 G225 B164 */

  /* ---- Artwork-derived core ---- */
  --petrol:       #034153;   /* the dark "ink" used in all line art & outlines */
  --coral-art:    #EF7C71;   /* coral as printed in artwork */
  --cream-soft:   #FFF3CB;   /* the lighter cream highlight in artwork */

  /* ---- Coral ramp ---- */
  --coral-100:    #FCE3DD;
  --coral-200:    #F8C3BA;
  --coral-300:    #F4A299;
  --coral-400:    #F2827F;   /* = --coral */
  --coral-500:    #E86F66;   /* hover / pressed */
  --coral-600:    #D15B52;   /* active */
  --coral-700:    #A8433C;

  /* ---- Petrol ramp (cool dark teal-navy) ---- */
  --petrol-900:   #022A36;   /* deepest, near-black */
  --petrol-800:   #033545;
  --petrol-700:   #034153;   /* = --petrol */
  --petrol-600:   #0C5366;
  --petrol-500:   #1A6678;
  --petrol-400:   #487A7B;   /* = --teal-mid */
  --petrol-300:   #71B0B4;   /* = --teal-light */
  --petrol-200:   #A9D0D2;
  --petrol-100:   #D8EAEB;

  /* ---- Cream / sand ramp (warm neutrals) ---- */
  --sand-50:      #FFFCF4;   /* warmest paper white */
  --sand-100:     #FBF4E3;
  --sand-200:     #F5E1A4;   /* = --cream */
  --sand-300:     #EBD08A;
  --sand-400:     #DCBC6E;

  /* ---- Neutrals (warm-tinted greys) ---- */
  --ink:          #15201F;   /* "negativo" dark green-black (web guión) — body text + dark chrome */
  --slate-600:    #3C5560;
  --slate-400:    #6E848D;
  --slate-300:    #9DAEB4;
  --slate-200:    #C9D4D7;
  --line:         #E2D9C6;   /* hairline on cream surfaces */
  --white:        #FFFFFF;

  /* ============================================================
     Semantic aliases — use these in product UI
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--sand-50);   /* default app/site background */
  --surface-card:      var(--white);     /* raised card on cream */
  --surface-sunken:    var(--sand-100);  /* wells / insets */
  --surface-inverse:   var(--petrol-700);/* dark sections */
  --surface-night:     var(--ink);       /* deepest dark chrome — nav, footer, high-contrast (web gu-ión "negativo") */
  --surface-brand:     var(--coral-400); /* coral feature panels */
  --surface-accent:    var(--cream);     /* cream feature panels */

  /* Text */
  --text-strong:       var(--petrol-700);/* headlines */
  --text-body:         var(--ink);       /* body copy */
  --text-muted:        var(--slate-400); /* secondary / captions */
  --text-on-coral:     var(--petrol-700);/* dark text reads best on coral */
  --text-on-petrol:    var(--cream);     /* cream text on dark petrol */
  --text-on-petrol-soft: var(--petrol-200);
  --text-inverse:      var(--sand-50);

  /* Brand / interactive */
  --brand:             var(--coral-400);
  --brand-hover:       var(--coral-500);
  --brand-active:      var(--coral-600);
  --accent:            var(--teal-light);
  --focus-ring:        var(--petrol-500);

  /* Borders */
  --border-strong:     var(--petrol-700);/* the signature heavy outline */
  --border-subtle:     var(--line);
  --border-on-dark:    rgba(245,225,164,0.22);

  /* Sub-brand zones (see assets/logos auxiliary badges) */
  --zone-escalada:     var(--coral-400); /* Espai d'Escalada — main */
  --zone-infantil:     var(--teal-light);/* Espai Infantil — kids */
  --zone-expert:       var(--petrol-700);/* Espai Expert — advanced */

  /* Status (kept on-brand, used sparingly) */
  --success:           #4E8D6E;
  --warning:           #E0A23C;
  --danger:            #C0493E;
  --info:              var(--teal-mid);
}