/* ============================================================
   COLORS — Chepstow Hearing Clinic
   Two core brand colours: Navy (#102467) and Gold (#C6A46C),
   on white and a soft reading grey.
   ============================================================ */

:root {
  /* ---- Brand: Navy ---- */
  --navy-900: #0a1747;   /* deepest — footer, large fills */
  --navy-800: #0d1d57;
  --navy-700: #102467;   /* CORE NAVY — headers, buttons, headings */
  --navy-600: #1c3286;
  --navy-500: #2c45a6;
  --navy-200: #b9c2e0;   /* tints for borders/dividers on navy */
  --navy-100: #dde2f1;
  --navy-050: #eef1f8;

  /* ---- Brand: Gold ---- */
  --gold-700: #a8854f;   /* darker gold — text on light, hover */
  --gold-600: #b8945c;
  --gold-500: #c6a46c;   /* CORE GOLD — accent, CTAs, highlights */
  --gold-400: #d3b685;
  --gold-300: #e0c9a3;
  --gold-100: #f3e9d8;   /* soft gold wash — callout backgrounds */
  --gold-050: #faf5ec;

  /* ---- Neutrals ---- */
  --white:     #ffffff;
  --grey-050:  #f7f8fa;  /* reading background */
  --grey-100:  #eef0f4;
  --grey-200:  #e2e5ec;
  --grey-300:  #cdd2dc;
  --grey-400:  #a3aab9;
  --grey-500:  #6f7787;
  --grey-600:  #515867;
  --grey-700:  #3a404c;
  --grey-900:  #1a1d24;

  /* ---- Semantic: status ---- */
  --success-500: #2f8f5b;
  --success-100: #e2f1e8;
  --warning-500: #c98a23;
  --warning-100: #f7ecd5;
  --danger-500:  #c0463c;
  --danger-100:  #f6e3e1;

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

  /* Surfaces */
  --surface-page:      var(--grey-050);
  --surface-card:      var(--white);
  --surface-raised:    var(--white);
  --surface-inverse:   var(--navy-700);   /* navy sections, header, footer */
  --surface-inverse-deep: var(--navy-900);
  --surface-accent-soft: var(--gold-050); /* gentle gold callout */

  /* Text */
  --text-heading:   var(--navy-700);
  --text-body:      var(--grey-700);
  --text-muted:     var(--grey-500);
  --text-on-navy:   var(--white);
  --text-on-navy-muted: var(--navy-200);
  --text-accent:    var(--gold-700);      /* gold text on white (legible) */
  --text-link:      var(--navy-700);

  /* Borders & dividers */
  --border-subtle:  var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong:  var(--navy-700);
  --border-on-navy: rgba(255, 255, 255, 0.22);
  --divider-gold:   var(--gold-500);      /* the framing rule from the logo */

  /* Interactive — primary (navy) */
  --action-primary-bg:        var(--navy-700);
  --action-primary-bg-hover:  var(--navy-800);
  --action-primary-bg-active: var(--navy-900);
  --action-primary-fg:        var(--white);

  /* Interactive — accent (gold CTA) */
  --action-accent-bg:        var(--gold-500);
  --action-accent-bg-hover:  var(--gold-600);
  --action-accent-bg-active: var(--gold-700);
  --action-accent-fg:        var(--navy-900);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(198, 164, 108, 0.55); /* gold focus halo */
}