/* PsyOn Labs design tokens. Contrast values calculated with the WCAG 2.2 formula. */
:root {
  /* Primary */
  --psyon-petrol: #0E3A45;        /* rgb(14 58 69) */
  /* Accent: the ring of the symbol, knobs, indicators. Never small text. */
  --psyon-vermilion: #E4521B;     /* rgb(228 82 27) */
  /* Neutrals */
  --psyon-paper: #F6F4EE;        /* rgb(246 244 238) */
  --psyon-mist: #C9D3D4;         /* rgb(201 211 212) */
  --psyon-graphite: #4A5357;     /* rgb(74 83 87) */
  --psyon-white: #FFFFFF;
  --psyon-black: #000000;

  /* Roles, light theme */
  --psyon-bg: var(--psyon-white);
  --psyon-surface: var(--psyon-paper);
  --psyon-text: var(--psyon-petrol);         /* 12.28:1 on white, 11.17:1 on paper */
  --psyon-text-muted: var(--psyon-graphite); /* 7.88:1 on white, 7.16:1 on paper */
  --psyon-rule: var(--psyon-mist);
  --psyon-logo-a: var(--psyon-petrol);
  --psyon-logo-b: var(--psyon-vermilion);    /* 3.8:1 on white, 3.46:1 on paper: logo and graphics only */
}

/* Roles, dark theme */
[data-theme="dark"] {
  --psyon-bg: var(--psyon-petrol);
  --psyon-surface: #15505E;
  --psyon-text: var(--psyon-white);          /* 12.28:1 on petrol */
  --psyon-text-muted: var(--psyon-mist);     /* 8.04:1 on petrol */
  --psyon-rule: #2B5A65;
  --psyon-logo-a: var(--psyon-white);
  --psyon-logo-b: var(--psyon-vermilion);    /* 3.23:1 on petrol: logo and graphics only */
}