/*
  Systematika design color tokens for the standalone Keycloak theme.
  Source: packages/systematika-design/src/tokens.
*/

:root {
  --brand-lavender-50: #f2eefd;
  --brand-lavender-100: #e2d9fa;
  --brand-lavender-200: #c7b7f2;
  --brand-lavender-300: #aa94ea;
  --brand-lavender-400: #9278e2;
  --brand-lavender-500: #7b5cd9;
  --brand-lavender-600: #6748c7;
  --brand-lavender-700: #5639b0;
  --brand-lavender-800: #4a2ea0;
  --brand-lavender-900: #382279;

  --brand-amber-50: #fff5d7;
  --brand-amber-100: #fcefcb;
  --brand-amber-200: #f8dfa0;
  --brand-amber-300: #f4cb68;
  --brand-amber-400: #f2be45;
  --brand-amber-500: #f0b428;
  --brand-amber-600: #d89a10;
  --brand-amber-700: #b77c00;
  --brand-amber-800: #8f6400;
  --brand-amber-900: #6b4d08;

  --brand-magenta-50: #fdeaf2;
  --brand-magenta-100: #fad2e3;
  --brand-magenta-200: #f4a6c8;
  --brand-magenta-300: #ed78aa;
  --brand-magenta-400: #e94691;
  --brand-magenta-500: #dc1464;
  --brand-magenta-600: #bf0f56;
  --brand-magenta-700: #9d0b47;
  --brand-magenta-800: #790838;
  --brand-magenta-900: #5a062a;

  --ink-50: #f0edf7;
  --ink-100: #e5e0f0;
  --ink-200: #c5bee0;
  --ink-300: #a89bcf;
  --ink-400: #8a79be;
  --ink-500: #6e5f9c;
  --ink-600: #57477f;
  --ink-700: #3c2864;
  --ink-800: #261f40;
  --ink-900: #1a1530;

  --neutral-0: #ffffff;
  --neutral-50: #faf9fd;
  --neutral-100: #f2f0f8;
  --neutral-200: #eceaf4;
  --neutral-300: #e8e5f0;
  --neutral-400: #d8d4e4;
  --neutral-500: #a8a4b8;
  --neutral-600: #6e6890;
  --neutral-700: #4a4270;
  --neutral-800: #2f294a;
  --neutral-900: #14102a;
  --neutral-1000: #0c081f;

  --state-green-50: #eaf7ef;
  --state-green-100: #dceedf;
  --state-green-200: #bfe0c6;
  --state-green-300: #8bc99a;
  --state-green-400: #41a95d;
  --state-green-500: #00712e;
  --state-green-600: #006329;
  --state-green-700: #005322;
  --state-green-800: #00461c;
  --state-green-900: #003816;

  --state-amber-50: var(--brand-amber-50);
  --state-amber-100: var(--brand-amber-100);
  --state-amber-200: var(--brand-amber-200);
  --state-amber-300: var(--brand-amber-300);
  --state-amber-400: var(--brand-amber-400);
  --state-amber-500: var(--brand-amber-500);
  --state-amber-600: var(--brand-amber-600);
  --state-amber-700: var(--brand-amber-700);
  --state-amber-800: var(--brand-amber-800);
  --state-amber-900: var(--brand-amber-900);

  --state-red-50: #fcecec;
  --state-red-100: #fce4e4;
  --state-red-200: #f6c4c4;
  --state-red-300: #e69a9a;
  --state-red-400: #d95c5c;
  --state-red-500: #b22020;
  --state-red-600: #9e1a1a;
  --state-red-700: #7a1414;
  --state-red-800: #641010;
  --state-red-900: #4f0d0d;

  --state-blue-50: #edf4fe;
  --state-blue-100: #dce8f8;
  --state-blue-200: #bfd4f0;
  --state-blue-300: #90b5e5;
  --state-blue-400: #5f8fd4;
  --state-blue-500: #2864b4;
  --state-blue-600: #1f559d;
  --state-blue-700: #174783;
  --state-blue-800: #163e72;
  --state-blue-900: #11305b;

  --color-action: var(--brand-lavender-500);
  --color-action-hover: var(--brand-lavender-600);
  --color-action-active: var(--brand-lavender-700);
  --color-action-soft: var(--brand-lavender-50);
  --color-action-soft-hover: var(--brand-lavender-100);
  --color-action-strong: var(--brand-lavender-800);
  --color-action-disabled: var(--neutral-300);

  --color-accent: var(--brand-amber-500);
  --color-accent-hover: var(--brand-amber-600);
  --color-accent-active: var(--brand-amber-700);
  --color-accent-soft: var(--brand-amber-50);
  --color-accent-strong: var(--brand-amber-900);
  --color-accent-secondary: var(--brand-magenta-500);

  --color-ink: var(--ink-900);
  --color-ink-hover: var(--ink-800);
  --color-ink-active: var(--ink-700);
  --color-ink-soft: var(--ink-50);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-muted: var(--neutral-600);
  --text-subtle: var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --text-placeholder: color-mix(in srgb, var(--neutral-500) 84%, var(--neutral-0));
  --text-on-action: var(--neutral-0);
  --text-on-accent: var(--neutral-900);
  --text-on-ink: var(--neutral-0);
  --text-inverse: var(--neutral-0);
  --text-code: var(--color-action-strong);
  --text-link: var(--color-action);
  --text-link-hover: var(--color-action-hover);
  --text-link-active: var(--color-action-active);

  --surface-page: var(--neutral-0);
  --surface-1: var(--neutral-50);
  --surface-2: var(--neutral-100);
  --surface-3: var(--neutral-300);
  --surface-4: var(--neutral-400);
  --surface-overlay: rgba(26, 21, 48, 0.56);
  --surface-inverse: var(--ink-900);
  --surface-disabled: var(--neutral-50);
  --surface-hover: color-mix(in srgb, var(--text-primary) 4%, transparent);
  --surface-selected: var(--brand-lavender-50);
  --surface-code: var(--surface-2);
  --surface-selection: var(--brand-lavender-100);

  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-400);
  --border-strong: var(--neutral-500);
  --border-inverse: rgba(255, 255, 255, 0.2);
  --border-focus: var(--color-action);

  --state-success: var(--state-green-500);
  --state-success-hover: var(--state-green-600);
  --state-success-active: var(--state-green-700);
  --state-success-bg: var(--state-green-100);
  --state-success-bg-strong: var(--state-green-200);
  --state-success-text: var(--state-green-800);
  --state-success-border: var(--state-green-300);

  --state-warning: var(--state-amber-700);
  --state-warning-hover: var(--state-amber-800);
  --state-warning-active: var(--state-amber-900);
  --state-warning-bg: var(--state-amber-100);
  --state-warning-bg-strong: var(--state-amber-200);
  --state-warning-text: var(--state-amber-900);
  --state-warning-border: var(--state-amber-300);

  --state-error: var(--state-red-500);
  --state-error-hover: var(--state-red-600);
  --state-error-active: var(--state-red-700);
  --state-error-bg: var(--state-red-100);
  --state-error-bg-strong: var(--state-red-200);
  --state-error-text: var(--state-red-700);
  --state-error-border: var(--state-red-300);

  --state-info: var(--state-blue-500);
  --state-info-hover: var(--state-blue-600);
  --state-info-active: var(--state-blue-700);
  --state-info-bg: var(--state-blue-100);
  --state-info-bg-strong: var(--state-blue-200);
  --state-info-text: var(--state-blue-800);
  --state-info-border: var(--state-blue-300);

  --focus-ring-color: rgba(123, 92, 217, 0.3);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --shadow-focus: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

  --provider-github: #24292f;
  --provider-google-border: #dadce0;
  --provider-google-text: #3c4043;
  --provider-google-hover-border: #c2c8d0;
  --provider-google-hover-bg: #f8fafd;
  --provider-google-hover-text: #202124;
  --provider-apple: #111111;
  --provider-vk: #0077ff;
  --provider-yandex: #fc3f1d;
  --provider-sber: #21a038;
  --provider-tbank: #ffdd2d;
  --provider-telegram: #2aabee;
}

