/* =====================================================================
   DESIGN TOKENS — Enzo Monnier
   ---------------------------------------------------------------------
   Edit values HERE to re-skin the whole site. Nothing else should hold
   a raw colour, font name or magic number.

   Colours are stored as raw "R G B" triplets so a single value drives
   both the solid colour AND every transparent tint, e.g.
       background: rgb(var(--gold-rgb) / 0.18);
   Change --gold-rgb once and every gold shade follows.
   ===================================================================== */

:root {
  /* --- Brand palette (the only colours to change to re-theme) -------- */
  --navy-rgb:       26 35 50;    /* #1A2332  page background            */
  --navy-deep-rgb:  20 27 39;    /* #141B27  darker surface / on-accent */
  --gold-rgb:       201 168 76;  /* #C9A84C  accent                     */
  --gold-soft-rgb:  224 197 114; /* #E0C572  accent hover               */
  --offwhite-rgb:   245 240 232; /* #F5F0E8  primary text               */
  --muted-rgb:      185 192 204; /* #B9C0CC  secondary text (>=4.5:1)    */
  --success-rgb:    91 191 122;  /* #5BBF7A  availability dot           */

  /* Neutrals used only for overlays / shadows */
  --white-rgb:      255 255 255;
  --black-rgb:      0 0 0;

  /* --- Semantic colours (use THESE in styles.css) ------------------- */
  --color-bg:            rgb(var(--navy-rgb));
  --color-bg-alt:        rgb(var(--navy-deep-rgb));
  --color-text:          rgb(var(--offwhite-rgb));
  --color-text-muted:    rgb(var(--muted-rgb));
  --color-accent:        rgb(var(--gold-rgb));
  --color-accent-strong: rgb(var(--gold-soft-rgb));
  --color-on-accent:     rgb(var(--navy-deep-rgb)); /* text on a gold fill */
  --color-success:       rgb(var(--success-rgb));

  /* --- Typography --------------------------------------------------- */
  --font-display: "Barlow Condensed", system-ui, sans-serif; /* name + headings */
  --font-body:    "Barlow", system-ui, -apple-system, sans-serif;

  /* --- Radius ------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-pill: 999px;

  /* --- Motion ------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  200ms;  /* buttons / micro-interactions */
  --dur-med:   240ms;  /* hover shifts                 */

  /* --- Layout ------------------------------------------------------- */
  --maxw-hero:    1180px;
  --maxw-section: 1100px;
  --space-gutter: clamp(1.5rem, 5vw, 4rem); /* shared horizontal page padding */
}