/* ============================================================
   THE SYD — COLOR TOKENS
   Source: The Syd Brand Guidelines v1 (04.2021)
   ============================================================ */

:root {
  /* ---- Brand palette (verbatim from guidelines) ---- */
  --syd-dark-blue:       #0E2A4B;  /* Pantone 2767 — primary */
  --syd-light-warm-gray: #F2EDEB;  /* Pantone 663  — page bg */
  --syd-hot-orange:      #F15E25;  /* Pantone 165  — accent / CTA */
  --syd-warm-gray:       #DDD5D0;  /* Pantone 7604 — borders / muted bg */
  --syd-blue:            #0090C7;  /* Pantone 2393 — pool blue */
  --syd-dark-green:      #084D56;  /* Pantone 7476 — bayou green */
  --syd-purple:          #512156;  /* Pantone 262  — Mardi Gras purple */
  --syd-gold:            #E5B623;  /* Pantone 7409 — Mardi Gras gold */
  --syd-black:           #000000;  /* Pantone Black 6C */
  --syd-white:           #FFFFFF;

  /* ---- Tints & shades (derived for UI states) ---- */
  --syd-dark-blue-90:    #25405F;  /* hover on dark blue */
  --syd-dark-blue-12:    #DDE2E9;  /* faint blue wash */
  --syd-hot-orange-90:   #D94E1B;  /* pressed orange */
  --syd-hot-orange-12:   #FCE3D8;  /* orange wash */
  --syd-cream:           #FAF7F5;  /* lighter than warm gray, card bg */

  /* ============================================================
     SEMANTIC ALIASES — use these in components
     ============================================================ */

  /* Surfaces */
  --surface-page:        var(--syd-light-warm-gray);
  --surface-card:        var(--syd-white);
  --surface-raised:      var(--syd-cream);
  --surface-inverse:     var(--syd-dark-blue);
  --surface-muted:       var(--syd-warm-gray);

  /* Text */
  --text-primary:        var(--syd-dark-blue);
  --text-on-inverse:     var(--syd-light-warm-gray);
  --text-muted:          #5C6B7E;            /* dark-blue desaturated */
  --text-accent:         var(--syd-hot-orange);

  /* Lines & borders */
  --border-default:      var(--syd-warm-gray);
  --border-strong:       var(--syd-dark-blue);
  --border-hairline:     rgba(14, 42, 75, 0.16);

  /* Interactive / accent */
  --accent:              var(--syd-hot-orange);
  --accent-hover:        var(--syd-hot-orange-90);
  --focus-ring:          var(--syd-blue);

  /* Villa theme accents (each villa is decorated around a hue) */
  --villa-parades:       var(--syd-hot-orange);
  --villa-swamp:         var(--syd-dark-green);
  --villa-rhythm:        var(--syd-blue);
  --villa-mardigras:     var(--syd-purple);
  --villa-gold:          var(--syd-gold);
}