/* Cognexion color tokens — Apple-gray neutrals, blue primary, purple secondary */
:root {
  /* Primary — action blue */
  --blue: #0071E3;
  --blue-hover: #006EDB;
  --blue-press: #0076DF;
  --blue-tint: rgba(0, 113, 227, 0.08);
  --blue-ring: rgba(0, 113, 227, 0.12);

  /* Secondary — purple */
  --purple: #533AFD;
  --purple-hover: #4329E8;
  --purple-press: #3720D4;
  --purple-tint: rgba(83, 58, 253, 0.08);
  --purple-muted: #C9C3F0;
  --lavender: #E8E9FF;

  /* Neutrals (Apple grays) */
  --gray-900: #1D1D1F;
  --gray-700: #333336;
  --gray-500: #6E6E73;
  --gray-300: #D5D5D7;
  --gray-100: #EDEDF2;
  --gray-50:  #F5F5F7;
  --white: #FFFFFF;

  /* Dark surfaces */
  --dark-900: #18181A;
  --dark-700: #272729;
  --dark-border: rgba(255, 255, 255, 0.14);
  --dark-text: #F5F5F7;
  --dark-text-muted: rgba(245, 245, 247, 0.64);

  /* Semantic (status) */
  --success-bg: #D1FAE5;
  --success-text: #065F46;
  --success-border: #A7F3D0;
  --alert-bg: #FEE2E2;
  --alert-text: #991B1B;
  --alert-border: #FECACA;
  --info-bg: #E8E9FF;
  --info-text: #533AFD;
  --info-border: #C9C3F0;
  --error: #DC2626;

  /* Semantic aliases */
  --text-body: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-500);
  --text-inverse: var(--white);
  --surface-page: var(--white);
  --surface-card: var(--white);
  --surface-subtle: var(--gray-50);
  --surface-dark: var(--dark-900);
  --surface-nav: rgba(255, 255, 255, 0.8);
  --border-subtle: var(--gray-100);
  --border-input: var(--gray-300);
  --accent-primary: var(--blue);
  --accent-secondary: var(--purple);

  /* Brand gradient — subtle only (5–10% over white), 135deg blue → purple */
  --gradient-brand-subtle: linear-gradient(135deg, rgba(0, 113, 227, 0.08) 0%, rgba(83, 58, 253, 0.06) 100%); /* @kind color */
  --gradient-brand-tint: linear-gradient(135deg, rgba(0, 113, 227, 0.05) 0%, rgba(83, 58, 253, 0.10) 100%);
}