/*
 * Kurt König design system tokens used by the portal — the KK names and exact Figma values
 * from the system's tokens.json (artifact 6Qoj49JP4GDQfiYBEnKio5). Never "improved": pairs
 * below WCAG are kept and flagged in the system, as there.
 *
 * Page type: EP page (Employee Portal) — white ground, dark header, light controls,
 * radius 4, strokes inside, almost no shadows. Colour is a signal only.
 *
 * Fonts: Vito, licensed to Kurt König for its own sites and tools only. The files are not
 * in this repository; `make fonts` copies them into kk_crm/static/fonts/ (git-ignored) from
 * the KK design-system folder. Without them the stack falls back to Helvetica / Arial.
 */
:root {
  /* primitives */
  --black-100: #f7f7f7;
  --black-200: #f2f2f2;
  --black-300: #ededed;
  --black-400: #e2e2e2;
  --black-500: #d8d8d8;
  --black-600: #cbcbcb;
  --black-700: #bebebe;
  --black-800: #b5b5b5;
  --black-900: #959595;
  --black-1000: #828282;
  --black-1100: #6d6d6d;
  --black-1200: #585858;
  --black-1300: #444444;
  --black-1400: #363636;
  --black-1450: #292929;
  --black-1500: #1a1a1a;
  --white: #ffffff;
  --green-100: #42ceae;
  --orange: #ff640f;
  --signal-700: #ff3a0f;
  --signal-100: #fff8f7;

  /* semantic */
  --text: var(--black-1500);
  --text-secondary: var(--black-1100);
  --text-label: var(--black-1000);
  --text-placeholder: var(--black-900);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--black-1000);
  --surface-base: var(--white);
  --surface-section: var(--black-300);
  --surface-card: var(--white);
  --surface-input: var(--black-200);
  --surface-input-hover: var(--black-400);
  --surface-dark: var(--black-1500);
  --surface-dark-raised: var(--black-1450);
  --surface-dark-card: var(--black-1400);
  --surface-dark-hover: var(--black-1300);
  --surface-overlay: #1a1a1acc;
  --action-primary: var(--black-1500);
  --action-primary-hover: var(--black-1300);
  --action-secondary-hover: var(--black-1100);
  --action-disabled: var(--black-900);
  --focus: var(--black-600);
  --error: var(--signal-700);
  --error-surface: var(--signal-100);
  --positive: var(--green-100);
  --hairline: var(--black-700);
  --border-subtle: var(--black-300);
  --border: var(--black-400);
  --border-on-dark: var(--black-1300);

  /* elevation and focus */
  --elevation-2: 0 16px 24px #00000014, 0 4px 8px -4px #00000014;
  --elevation-3: 0 16px 32px #00000029, 0 4px 12px -4px #0000001f;
  --shadow-snackbar: 1px 1px 20px #2929294d;
  --focus-ring: inset 0 0 0 4px #cbcbcb;
  --focus-ring-text: inset 0 0 0 2px #cbcbcb;
  --focus-ring-outer: 0 0 0 4px #cbcbcb;

  /* scale */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-20: 20px;
  --radius-pill: 9999px;
  --control-l: 56px;
  --control-s: 40px;
  --input-48: 48px;
  --header: 72px;
  --content-1440: 1320px;
  --duration-300: 300ms;
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --font-sans: "Vito", "Helvetica Neue", Arial, sans-serif;
}

@font-face { font-family: "Vito"; src: url("/static/fonts/Vito-Light.otf"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Vito"; src: url("/static/fonts/Vito-Regular.otf"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Vito"; src: url("/static/fonts/Vito-Medium.otf"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Vito"; src: url("/static/fonts/Vito-Bold.otf"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Vito"; src: url("/static/fonts/Vito-Black.otf"); font-weight: 900; font-style: normal; font-display: swap; }