/*
 * Runark — internal app theme. LIGHT neo-brutalist variant of the landing
 * (graphite ink + hot-pink + lime fluor, hard 2px borders, hard offset shadows,
 * live corners) on a paper-light surface for dense data legibility.
 * Brand tokens live as --rk-*; the existing --color-* abstractions are repointed
 * to them so every component CSS inherits the rebrand. See config/design-system.md.
 */

:root {
  /* Runark brand */
  --rk-pink: #F43F8E;
  --rk-pink-bright: #F472B6;
  --rk-pink-deep: #DB2777;
  --rk-pink-soft: rgba(244, 63, 142, 0.10);
  --rk-lime: #C7F000;
  --rk-lime-soft: rgba(199, 240, 0, 0.16);
  --rk-ink: #18181C;

  /* Light surfaces */
  --rk-paper: #FAFAF8;
  --rk-surface: #FFFFFF;
  --rk-surface-subtle: #F2F2EF;
  --rk-surface-elevated: #FFFFFF;

  /* Brutalist primitives */
  --rk-line: 2px solid var(--rk-ink);
  --rk-line-pink: 2px solid var(--rk-pink);
  --rk-shadow-ink: 4px 4px 0 0 var(--rk-ink);
  --rk-shadow-pink: 4px 4px 0 0 var(--rk-pink);
  --rk-shadow-lime: 4px 4px 0 0 var(--rk-lime);

  --rk-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --rk-mono: "Space Mono", ui-monospace, SFMono-Regular, monospace;
  --rk-text-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Abstractions repointed to Runark (keeps component CSS untouched) ---- */
  --color-accent: var(--rk-pink);
  --color-accent-light: var(--rk-pink-bright);
  --color-accent-dark: var(--rk-pink-deep);

  --color-bg: var(--rk-surface);
  --color-bg-subtle: var(--rk-surface-subtle);
  --color-page-bg: var(--rk-paper);
  --color-text: var(--rk-ink);
  --color-text-reversed: white;
  --color-text-subtle: #5B5B63;
  --color-link: var(--rk-pink-deep);
  --color-border-light: #E4E4E0;
  --color-border: var(--rk-ink);
  --color-border-dark: var(--rk-ink);
  --color-selected: var(--rk-pink-soft);
  --color-selected-dark: var(--rk-pink);
  --color-highlight: var(--rk-lime);

  --color-primary: var(--rk-pink);
  --color-secondary: var(--rk-surface-subtle);
  --color-negative: var(--red-600);
  --color-positive: var(--green-600);

  /* SVG color values */
  --color-filter-text: invert(0);
  --color-filter-text-reversed: invert(1);
  --color-filter-negative: invert(22%) sepia(85%) saturate(1790%) hue-rotate(339deg) brightness(105%) contrast(108%);
  --color-filter-positive: invert(44%) sepia(89%) saturate(409%) hue-rotate(89deg) brightness(94%) contrast(97%);
}

* {
  border-color: var(--color-border-light);
  scrollbar-color: var(--rk-ink) transparent;
  scrollbar-width: thin;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-page-bg);
  color: var(--color-text);
  font-family: var(--rk-text-font);
  font-synthesis-weight: none;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--rk-display);
  letter-spacing: -0.02em;
}

.turbo-progress-bar {
  background-color: var(--rk-pink);
}

::selection {
  background-color: var(--rk-lime);
  color: var(--rk-ink);
}