/* Clopos design tokens — colour PRIMITIVES (raw palette).
   The base layer: every named swatch from the Figma colour styles (see ../colors.html).
   Light values. Don't reference these directly in components — use the SEMANTIC layer
   (semantic.css, the --color-* tokens) which maps roles onto these primitives. */
:root {
  /* ── Primary ───────────────────────────── */
  --primary-50:  #DFEFFF;  --primary-100: #96CAFF; --primary-150: #8CC5FF;
  --primary-200: #81BFFF;  --primary-250: #74B9FF; --primary-300: #66B2FF;
  --primary-350: #57AAFF;  --primary-400: #4FA6FF; --primary-450: #46A1FF;
  --primary-500: #2684FF;  --primary-550: #2F8AE8; --primary-600: #2B7DD3;
  --primary-650: #2772C0;  --primary-700: #2368AF; --primary-750: #205F9F;
  --primary-800: #1D5691;  --primary-850: #1A4E84; --primary-900: #184778;

  /* ── Secondary ─────────────────────────── */
  --secondary-50:  #A0A0B4; --secondary-100: #82809B; --secondary-200: #676586;
  --secondary-300: #58567A; --secondary-400: #47456D; --secondary-500: #35325E;
  --secondary-600: #312E56; --secondary-700: #2C294D; --secondary-800: #282546;
  --secondary-900: #242240;

  /* ── Text ──────────────────────────────── */
  --text-100: #FFFFFF;  --text-200: #999999; --text-300: #666666;
  --text-400: #333333;  --text-500: #1D1D1D; --text-600: #030303;

  /* ── Grey ──────────────────────────────── */
  --grey-100: #F8F8FC; --grey-200: #F2F2F7; --grey-300: #E5E5EA;
  --grey-400: #D1D1D6; --grey-500: #C0C0C5; --grey-600: #A4A4A9; --grey-700: #8E8E93;
  --grey-300-fill: #F2F2F7;  /* soft fill for outline-button hover (≈ grey-200) */

  /* ── Basic · White / Black ─────────────── */
  --white-100: #FDFDFD; --white-300: #FAFAFA; --white-500: #FFFFFF;
  --black-main: #030303; --black-30: #B3B3B3;

  /* ── Basic · Metal Grey ────────────────── */
  --metal-grey-100: #F8FAFB; --metal-grey-200: #F2F4F5;
  --metal-grey-300: #F1F5F7;  /* interpolated 200↔500 — confirm against Figma */
  --metal-grey-500: #F0F6FA;

  /* ── Basic · Other ─────────────────────── */
  --orange-100: #FFEBD4; --orange-300: #FEB764; --orange-500: #FF8215;
  --basic-grey:    #F1F1EF;
  --yellow:        #F5DE74;
  --light-yellow:  #F1F1EF;
  --chrome:        #5F6774;
  --green-chrome:  #768994;
  --sky-blue:      #F5F9FF;
  --cyan:          #17A7B8;

  /* ── Systems · Success ─────────────────── */
  --success-main: #218E3A;  --success-500: #218E3A;  /* Main == 500 */
  --success-400: #00C56A;   --success-200: #E9F4EB;

  /* ── Systems · Fail ────────────────────── */
  --fail-main: #FF564D;  --fail-500: #FF564D;  /* Main == 500 */
  --fail-800: #EF564D;   --fail-15:  #FFECEB;

  /* ── Systems · Attention / misc ────────── */
  --attention-main: #FFAE00; --attention-200: #FFF8DF; --attention-700: #D4690B;  /* dark orange · readable warning text */
  --disabled:    #C4C4CC;
  --system-blue: #0080D1;
}