/* ── Jetgam color system ──────────────────────────────────────────────
   Near-monochrome. One accent (jade). Roughly 70% off-white / 20% ink / 10% jade.
   Light theme is the default and only theme. Use jade SPARINGLY — most surfaces
   carry no color at all. Every text/background pairing below meets WCAG AA. */

:root {
  /* ── Base palette ── */
  --jade-700: #0A565C;   /* jade, pressed / hover-dark */
  --jade-600: #0E7C86;   /* jade, primary accent */
  --jade-50:  #E6F1F2;   /* jade, faint tint for fills/wash */

  --ink-900:  #0C1418;   /* near-black ink — text & secondary buttons */
  --slate-500:#5B6670;   /* muted text */

  --offwhite: #F7F6F2;   /* page background */
  --white:    #FFFFFF;   /* raised surfaces / cards */
  --hairline: #E7E5DF;   /* 1px borders & dividers */

  /* ── Semantic aliases ── */
  --color-bg:            var(--offwhite);  /* page canvas */
  --color-surface:       var(--white);     /* cards, nav, inputs */
  --color-surface-sunk:  var(--offwhite);  /* recessed wells */

  --color-text:          var(--ink-900);   /* primary copy & headings */
  --color-text-muted:    var(--slate-500); /* secondary copy, captions, labels */
  --color-text-onaccent: var(--white);     /* text on jade fills */
  --color-text-oninvert: var(--offwhite);  /* text on ink surfaces */

  --color-accent:        var(--jade-600);  /* the single accent */
  --color-accent-hover:  var(--jade-700);  /* accent hover / press */
  --color-accent-wash:   var(--jade-50);   /* faint jade fill */

  --color-border:        var(--hairline);  /* default hairline */
  --color-border-strong: #D6D3CB;          /* slightly stronger divider */

  --color-invert-bg:     var(--ink-900);   /* dark sections / footer */

  /* Focus ring — jade at AA-visible strength, used on every interactive el */
  --color-focus-ring:    var(--jade-600);
  --focus-ring:          0 0 0 3px rgba(14, 124, 134, 0.35);
}