/* Loopi Digital — colour system.
   Two-pole brand: near-black green ink + neon spring green.
   The mark's green (#00F49B) is the single source of brand truth. */
:root {
  /* ---- Ink / near-black greens (backgrounds) ---- */
  --ink-1000: #010604; /* @kind color */
  --ink-950: #030B08; /* @kind color */
  --ink-900: #05120E; /* @kind color */
  --ink-850: #071A14; /* @kind color */
  --ink-800: #0A231C; /* @kind color */
  --ink-750: #0D2C23; /* @kind color */
  --ink-700: #11362B; /* @kind color */
  --ink-600: #174537; /* @kind color */
  --ink-500: #1F5544; /* @kind color */

  /* ---- Brand green ramp (spring green / neon) ---- */
  --green-50: #EAFFF6; /* @kind color */
  --green-100: #BFFFE4; /* @kind color */
  --green-200: #8AFFD0; /* @kind color */
  --green-300: #4DFFBB; /* @kind color */
  --green-400: #14FFA9; /* neon peak — glow + focus */
  --green-500: #00F49B; /* BRAND PRIMARY — from the logo mark */
  --green-600: #00CE81; /* @kind color */
  --green-700: #00A366; /* @kind color */
  --green-800: #04754B; /* @kind color */
  --green-900: #054733; /* @kind color */

  /* ---- Support accent: acid (data highlights only, ≤5% of a screen) ---- */
  --acid-300: #E4FF8F; /* @kind color */
  --acid-400: #CBFF52; /* @kind color */
  --acid-500: #B4F224; /* @kind color */

  /* ---- Chrome / bright metal (headline fills, bevels, dividers) ---- */
  --chrome-100: #FFFFFF; /* @kind color */
  --chrome-200: #E7F0ED; /* @kind color */
  --chrome-300: #C3D2CD; /* @kind color */
  --chrome-400: #94A6A1; /* @kind color */
  --chrome-500: #64756F; /* @kind color */
  --chrome-600: #3C4A45; /* @kind color */

  /* ---- Semantic status ---- */
  --status-positive: #00F49B; /* @kind color */
  --status-warning: #FFC24B; /* @kind color */
  --status-danger: #FF5C72; /* @kind color */
  --status-info: #4FD9FF; /* @kind color */
  --status-neutral: var(--chrome-400); /* @kind color */

  /* ---- Semantic text ---- */
  --text-strong: #F1FCF8; /* @kind color */
  --text-body: rgba(232, 250, 244, 0.74); /* @kind color */
  --text-muted: rgba(232, 250, 244, 0.5); /* @kind color */
  --text-faint: rgba(232, 250, 244, 0.3); /* @kind color */
  --text-brand: var(--green-500); /* @kind color */
  --text-on-brand: #02150F; /* @kind color */
  --text-link: var(--green-400); /* @kind color */
  --text-link-hover: var(--green-200); /* @kind color */

  /* ---- Semantic surfaces ---- */
  --surface-canvas: var(--ink-950); /* @kind color */
  --surface-canvas-alt: var(--ink-900); /* @kind color */
  --surface-card: rgba(255, 255, 255, 0.035); /* @kind color */
  --surface-card-hover: rgba(255, 255, 255, 0.06); /* @kind color */
  --surface-glass: rgba(9, 32, 25, 0.55); /* @kind color */
  --surface-raised: #0A211A; /* @kind color */
  --surface-sunken: rgba(0, 0, 0, 0.32); /* @kind color */
  --surface-brand: var(--green-500); /* @kind color */
  --surface-brand-soft: rgba(0, 244, 155, 0.12); /* @kind color */
  --surface-inverse: var(--chrome-100); /* @kind color */

  /* ---- Semantic borders ---- */
  --border-hairline: rgba(255, 255, 255, 0.07); /* @kind color */
  --border-glass: rgba(255, 255, 255, 0.12); /* @kind color */
  --border-strong: rgba(255, 255, 255, 0.2); /* @kind color */
  --border-brand: rgba(0, 244, 155, 0.45); /* @kind color */
  --border-brand-soft: rgba(0, 244, 155, 0.18); /* @kind color */
  --focus-ring: var(--green-400); /* @kind color */
}