/*
 * Maps Redmine 7 core variables (open-color --oc-*, --fonts-main, --color-*) to M3 roles.
 * Core CSS uses these ~330 times, so this file recolors most of Redmine, and because
 * the roles switch per palette and mode (palettes.css), all of Redmine follows.
 *
 * Ramp per color family (index 0-9): 0-2 light containers, 3-5 mid tones for
 * borders, 6-9 the strong role color used for text and icons.
 * --oc-white is used both as background and as text on strong colors; both work with
 * surface-container-lowest because strong colors are light in dark mode.
 */

:root {
  --fonts-main: var(--md-ref-typeface-plain);
  --color-current-marker: var(--md-sys-color-primary);

  --oc-white: var(--md-sys-color-surface-container-lowest);
  --oc-black: var(--md-sys-color-inverse-surface);

  --oc-gray-0: var(--md-sys-color-surface-container-low);
  --oc-gray-1: var(--md-sys-color-surface-container);
  --oc-gray-2: var(--md-sys-color-surface-container-high);
  --oc-gray-3: var(--md-sys-color-surface-container-highest);
  --oc-gray-4: var(--md-sys-color-outline-variant);
  --oc-gray-5: var(--md-sys-color-outline);
  --oc-gray-6: var(--md-sys-color-on-surface-variant);
  --oc-gray-7: var(--md-sys-color-on-surface-variant);
  --oc-gray-8: var(--md-sys-color-on-surface);
  --oc-gray-9: var(--md-sys-color-on-surface);

  --oc-blue-0: color-mix(in srgb, var(--md-sys-color-primary-container) 35%, var(--md-sys-color-surface));
  --oc-blue-1: color-mix(in srgb, var(--md-sys-color-primary-container) 65%, var(--md-sys-color-surface));
  --oc-blue-2: var(--md-sys-color-primary-container);
  --oc-blue-3: color-mix(in srgb, var(--md-sys-color-primary) 35%, var(--md-sys-color-primary-container));
  --oc-blue-4: color-mix(in srgb, var(--md-sys-color-primary) 60%, var(--md-sys-color-primary-container));
  --oc-blue-5: color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-primary-container));
  --oc-blue-6: var(--md-sys-color-primary);
  --oc-blue-7: var(--md-sys-color-primary);
  --oc-blue-8: var(--md-sys-color-primary);
  --oc-blue-9: var(--md-sys-color-primary);

  --oc-indigo-0: color-mix(in srgb, var(--md-sys-color-primary-container) 35%, var(--md-sys-color-surface));
  --oc-indigo-1: color-mix(in srgb, var(--md-sys-color-primary-container) 65%, var(--md-sys-color-surface));
  --oc-indigo-2: var(--md-sys-color-primary-container);
  --oc-indigo-3: color-mix(in srgb, var(--md-sys-color-primary) 35%, var(--md-sys-color-primary-container));
  --oc-indigo-4: color-mix(in srgb, var(--md-sys-color-primary) 60%, var(--md-sys-color-primary-container));
  --oc-indigo-5: color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-primary-container));
  --oc-indigo-6: var(--md-sys-color-primary);
  --oc-indigo-7: var(--md-sys-color-primary);
  --oc-indigo-8: var(--md-sys-color-primary);
  --oc-indigo-9: var(--md-sys-color-primary);

  --oc-cyan-0: color-mix(in srgb, var(--md-sys-color-primary-container) 35%, var(--md-sys-color-surface));
  --oc-cyan-1: color-mix(in srgb, var(--md-sys-color-primary-container) 65%, var(--md-sys-color-surface));
  --oc-cyan-2: var(--md-sys-color-primary-container);
  --oc-cyan-3: color-mix(in srgb, var(--md-sys-color-primary) 35%, var(--md-sys-color-primary-container));
  --oc-cyan-4: color-mix(in srgb, var(--md-sys-color-primary) 60%, var(--md-sys-color-primary-container));
  --oc-cyan-5: color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-primary-container));
  --oc-cyan-6: var(--md-sys-color-primary);
  --oc-cyan-7: var(--md-sys-color-primary);
  --oc-cyan-8: var(--md-sys-color-primary);
  --oc-cyan-9: var(--md-sys-color-primary);

  --oc-violet-0: color-mix(in srgb, var(--md-sys-color-primary-container) 35%, var(--md-sys-color-surface));
  --oc-violet-1: color-mix(in srgb, var(--md-sys-color-primary-container) 65%, var(--md-sys-color-surface));
  --oc-violet-2: var(--md-sys-color-primary-container);
  --oc-violet-3: color-mix(in srgb, var(--md-sys-color-primary) 35%, var(--md-sys-color-primary-container));
  --oc-violet-4: color-mix(in srgb, var(--md-sys-color-primary) 60%, var(--md-sys-color-primary-container));
  --oc-violet-5: color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-primary-container));
  --oc-violet-6: var(--md-sys-color-primary);
  --oc-violet-7: var(--md-sys-color-primary);
  --oc-violet-8: var(--md-sys-color-primary);
  --oc-violet-9: var(--md-sys-color-primary);

  --oc-grape-0: color-mix(in srgb, var(--md-sys-color-primary-container) 35%, var(--md-sys-color-surface));
  --oc-grape-1: color-mix(in srgb, var(--md-sys-color-primary-container) 65%, var(--md-sys-color-surface));
  --oc-grape-2: var(--md-sys-color-primary-container);
  --oc-grape-3: color-mix(in srgb, var(--md-sys-color-primary) 35%, var(--md-sys-color-primary-container));
  --oc-grape-4: color-mix(in srgb, var(--md-sys-color-primary) 60%, var(--md-sys-color-primary-container));
  --oc-grape-5: color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-primary-container));
  --oc-grape-6: var(--md-sys-color-primary);
  --oc-grape-7: var(--md-sys-color-primary);
  --oc-grape-8: var(--md-sys-color-primary);
  --oc-grape-9: var(--md-sys-color-primary);

  --oc-pink-0: color-mix(in srgb, var(--md-sys-color-tertiary-container) 35%, var(--md-sys-color-surface));
  --oc-pink-1: color-mix(in srgb, var(--md-sys-color-tertiary-container) 65%, var(--md-sys-color-surface));
  --oc-pink-2: var(--md-sys-color-tertiary-container);
  --oc-pink-3: color-mix(in srgb, var(--md-sys-color-tertiary) 35%, var(--md-sys-color-tertiary-container));
  --oc-pink-4: color-mix(in srgb, var(--md-sys-color-tertiary) 60%, var(--md-sys-color-tertiary-container));
  --oc-pink-5: color-mix(in srgb, var(--md-sys-color-tertiary) 80%, var(--md-sys-color-tertiary-container));
  --oc-pink-6: var(--md-sys-color-tertiary);
  --oc-pink-7: var(--md-sys-color-tertiary);
  --oc-pink-8: var(--md-sys-color-tertiary);
  --oc-pink-9: var(--md-sys-color-tertiary);

  --oc-red-0: color-mix(in srgb, var(--md-sys-color-error-container) 35%, var(--md-sys-color-surface));
  --oc-red-1: color-mix(in srgb, var(--md-sys-color-error-container) 65%, var(--md-sys-color-surface));
  --oc-red-2: var(--md-sys-color-error-container);
  --oc-red-3: color-mix(in srgb, var(--md-sys-color-error) 35%, var(--md-sys-color-error-container));
  --oc-red-4: color-mix(in srgb, var(--md-sys-color-error) 60%, var(--md-sys-color-error-container));
  --oc-red-5: color-mix(in srgb, var(--md-sys-color-error) 80%, var(--md-sys-color-error-container));
  --oc-red-6: var(--md-sys-color-error);
  --oc-red-7: var(--md-sys-color-error);
  --oc-red-8: var(--md-sys-color-error);
  --oc-red-9: var(--md-sys-color-error);

  --oc-green-0: color-mix(in srgb, var(--md-sys-color-success-container) 35%, var(--md-sys-color-surface));
  --oc-green-1: color-mix(in srgb, var(--md-sys-color-success-container) 65%, var(--md-sys-color-surface));
  --oc-green-2: var(--md-sys-color-success-container);
  --oc-green-3: color-mix(in srgb, var(--md-sys-color-success) 35%, var(--md-sys-color-success-container));
  --oc-green-4: color-mix(in srgb, var(--md-sys-color-success) 60%, var(--md-sys-color-success-container));
  --oc-green-5: color-mix(in srgb, var(--md-sys-color-success) 80%, var(--md-sys-color-success-container));
  --oc-green-6: var(--md-sys-color-success);
  --oc-green-7: var(--md-sys-color-success);
  --oc-green-8: var(--md-sys-color-success);
  --oc-green-9: var(--md-sys-color-success);

  --oc-yellow-0: color-mix(in srgb, var(--md-sys-color-warning-container) 35%, var(--md-sys-color-surface));
  --oc-yellow-1: color-mix(in srgb, var(--md-sys-color-warning-container) 65%, var(--md-sys-color-surface));
  --oc-yellow-2: var(--md-sys-color-warning-container);
  --oc-yellow-3: color-mix(in srgb, var(--md-sys-color-warning) 35%, var(--md-sys-color-warning-container));
  --oc-yellow-4: color-mix(in srgb, var(--md-sys-color-warning) 60%, var(--md-sys-color-warning-container));
  --oc-yellow-5: color-mix(in srgb, var(--md-sys-color-warning) 80%, var(--md-sys-color-warning-container));
  --oc-yellow-6: var(--md-sys-color-warning);
  --oc-yellow-7: var(--md-sys-color-warning);
  --oc-yellow-8: var(--md-sys-color-warning);
  --oc-yellow-9: var(--md-sys-color-warning);

  --oc-orange-0: color-mix(in srgb, var(--md-sys-color-warning-container) 35%, var(--md-sys-color-surface));
  --oc-orange-1: color-mix(in srgb, var(--md-sys-color-warning-container) 65%, var(--md-sys-color-surface));
  --oc-orange-2: var(--md-sys-color-warning-container);
  --oc-orange-3: color-mix(in srgb, var(--md-sys-color-warning) 35%, var(--md-sys-color-warning-container));
  --oc-orange-4: color-mix(in srgb, var(--md-sys-color-warning) 60%, var(--md-sys-color-warning-container));
  --oc-orange-5: color-mix(in srgb, var(--md-sys-color-warning) 80%, var(--md-sys-color-warning-container));
  --oc-orange-6: var(--md-sys-color-warning);
  --oc-orange-7: var(--md-sys-color-warning);
  --oc-orange-8: var(--md-sys-color-warning);
  --oc-orange-9: var(--md-sys-color-warning);
}