/* ============================================================
   GynJess — Colors  ·  PEACOCK palette (adopted sitewide)
   Deep teal primary + emerald/jade spectrum + antique gold accent
   on soft teal-tinted paper. Chosen from the palette try-on tool
   (guidelines/palette-tryon.html → "Peacock · Multi").
   ============================================================ */

:root {
  /* — Signature — */
  --teal: #0e7c8b;   /* primary: buttons, links, eyebrows */
  --gold: #e0a53f;   /* accent: emphasis words, fills, ornament */

  /* — Teal ramp (primary) — */
  --teal-100: #e6f3f2;
  --teal-200: #d0e8e6;
  --teal-300: #a8d6d6;
  --teal-400: #63b3ba;
  --teal-500: #1f96a3;
  --teal-600: #0e7c8b;   /* button fill — white text passes AA */
  --teal-700: #0a5a66;
  --teal-800: #0a4a54;   /* header */
  --teal-900: #123a4a;   /* deep sections, ink */

  /* — Gold ramp (accent) — */
  --gold-100: #f8f2e6;
  --gold-200: #f0e2c6;
  --gold-300: #e8cd94;
  --gold-400: #e0a53f;
  --gold-500: #c98a2f;
  --gold-600: #a87020;
  --gold-700: #7c5f1e;
  --gold-800: #5a4420;
  --gold-900: #3a2e12;

  /* — Peacock spectrum (multi-color accents: icons, chips, tags) —
     Use --peacock-N for FILLS and icon glyphs (3:1 graphics threshold).
     Use --peacock-N-text when the same hue must carry small text (AA 4.5:1). */
  --peacock-1: #123a6b;  /* sapphire */
  --peacock-2: #0e7c8b;  /* teal */
  --peacock-3: #1f9e8f;  /* emerald */
  --peacock-4: #2fb37a;  /* jade */
  --peacock-5: #7d5fb0;  /* violet */
  --peacock-6: #c04f8f;  /* magenta */
  --peacock-7: #e0a53f;  /* gold */

  /* Text-safe spectrum (≥4.5:1 on white) */
  --peacock-1-text: #123a6b;
  --peacock-2-text: #0e7c8b;
  --peacock-3-text: #1a8478;
  --peacock-4-text: #228359;
  --peacock-5-text: #7d5fb0;
  --peacock-6-text: #be498b;
  --peacock-7-text: #9b6b19;

  /* — Neutrals — */
  --ink:   #123a4a;
  --slate: #4f6d72;
  --line:  #d5e8e6;
  --cream: #e2f1f0;
  --paper: #f2f9f9;
  --white: #ffffff;
  --aubergine: #4a2740;   /* deep alt surface (was footer) */
  --sand:      #f8f2e6;   /* peachy sand — footer (also --section-4) */
  --sand-deep: #f2e6d2;   /* deeper sand — alt footer / warm accent surface */

  /* — Section background shades —
     ADJACENCY RULE: never repeat a shade on two touching sections, and never
     let the first section match --color-header or the last match --color-footer.
     Walk this list in order and skip a shade that would collide. */
  --section-1: #eef7f5;   /* mint */
  --section-2: #e7f0f6;   /* sky */
  --section-3: #f1f6ea;   /* jade */
  --section-4: #f8f2e6;   /* sand */
  --section-5: #f5edf1;   /* mauve */

  /* — Semantic aliases (prefer these in components) — */
  --color-bg:             var(--paper);
  --color-surface:        var(--cream);
  --color-surface-raised: var(--white);
  --color-text:           var(--ink);
  --color-text-muted:     var(--slate);
  --color-border:         var(--line);
  --color-heading:        var(--ink);
  --color-primary:        var(--teal-600);
  --color-primary-hover:  var(--teal-700);
  --color-primary-text:   var(--white);
  --color-accent:         var(--gold);
  /* Accent as text. Default is the bright brand gold (the adopted look).
     NOTE: bright gold is 2.05:1 on light grounds — fails WCAG at any size,
     so treat gold-on-light as decorative emphasis only.
     --color-accent-text-aa (#8F6216) is the AA-safe alternative: >=4.6:1 on
     every light section shade and on white. Opt in where AA is required. */
  --color-accent-text:    var(--gold-400);
  --color-accent-text-aa: #8f6216;
  --color-link:           var(--teal-600);
  --color-link-hover:     var(--teal-700);

  /* — Layout surfaces — */
  --color-header: var(--teal-800);
  --color-footer:    var(--sand);
  --color-footer-fg: var(--ink);
  --color-footer-sub: #5f6d64;   /* 4.88:1 on footer */
  --color-footer-link: #0d7684;   /* 4.78:1 on footer */
  --color-footer-line: #e6ddca;
  --color-deep:   var(--teal-900);

  /* — Status (warm-neutral, tuned to the peacock register) — */
  --color-success: #1e845f;   /* 4.65:1 on white */
  --color-warning: #9b671e;   /* 4.82:1 on white */
  --color-danger:  #a8384a;   /* 6.31:1 on white */
}