/* ==========================================================================
   Pivot Consulting & Design — global colour theme
   Single source of truth for every colour on the site. Pages reference the
   semantic variables below; raw hex values live here and nowhere else.
   ========================================================================== */

:root {
  /* ---------- Core palette ---------- */
  --burgundy:   #7A263A;
  --charcoal:   #4D4948;
  --warm-ivory: #F8F3EC;
  --white:      #FFFFFF;

  /* ---------- Supporting palette ---------- */
  --dark-burgundy:  #5B192A;
  --pale-burgundy:  #F2E4E8;
  --pale-sand:      #F1E5D8;
  --dark-ink:       #302B2D;
  --burgundy-light: #8D3F51;

  /* ---------- Gold ----------
     The metallic gradient is the logo artwork's own finish. It is baked into
     assets/pivot-logo.png and is deliberately NOT applied to any
     CSS surface: a gradient spanning #7E580D (L 27%) to #F9E69E (L 80%) cannot
     carry legible type, because dark text fails on its light stops and light
     text fails on its dark ones. Every gold in the interface is the flat gold.
     The artwork's own gold runs hue 38-47 (brass-leaning); the interface gold is
     hue 49 -- yellower, as requested, but within 2 degrees of the logo's own
     highlight stop so the two read as one family.
     Kept here as the recorded brand value for the logo and derived artwork. */
  --pivot-metallic-gold: linear-gradient(120deg, #7E580D 0%, #B88620 20%, #DAB440 40%, #F9E69E 52%, #D7AE37 64%, #9E6B10 82%, #E0C160 100%);

  --gold:       #EAC72A;  /* the one flat gold: fills, rules, bullets, buttons */
  --gold-light: #EED463;  /* flat gold, lifted for button hover */
  --gold-deep:  #7F640B;  /* only where flat gold cannot carry type on a light
                             surface -- #EAC72A on ivory is 1.55:1 */

  /* ---------- Legacy palette names ----------
     The pages reference --deep-plum and --dark-plum directly. Retargeted to the
     burgundy palette so no markup has to change for this colour update. */
  --deep-plum:  var(--burgundy);
  --dark-plum:  var(--dark-burgundy);
  --pale-plum:  var(--pale-burgundy);
  --plum-light: var(--burgundy-light);

  /* ---------- Surfaces ---------- */
  --bg-page:       var(--warm-ivory);    /* main website background */
  --bg-surface:    var(--white);         /* cards, forms, selected panels */
  --bg-alt-plum:   var(--pale-burgundy); /* alternating section background */
  --bg-alt-sand:   var(--pale-sand);     /* subtle callout background */
  --bg-dark:       var(--dark-burgundy); /* footer and darker sections */
  --bg-nav:        rgba(248, 243, 236, 0.88);

  /* ---------- Text ---------- */
  --text-body:        var(--charcoal);       /* body copy, navigation, form labels */
  --text-heading:     var(--burgundy);       /* headings */
  --text-on-sand:     var(--dark-ink);       /* text sitting on a sand surface */
  --text-on-dark:     var(--warm-ivory);     /* text on the burgundy bands */
  --text-on-dark-mid: rgba(248, 243, 236, 0.78);
  --text-on-dark-low: rgba(248, 243, 236, 0.62);
  --text-placeholder: #6E6866;
  --text-emphasis:    var(--burgundy-light); /* lighter-than-burgundy emphasis */
  /* Accent type. Flat gold is a fill colour, not a type colour on light
     surfaces -- #DAB440 on ivory is 1.80:1 -- so small accent labels use
     burgundy, display numerals use the deep gold, and gold type appears only
     where it sits on a burgundy band. */
  --text-accent:         var(--burgundy);  /* small accent labels on ivory/white */
  --text-accent-on-dark: var(--gold);      /* gold type on the burgundy bands */
  --text-accent-display: var(--gold-deep); /* gold display numerals on light */

  /* ---------- Accent (decorative fills, rules and tints) ---------- */
  --accent:         var(--gold);
  --accent-soft:    rgba(234, 199, 42, 0.45);
  --accent-tint:    rgba(234, 199, 42, 0.14);
  --accent-on-dark: var(--gold);

  /* ---------- Links ---------- */
  --link:       var(--burgundy);
  --link-hover: var(--dark-burgundy);

  /* ---------- Buttons ---------- */
  --btn-primary-bg:         var(--gold);
  --btn-primary-bg-hover:   var(--gold-light);
  --btn-primary-text:       var(--dark-ink);
  --btn-secondary-bg:       transparent;
  --btn-secondary-text:     var(--burgundy);
  --btn-secondary-border:   var(--burgundy);
  --btn-secondary-bg-hover: var(--pale-burgundy);

  /* ---------- Forms & focus ---------- */
  --field-bg:       var(--warm-ivory);
  --field-border:   rgba(77, 73, 72, 0.22);
  --focus-ring:     var(--burgundy);
  --focus-glow:     rgba(122, 38, 58, 0.16);

  /* ---------- Lines, tints and shadows ---------- */
  --plum-tint:       rgba(122, 38, 58, 0.08);
  --grid-line:       rgba(122, 38, 58, 0.05);
  --plum-line:       rgba(122, 38, 58, 0.16);
  --border-subtle:   rgba(48, 43, 45, 0.10);
  --border-hairline: rgba(48, 43, 45, 0.05);
  --shadow-soft:     rgba(48, 43, 45, 0.06);
  --shadow-mid:      rgba(48, 43, 45, 0.09);
  --shadow-strong:   rgba(48, 43, 45, 0.16);
}

/* Keyboard focus indicator — burgundy, never gold. */
html a:focus-visible,
html button:focus-visible,
html input:focus-visible,
html select:focus-visible,
html textarea:focus-visible,
html [tabindex]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 3px;
}