/* ============================================================
   COLORS — Blue Horizon Holistics
   Teal brand + soft sky-blue accent on a warm off-white ground.
   Base scales first, semantic aliases second.
   ============================================================ */
:root {
  /* ---- Brand: Horizon Teal ---- */
  --teal-900: #094A4D;   /* deep — website headings, darkest brand ink */
  --teal-800: #006E77;   /* brand-dark, hovers */
  --teal-700: #007E8A;
  --teal-600: #00939F;   /* PRIMARY brand */
  --teal-500: #16A3AE;
  --teal-400: #33B5BF;   /* brand-light */
  --teal-300: #7FD0D6;
  --teal-200: #B9E5E8;
  --teal-100: #DFF4F5;   /* subtle fills, confirmed badge */
  --teal-050: #EEF9FA;

  /* ---- Accent: Soft Sky ---- */
  --sky-700: #3F6E82;
  --sky-600: #5A8DA1;
  --sky-500: #79ABBE;   /* PRIMARY accent — powder sky-blue */
  --sky-400: #A3C8D6;
  --sky-300: #C6DEE7;
  --sky-100: #E9F2F6;

  /* ---- Warm neutrals ---- */
  --cream-050: #FCFBF8;
  --cream-100: #FAFAF7;   /* card hover */
  --cream-200: #F7F5F0;   /* app body ground */
  --cream-300: #F2F0EB;   /* inputs, sunken surfaces */
  --cream-400: #EDE9E1;   /* light border */
  --cream-500: #E4E0D8;   /* default border */

  --ink-900: #1C2B2D;   /* headings */
  --ink-700: #3D4F52;   /* body */
  --ink-500: #7A8C8E;   /* light / secondary */
  --ink-300: #A0ACAE;   /* muted / placeholder */
  --white:   #FFFFFF;

  /* ---- Raw status hues ---- */
  --green-600: #3BA676;
  --green-700: #2D7F52;
  --green-100: #E9F7EC;
  --amber-600: #C87C00;
  --amber-100: #FFF4E0;
  --red-600:   #C74B4B;
  --red-100:   rgba(199, 75, 75, 0.10);
  --blue-600:  #4A90C4;
  --blue-100:  rgba(74, 144, 196, 0.10);
  --violet-600:#7C3AED;
  --violet-100:#F3E8FF;

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */
  --brand:          var(--teal-600);
  --brand-light:    var(--teal-400);
  --brand-dark:     var(--teal-800);
  --brand-deep:     var(--teal-900);
  --brand-subtle:   rgba(0, 147, 159, 0.08);
  --brand-glow:     rgba(0, 147, 159, 0.18);
  --accent:         var(--sky-500);
  --accent-light:   var(--sky-400);
  --accent-subtle:  rgba(121, 171, 190, 0.12);

  --surface-body:        var(--cream-200);
  --surface-body-warm:   #F5F3EF;   /* website ground */
  --surface-card:        var(--white);
  --surface-card-hover:  var(--cream-100);
  --surface-nav:         var(--white);
  --surface-input:       var(--cream-300);
  --surface-overlay:     rgba(9, 74, 77, 0.40);

  --text-heading:  var(--ink-900);
  --text-body:     var(--ink-700);
  --text-light:    var(--ink-500);
  --text-muted:    var(--ink-300);
  --text-on-brand: var(--white);
  --text-brand:    var(--brand);

  --border-default: var(--cream-500);
  --border-light:   var(--cream-400);
  --border-strong:  #D6D0C4;

  /* Status semantic */
  --status-success:    var(--green-600);
  --status-success-bg: var(--green-100);
  --status-warning:    var(--amber-600);
  --status-warning-bg: rgba(200, 124, 0, 0.12);
  --status-danger:     var(--red-600);
  --status-danger-bg:  var(--red-100);
  --status-info:       var(--blue-600);
  --status-info-bg:    var(--blue-100);

  /* Link colors */
  --link:       var(--brand);
  --link-hover: var(--brand-dark);
}