/* ============================================================
   Sanders Beach Rentals — Color Tokens
   Per the official Brand Standards Guide v1.0.
   Modern coastal luxury. Quiet, calm, refined.
   ============================================================ */

:root {
  /* --- Brand ------------------------------------------------ */
  --sbr-coastal-blue: #89BBBE;   /* Sanders Coastal Blue — primary */
  --sbr-coastal-blue-deep: #6CA3A6;
  --sbr-coastal-blue-soft: #BDD8D9;
  /* Back-compat alias (earlier name) */
  --sbr-sea-glass: var(--sbr-coastal-blue);
  --sbr-sea-glass-deep: var(--sbr-coastal-blue-deep);
  --sbr-sea-glass-soft: var(--sbr-coastal-blue-soft);

  /* Gold lives ONLY inside the sun mark — logo/ornament use, never a UI fill. */
  --sbr-gold: #EBC55E;
  --sbr-gold-light: #F6DC78;
  --sbr-gold-deep: #D9A93F;

  /* --- Neutrals (official) ---------------------------------- */
  --warm-white: #FAF9F6;       /* Backgrounds */
  --warm-white-pure: #FFFFFF;
  --soft-sand: #F3EEE7;        /* Secondary backgrounds */
  --sand: var(--soft-sand);    /* alias */
  --sand-deep: #E9E1D4;
  --driftwood: #CBBEAF;        /* Natural accents, dividers */
  --soft-taupe: #B6A892;       /* Supporting neutral (system) */
  --warm-gray: #8A8F91;        /* Secondary text */

  /* --- Accents ---------------------------------------------- */
  --light-sage: #C8D7D1;       /* Supporting accent */
  --sage: var(--light-sage);   /* alias */
  --sage-deep: #9DB4AD;
  --coastal-navy: #4C6477;     /* Headlines & contrast */
  --muted-navy: var(--coastal-navy);     /* alias */
  --muted-navy-deep: #3A4E5D;
  --ocean-blue: #7FA3B8;       /* harmonizing extra (system) */
  --ocean-blue-deep: #647F92;

  /* --- Ink (text) ------------------------------------------- */
  --charcoal: #404040;         /* Body copy (official) */
  --ink-strong: #3A4E5D;       /* Display headlines (deep coastal navy) */
  --ink-body: var(--charcoal); /* Body copy */
  --ink-muted: #8A8F91;        /* Captions, meta (warm gray) */
  --ink-faint: #B6A892;        /* Disabled, placeholder */
  --ink-on-dark: #FAF9F6;      /* Text over photography/dark */

  /* --- Lines & edges ---------------------------------------- */
  --line-hairline: #ECE5DA;    /* Thin editorial divider */
  --line-soft: #DED4C5;
  --line-strong: #CBBEAF;      /* driftwood */

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --color-bg: var(--warm-white);
  --color-bg-raised: var(--warm-white-pure);
  --color-surface: var(--warm-white-pure);
  --color-surface-sand: var(--soft-sand);
  --color-surface-band: var(--soft-sand);

  --color-primary: var(--sbr-coastal-blue);
  --color-primary-hover: var(--sbr-coastal-blue-deep);
  --color-primary-soft: var(--sbr-coastal-blue-soft);
  --color-accent-gold: var(--sbr-gold);

  --text-display: var(--ink-strong);
  --text-heading: var(--coastal-navy);
  --text-body: var(--charcoal);
  --text-muted: var(--ink-muted);
  --text-faint: var(--ink-faint);
  --text-on-dark: var(--ink-on-dark);
  --text-on-primary: #FFFFFF;

  --border-hairline: var(--line-hairline);
  --border-default: var(--line-soft);
  --border-strong: var(--line-strong);

  /* Photography overlay — the soft white wash motif */
  --overlay-white-soft: rgba(250, 249, 246, 0.32);
  --overlay-white-wash: rgba(250, 249, 246, 0.62);
  --overlay-navy-soft: rgba(76, 100, 119, 0.28);

  /* Status (kept muted, never loud) */
  --color-success: var(--sage-deep);
  --color-info: var(--ocean-blue-deep);
  --color-warning: var(--sbr-gold-deep);
  --color-danger: #B5705F;
}