html.pf-v5-theme-dark,
html[class*="dark"],
html[data-systematika-theme="dark"],
[data-theme='dark'] {
  color-scheme: dark;

  --color-action: var(--brand-lavender-300);
  --color-action-hover: var(--brand-lavender-200);
  --color-action-active: var(--brand-lavender-100);
  --color-action-soft: rgba(170, 148, 234, 0.16);
  --color-action-soft-hover: rgba(170, 148, 234, 0.24);
  --color-action-strong: var(--brand-lavender-100);
  --color-action-disabled: var(--neutral-800);

  --color-accent: var(--brand-amber-300);
  --color-accent-hover: var(--brand-amber-200);
  --color-accent-active: var(--brand-amber-100);
  --color-accent-soft: rgba(244, 203, 104, 0.16);
  --color-accent-strong: var(--brand-amber-100);

  --color-ink: var(--neutral-0);
  --color-ink-hover: var(--neutral-100);
  --color-ink-active: var(--neutral-200);
  --color-ink-soft: rgba(255, 255, 255, 0.08);

  --text-primary: var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-muted: var(--neutral-400);
  --text-subtle: var(--neutral-500);
  --text-disabled: var(--neutral-600);
  --text-placeholder: var(--neutral-500);
  --text-on-action: var(--neutral-900);
  --text-on-accent: var(--neutral-900);
  --text-on-ink: var(--neutral-900);
  --text-inverse: var(--neutral-900);
  --text-code: var(--brand-lavender-100);
  --text-link: var(--color-action);
  --text-link-hover: var(--color-action-hover);
  --text-link-active: var(--color-action-active);

  --surface-page: #070707;
  --surface-1: #101010;
  --surface-2: #181818;
  --surface-3: #242424;
  --surface-4: #303030;
  --surface-overlay: rgba(0, 0, 0, 0.72);
  --surface-inverse: var(--neutral-0);
  --surface-disabled: color-mix(in srgb, var(--neutral-800) 72%, transparent);
  --surface-hover: rgba(255, 255, 255, 0.08);
  --surface-selected: rgba(170, 148, 234, 0.18);
  --surface-code: rgba(255, 255, 255, 0.08);
  --surface-selection: rgba(170, 148, 234, 0.36);

  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-default: rgba(255, 255, 255, 0.18);
  --border-strong: rgba(255, 255, 255, 0.28);
  --border-inverse: rgba(20, 16, 42, 0.2);
  --border-focus: var(--color-action);

  --state-success: var(--state-green-300);
  --state-success-hover: var(--state-green-200);
  --state-success-active: var(--state-green-100);
  --state-success-bg: color-mix(in srgb, var(--state-green-300) 16%, transparent);
  --state-success-bg-strong: color-mix(in srgb, var(--state-green-300) 24%, transparent);
  --state-success-text: var(--state-green-100);
  --state-success-border: color-mix(in srgb, var(--state-green-300) 44%, transparent);

  --state-warning: var(--state-amber-300);
  --state-warning-hover: var(--state-amber-200);
  --state-warning-active: var(--state-amber-100);
  --state-warning-bg: color-mix(in srgb, var(--state-amber-300) 16%, transparent);
  --state-warning-bg-strong: color-mix(in srgb, var(--state-amber-300) 24%, transparent);
  --state-warning-text: var(--state-amber-100);
  --state-warning-border: color-mix(in srgb, var(--state-amber-300) 44%, transparent);

  --state-error: var(--state-red-300);
  --state-error-hover: var(--state-red-200);
  --state-error-active: var(--state-red-100);
  --state-error-bg: color-mix(in srgb, var(--state-red-300) 16%, transparent);
  --state-error-bg-strong: color-mix(in srgb, var(--state-red-300) 24%, transparent);
  --state-error-text: var(--state-red-100);
  --state-error-border: color-mix(in srgb, var(--state-red-300) 44%, transparent);

  --state-info: var(--state-blue-300);
  --state-info-hover: var(--state-blue-200);
  --state-info-active: var(--state-blue-100);
  --state-info-bg: color-mix(in srgb, var(--state-blue-300) 16%, transparent);
  --state-info-bg-strong: color-mix(in srgb, var(--state-blue-300) 24%, transparent);
  --state-info-text: var(--state-blue-100);
  --state-info-border: color-mix(in srgb, var(--state-blue-300) 44%, transparent);

  --focus-ring-color: rgba(170, 148, 234, 0.44);
}