/* KSPO brand layer for Django Unfold.
 *
 * Source of truth: landing page/src/styles.css. The compatibility variables
 * below are intentionally scoped to recovered workflow templates; Unfold's
 * own components continue to use the configured base/primary color ramps.
 */

:root {
  --kspo-font-sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --kspo-navy: #1f3864;
  --kspo-primary: #0075c2;
  --kspo-primary-dark: #005f9e;
  --kspo-ink: #1a1d23;
  --kspo-line: #e5e9f0;
  --kspo-surface: #f5f7fa;

  --primary: var(--kspo-primary);
  --primary-fg: #ffffff;
  --body-fg: var(--kspo-ink);
  --body-bg: #ffffff;
  --body-quiet-color: color-mix(in srgb, var(--kspo-ink) 60%, transparent);
  --link-fg: var(--kspo-primary-dark);
  --link-hover-color: var(--kspo-navy);
  --hairline-color: var(--kspo-line);
  --border-color: var(--kspo-line);
  --error-fg: #e60013;
  --message-warning-bg: color-mix(in srgb, #f59e0b 14%, white);
  --message-error-bg: color-mix(in srgb, #e60013 8%, white);
  --darkened-bg: var(--kspo-surface);
  --button-bg: var(--kspo-primary);
  --button-hover-bg: var(--kspo-primary-dark);
  --button-fg: #ffffff;
  --close-button-bg: var(--kspo-navy);
  --close-button-hover-bg: color-mix(in srgb, var(--kspo-navy) 84%, black);
  --delete-button-bg: #e60013;
  --delete-button-hover-bg: color-mix(in srgb, #e60013 82%, black);
}

html.dark {
  --body-fg: color-mix(in srgb, var(--kspo-surface) 92%, white);
  --body-bg: var(--kspo-ink);
  --body-quiet-color: color-mix(in srgb, var(--kspo-surface) 68%, transparent);
  --link-fg: color-mix(in srgb, var(--kspo-primary) 58%, white);
  --link-hover-color: color-mix(in srgb, var(--kspo-primary) 35%, white);
  --hairline-color: color-mix(in srgb, var(--kspo-line) 20%, var(--kspo-ink));
  --border-color: color-mix(in srgb, var(--kspo-line) 24%, var(--kspo-ink));
  --message-warning-bg: color-mix(in srgb, #f59e0b 24%, var(--kspo-ink));
  --message-error-bg: color-mix(in srgb, #e60013 18%, var(--kspo-ink));
  --darkened-bg: color-mix(in srgb, var(--kspo-surface) 6%, var(--kspo-ink));
}

html,
body {
  min-width: 0;
}

body {
  font-family: var(--kspo-font-sans) !important;
}

#nav-sidebar {
  border-top: 3px solid var(--kspo-navy);
}

#nav-sidebar::after {
  background: var(--kspo-primary);
  content: "";
  height: 3px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -3px;
}

:focus-visible {
  outline-color: var(--kspo-primary) !important;
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}