/* LSPC color system
   Brand comes from the logo: teal #2a8784 and logo-gray #d8d9da.
   Teal + neutral scales derived harmonically (oklch) around those two anchors. */
:root{
  /* ---- Brand teal scale ---- */
  --teal-50:#eef6f5;
  --teal-100:#d3e8e6;
  --teal-200:#a7d1cd;
  --teal-300:#72b5b0;
  --teal-400:#469a95;
  --teal-500:#2a8784;   /* brand primary — from logo */
  --teal-600:#226e6b;
  --teal-700:#1c5754;
  --teal-800:#184744;
  --teal-900:#123230;

  /* ---- Neutral / gray scale ---- */
  --gray-0:#ffffff;
  --gray-50:#f7f8f8;
  --gray-100:#eceded;
  --gray-200:#d8d9da;   /* logo gray */
  --gray-300:#bcbfc0;
  --gray-400:#9a9ea0;
  --gray-500:#767b7d;
  --gray-600:#585d5f;
  --gray-700:#3f4446;
  --gray-800:#2a2e2f;
  --gray-900:#181b1c;

  /* ---- Semantic status ---- */
  --amber-500:#c98a1a;
  --amber-100:#f6e9cf;
  --red-500:#c0453a;
  --red-100:#f5d9d5;
  --green-500:#3f8f5b;
  --green-100:#d8ecdf;

  /* ---- Semantic aliases ---- */
  --brand:var(--teal-500);
  --brand-hover:var(--teal-600);
  --brand-active:var(--teal-700);
  --brand-contrast:#ffffff;

  --text-strong:var(--gray-900);
  --text-body:var(--gray-800);
  --text-muted:var(--gray-500);
  --text-onbrand:#ffffff;
  --text-link:var(--teal-600);
  --text-link-hover:var(--teal-700);

  --surface-page:var(--gray-0);
  --surface-subtle:var(--gray-50);
  --surface-card:#ffffff;
  --surface-sunken:var(--gray-100);
  --surface-brand:var(--teal-500);
  --surface-brand-subtle:var(--teal-50);

  --border-subtle:var(--gray-200);
  --border-default:var(--gray-300);
  --border-strong:var(--gray-400);
  --border-brand:var(--teal-500);

  --status-warning:var(--amber-500);
  --status-warning-bg:var(--amber-100);
  --status-danger:var(--red-500);
  --status-danger-bg:var(--red-100);
  --status-success:var(--green-500);
  --status-success-bg:var(--green-100);
}