/* DNS Property Development - colour tokens. Source: dns-design-system/tokens.css (draft 2026-10-05). */
:root {
  /* Gold - the one accent. The logo keeps its own gold and is never recoloured. */
  --gold-light:   #E2BA5A; /* hover on dark */
  --gold:         #DBAA33; /* buttons, accents, focus ring on dark */
  --gold-pressed: #C39422; /* hover on light */
  --gold-text:    #93701A; /* gold text on white (4.6:1); focus ring on light */
  --gold-deep:    #684F12; /* rare */
  --logo-gold:    #D4A437; /* reference only - lives inside the logo files */

  /* Darks - charcoal from the logo is the main dark background */
  --charcoal-raised: #3A3A3A; /* cards and borders on dark */
  --charcoal:        #2B2B2B; /* main dark background */
  --charcoal-deep:   #1F1F1F; /* alternate dark section */
  --near-black:      #141414; /* footer, phone bar, text on gold buttons */
  --black:           #0A0A0A; /* darkest, image overlays */

  /* Lights - pure greys. No cream, no beige, no pale gold. */
  --white:   #FFFFFF;
  --grey-1:  #F7F7F7; /* alternate light section */
  --grey-2:  #EFEFEF; /* cards, form fields */
  --grey-3:  #E3E3E3; /* dividers */
  --grey-4:  #D1D1D1; /* borders, disabled */

  /* Text */
  --text-on-light:  #2B2B2B;
  --muted-on-light: #5E5E5E;
  --text-on-dark:   #F2F2F2;
  --muted-on-dark:  #A8A8A8;
  --logo-off-white: #EBE5D8; /* inside the logo only - never a background */

  /* Form messages - forms only, not brand colours */
  --success:       #80A122;
  --success-text:  #647E1B;
  --error:         #8B1812;
  --error-on-dark: #EB6861;

  /* Image overlay used on the hero photo */
  --overlay-hero: rgba(10,10,10,0.62);

  /* Semantic aliases */
  --surface-page:      var(--white);
  --surface-alt:       var(--grey-1);
  --surface-card:      var(--grey-2);
  --surface-dark:      var(--charcoal);
  --surface-dark-deep: var(--charcoal-deep);
  --surface-dark-card: var(--charcoal-raised);
  --surface-header:    var(--near-black);
  --surface-footer:    var(--black);
  --text-body:         var(--text-on-light);
  --text-muted:        var(--muted-on-light);
  --text-body-dark:    var(--text-on-dark);
  --text-muted-dark:   var(--muted-on-dark);
  --accent:            var(--gold);
  --accent-hover-light: var(--gold-pressed);
  --accent-hover-dark: var(--gold-light);
  --accent-text:       var(--gold-text);
  --on-accent:         var(--near-black);
  --border:            var(--grey-4);
  --divider:           var(--grey-3);
  --focus-light:       var(--gold-text);
  --focus-dark:        var(--gold);
}