/* ============================================================
   Club del Sole — Color tokens
   Two layers:
   1) PRIMITIVES (--cds-*) — raw brand values, never reference directly
      in components.
   2) SEMANTIC ROLES (--color-*) — the only layer components point to.
   Swap a semantic pointer and the whole system re-aligns.
   Values transcribed from design-tokens.json (real CSS of
   reservations.dev) and the Figma Variable collections.
   ============================================================ */
:root {
  /* ---- PRIMITIVES ---- */
  --cds-sole:          #FFDD00; /* Giallo Sole — brand accent only, NEVER text/CTA (fails AA) */
  --cds-sabbia:        #BF9F06; /* Oro Sabbia — the real action color */
  --cds-sabbia-scuro:  #A28705; /* Sabbia 15% darker — hover */
  --cds-blu:           #003B71; /* Blu corporate — identity, headings */
  --cds-blu-scuro:     #00284D; /* deep blue — dark sections */
  --cds-celeste:       #0093C9; /* sea / info / focus ring */
  --cds-verde:         #00783F; /* nature / positive / available */
  --cds-verde-chiaro:  #DDFCE6; /* confirmation backgrounds */
  --cds-rosso:         #F0373A; /* error / sold-out / urgency */
  --cds-beige:         #E9E3D8; /* warmth / warm surfaces / borders */
  --cds-grigio-scuro:  #393939; /* body text */
  --cds-grigio-chiaro: #F5F5F5; /* muted surfaces */
  --cds-bianco:        #FFFFFF;
  --cds-panna:         #FFFEF8; /* warm off-white page background */
  --cds-nero:          #000000;
  --cds-ombra-blu:     #002145; /* deep-blue tint used in soft shadows */

  /* Support tints (Figma "Main colors" collection: 100/80/60) */
  --cds-sole-80:    rgba(255,221,0,0.8);
  --cds-sole-60:    rgba(255,221,0,0.6);
  --cds-sabbia-60:  rgba(191,159,6,0.6);
  --cds-blu-80:     rgba(0,59,113,0.8);
  --cds-blu-60:     rgba(0,59,113,0.6);
  --cds-celeste-80: rgba(0,147,201,0.8);
  --cds-celeste-60: rgba(0,147,201,0.6);
  --cds-verde-80:   rgba(0,120,63,0.8);
  --cds-verde-60:   rgba(0,120,63,0.6);

  /* ---- SEMANTIC ROLES ---- */
  --color-brand:            var(--cds-blu);
  --color-brand-deep:       var(--cds-blu-scuro);
  --color-brand-accent:     var(--cds-sole);   /* accent / brand moment only */

  --color-action:           var(--cds-sabbia); /* primary CTA across the ecosystem */
  --color-action-secondary: var(--cds-sabbia); /* same gold, rendered as outline */
  --color-action-hover:     var(--cds-sabbia-scuro);
  --color-action-text:      var(--cds-bianco);

  --color-info:             var(--cds-celeste);
  --color-success:          var(--cds-verde);
  --color-success-surface:  var(--cds-verde-chiaro);
  --color-danger:           var(--cds-rosso);

  --color-surface:          var(--cds-bianco);
  --color-surface-muted:    var(--cds-grigio-chiaro);
  --color-surface-warm:     var(--cds-beige);
  --color-surface-deep:     var(--cds-blu);   /* hero / footer dark sections */
  --color-page:             var(--cds-panna);

  --color-text-heading:     var(--cds-blu);
  --color-text-body:        var(--cds-grigio-scuro);
  --color-text-muted:       rgba(0,0,0,0.6);
  --color-text-on-brand:    var(--cds-bianco);

  --color-border:           var(--cds-beige);
  --color-focus-ring:       var(--cds-celeste); /* visible focus — distinct from gold CTA */
}