/* NextON Services — Color tokens
   Brand: teal #006060 (primary), green #21B24B (accent).
   Neutrals are subtly teal-tinted slate for a cohesive, data-forward feel. */
:root {
  /* Teal ramp (primary) */
  --teal-950: #002b2b;
  --teal-900: #003a3a;
  --teal-800: #004d4d;
  --teal-700: #006060; /* brand primary */
  --teal-600: #0a7676;
  --teal-500: #158c8c;
  --teal-400: #4dabab;
  --teal-300: #86c8c8;
  --teal-200: #b9e0e0;
  --teal-100: #d9eeee;
  --teal-50:  #eef7f7;

  /* Green ramp (accent) */
  --green-900: #0e5f26;
  --green-800: #157a34;
  --green-700: #1a9a41;
  --green-600: #21b24b; /* brand accent */
  --green-500: #38c763;
  --green-400: #62d585;
  --green-300: #93e2aa;
  --green-200: #c2f0cf;
  --green-100: #dcf6e4;
  --green-50:  #eefbf2;

  /* Neutral ramp (teal-tinted slate) */
  --neutral-950: #0c1615;
  --neutral-900: #12211f;
  --neutral-800: #1f302e;
  --neutral-700: #35443f;
  --neutral-600: #4f5f5b;
  --neutral-500: #6d7c78;
  --neutral-400: #93a19d;
  --neutral-300: #c0c9c6;
  --neutral-200: #e1e7e5;
  --neutral-100: #eef2f1;
  --neutral-50:  #f7faf9;
  --white: #ffffff;
  --black: #000000;

  /* Semantic palette */
  --color-success: #1a9a41;
  --color-success-surface: #eefbf2;
  --color-warning: #c98a10;
  --color-warning-surface: #fdf5e3;
  --color-danger: #cf3f3f;
  --color-danger-surface: #fdeeee;
  --color-info: #0a7676;
  --color-info-surface: #eef7f7;

  /* Semantic aliases */
  --brand-primary: var(--teal-700);
  --brand-primary-hover: var(--teal-800);
  --brand-primary-active: var(--teal-900);
  --brand-accent: var(--green-600);
  --brand-accent-hover: var(--green-700);

  --text-strong: var(--neutral-900);
  --text-body: var(--neutral-800);
  --text-muted: var(--neutral-500);
  --text-subtle: var(--neutral-400);
  --text-on-brand: var(--white);
  --text-link: var(--teal-700);
  --text-link-hover: var(--teal-800);

  --surface-page: var(--neutral-50);
  --surface-card: var(--white);
  --surface-sunken: var(--neutral-100);
  --surface-brand: var(--teal-700);
  --surface-brand-subtle: var(--teal-50);
  --surface-accent-subtle: var(--green-50);

  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-brand: var(--teal-700);
  --focus-ring: color-mix(in srgb, var(--teal-600) 45%, transparent);
}