/* ============================================================
   Build Know How — Color System
   "Max 3 colors per visual. Orange = highlight only.
    Teal/Green = structure and base."
   ============================================================ */

:root {
  /* ---- Teal — Authority / structure (primary) ---- */
  --teal-900: #0B2D2E;
  --teal-800: #0F3D3E; /* Deep Teal — primary brand */
  --teal-700: #145A5B; /* Teal Mid */
  --teal-600: #1B6F70; /* Teal Light */
  --teal-500: #2A8688;
  --teal-200: #AFCFCE;
  --teal-100: #D9E7E6;
  --teal-50:  #ECF3F2;

  /* ---- Green — Stability / depth (secondary) ---- */
  --green-800: #1F4D3A; /* Dark Green */
  --green-600: #2E6B52; /* Muted Green */
  --green-200: #BFD6C8;
  --green-100: #DCE8E0;

  /* ---- Orange — Attention / highlight (accent, sparing) ---- */
  --orange-700: #C7610F;
  --orange-600: #E6761A; /* Orange Dark */
  --orange-500: #F28C28; /* Orange */
  --orange-200: #F8CFA3;
  --orange-100: #FBE6CF;

  /* ---- Warm neutrals — Sand & ink ---- */
  --sand-50:  #FBFAF6; /* Soft White */
  --sand-100: #F5F0E6; /* Warm Beige — page ground */
  --sand-200: #ECE5D6;
  --sand-300: #DED5C2; /* hairline borders on sand */
  --sand-400: #C9BFA8;

  --ink-900: #14201F; /* near-black, warm */
  --ink-700: #36433F;
  --ink-600: #4C5A55;
  --ink-500: #67746E; /* muted body */
  --ink-400: #8A958E;
  --ink-200: #C3CBC5;

  --white: #FFFFFF;

  /* ---- Semantic aliases ---- */
  --brand:            var(--teal-800);
  --brand-deep:       var(--teal-900);
  --brand-mid:        var(--teal-700);
  --accent:           var(--orange-500);
  --accent-hover:     var(--orange-600);
  --accent-quiet:     var(--orange-100);

  --surface-page:     var(--sand-100);
  --surface-card:     var(--sand-50);
  --surface-raised:   var(--white);
  --surface-inverse:  var(--teal-800);
  --surface-inverse-2:var(--teal-900);
  --surface-quiet:    var(--sand-200);

  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-faint:       var(--ink-400);
  --text-on-dark:     var(--sand-50);
  --text-on-dark-muted: #A7C2C0;
  --text-accent:      var(--orange-600);
  --text-brand:       var(--teal-700);

  --border-subtle:    var(--sand-300);
  --border-strong:    var(--ink-200);
  --border-on-dark:   rgba(255,255,255,0.14);
  --border-accent:    var(--orange-500);

  --focus-ring:       var(--orange-500);

  /* ---- Status (used sparingly, keep within warm system) ---- */
  --positive:         #2E6B52;
  --warning:          #C7610F;
  --critical:         #9E3326;
}