/* Upskill Health — Colour system
   Base palette from Brand Kit (V1 · June 2026). Anchor green, sage support,
   cool off-white ground, rose accent (sparing), ink for body. */

:root {
  /* ---- Brand base palette ---- */
  --green-900: #2C3B31; /* Deep green — anchor / dark surfaces */
  --sage-500:  #7A9E7E; /* Sage — supporting tint */
  --off-white: #F7F8F5; /* Cool off-white — page ground */
  --white:     #FFFFFF; /* Cards / surfaces */
  --rose-500:  #C84B6E; /* Rose — accent only, sparing */
  --ink:       #1F2A24; /* Body text */

  /* ---- Green ramp (derived, harmonious in oklch) ---- */
  --green-950: oklch(0.24 0.018 158);
  --green-800: oklch(0.34 0.026 158);
  --green-700: oklch(0.44 0.034 158);
  --green-600: oklch(0.56 0.045 154);
  --green-100: oklch(0.95 0.012 158); /* faint green wash */
  --green-050: oklch(0.975 0.008 158);

  /* ---- Sage ramp ---- */
  --sage-700: oklch(0.55 0.05 150);
  --sage-300: oklch(0.85 0.04 150);
  --sage-100: oklch(0.93 0.025 150); /* sage tint surface */
  --sage-050: oklch(0.965 0.014 150);

  /* ---- Rose ramp (accent, used sparingly) ---- */
  --rose-700: oklch(0.50 0.16 5);
  --rose-100: oklch(0.93 0.045 5);
  --rose-050: oklch(0.97 0.022 5);

  /* ---- Neutral / ink ramp (cool, green-leaning greys) ---- */
  --ink-900: #1F2A24;
  --ink-700: oklch(0.42 0.012 160);
  --ink-500: oklch(0.55 0.010 160); /* muted body */
  --ink-400: oklch(0.66 0.008 160); /* captions, meta */
  --ink-300: oklch(0.80 0.006 160); /* hairlines on dark */
  --line-200: oklch(0.90 0.006 160); /* borders on light */
  --line-100: oklch(0.945 0.005 160); /* faint dividers */

  /* ---- Semantic aliases ---- */
  --color-bg:            var(--off-white);
  --color-surface:       var(--white);
  --color-surface-sage:  var(--sage-100);
  --color-surface-wash:  var(--green-050);
  --color-surface-dark:  var(--green-900);
  --color-surface-darker:var(--green-950);

  --text-heading:   var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-caption:   var(--ink-400);
  --text-inverse:   var(--off-white);
  --text-inverse-muted: oklch(0.82 0.02 150);

  --accent:         var(--rose-500);
  --accent-hover:   var(--rose-700);
  --accent-wash:    var(--rose-050);

  --brand:          var(--green-900);
  --brand-hover:    var(--green-800);
  --brand-active:   var(--green-950);
  --brand-soft:     var(--sage-500);

  --border:         var(--line-200);
  --border-strong:  var(--line-100);
  --border-on-dark: color-mix(in oklab, var(--off-white) 16%, transparent);
  --divider:        var(--line-100);

  --focus-ring:     color-mix(in oklab, var(--sage-500) 80%, var(--green-900));

  /* Data-layer accent (mono figures sit in green/ink, not rose) */
  --data-fg:        var(--green-800);
}