/* ==========================================================================
   RunWhen — Scroll Sites Custom CSS
   Uses K15t's design token system + cc-registry-v2 theme.ts values
   ==========================================================================
   Paste into: Scroll Sites > Theme > Custom CSS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   1. K15t THEME TOKENS — maps cc-registry-v2 theme.ts to Scroll Sites
   ========================================================================== */
:root {
  /* Typography */
  --theme-text-font: "Raleway", "Roboto", "Helvetica", "Arial", sans-serif;
  --theme-headline-font: "Raleway", "Roboto", "Helvetica", "Arial", sans-serif;
  --theme-text-color: #858484;
  --theme-headline-color: #858484;

  /* Brand */
  --theme-primary-color: #5282f1;
  --theme-on-primary-color: #ffffff;

  /* Header */
  --theme-header-background-color: #5282f1;
  --theme-header-text-color: #ffffff;

  /* Footer */
  --theme-footer-background-color: #2f80ed;
  --theme-footer-text-color: #ffffff;

  /* Banner */
  --theme-banner-background-color: #5282f1;
  --theme-banner-text-color: #ffffff;

  /* Roundness */
  --theme-roundness: 0.5;
}

/* ==========================================================================
   2. K15t DESIGN TOKENS — official tokens from help.k15t.com
   ========================================================================== */
:root {
  --K15t-foreground: #3f3f3f;
  --K15t-foreground-subtle: #858484;
  --K15t-link: #5282f1;

  --K15t-surface: #ffffff;
  --K15t-surface-raised: #ffffff;
  --K15t-surface-overlay: #f5f5f5;

  --K15t-border-neutral: rgba(0, 0, 0, 0.12);
  --K15t-border-neutral-strong: rgba(0, 0, 0, 0.2);

  --K15t-background-neutral: #f3f4f6;
  --K15t-background-neutral-hovered: #e8e9eb;
  --K15t-background-neutral-subtle: #f9fafb;
  --K15t-background-neutral-subtle-hovered: #f3f4f6;
  --K15t-background-neutral-subtle-selected: #e8e9eb;
  --K15t-background-input: #ffffff;

  /* Typography primitives */
  --K15t-font-family-headline: "Raleway", "Roboto", "Helvetica", "Arial", sans-serif;
  --K15t-font-family-body: "Raleway", "Roboto", "Helvetica", "Arial", sans-serif;
  --K15t-font-family-code: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

/* ==========================================================================
   3. DARK MODE — following K15t's official dark theme pattern
   ========================================================================== */
[data-theme="dark"],
[data-color-mode="dark"],
.dark-theme,
.sp-dark {
  color-scheme: dark;

  --theme-text-color: #c0c0c0;
  --theme-headline-color: #e0e0e0;
  --theme-header-background-color: #1a1a2e;
  --theme-footer-background-color: #1a1a2e;
  --theme-banner-background-color: #1a1a2e;

  --K15t-foreground: #e0e0e0;
  --K15t-foreground-subtle: #a0a0a0;
  --K15t-link: #7a9ff4;

  --K15t-surface: #121212;
  --K15t-surface-raised: #1e1e1e;
  --K15t-surface-overlay: #2a2a2a;

  --K15t-border-neutral: rgba(255, 255, 255, 0.12);
  --K15t-border-neutral-strong: rgba(255, 255, 255, 0.2);

  --K15t-background-neutral: #2a2a2a;
  --K15t-background-neutral-hovered: #333333;
  --K15t-background-neutral-subtle: #1e1e1e;
  --K15t-background-neutral-subtle-hovered: #2a2a2a;
  --K15t-background-neutral-subtle-selected: #333333;
  --K15t-background-input: #1e1e1e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light-theme):not(.sp-light) {
    color-scheme: dark;

    --theme-text-color: #c0c0c0;
    --theme-headline-color: #e0e0e0;
    --theme-header-background-color: #1a1a2e;
    --theme-footer-background-color: #1a1a2e;
    --theme-banner-background-color: #1a1a2e;

    --K15t-foreground: #e0e0e0;
    --K15t-foreground-subtle: #a0a0a0;
    --K15t-link: #7a9ff4;
    --K15t-surface: #121212;
    --K15t-surface-raised: #1e1e1e;
    --K15t-surface-overlay: #2a2a2a;
    --K15t-border-neutral: rgba(255, 255, 255, 0.12);
    --K15t-border-neutral-strong: rgba(255, 255, 255, 0.2);
    --K15t-background-neutral: #2a2a2a;
    --K15t-background-neutral-hovered: #333333;
    --K15t-background-neutral-subtle: #1e1e1e;
    --K15t-background-neutral-subtle-hovered: #2a2a2a;
    --K15t-background-neutral-subtle-selected: #333333;
    --K15t-background-input: #1e1e1e;
  }
}

/* ==========================================================================
   4. SUPPLEMENTAL CSS — minimal overrides
   ========================================================================== */

a:visited { color: inherit; }

/* Banner / Hero — gradient from header color */
[class*="banner"],
[class*="Banner"],
[class*="hero"],
[class*="cover"] {
  background: linear-gradient(180deg, #5282f1 0%, #3a6be0 50%, #2f5fd4 100%) !important;
}

/* Banner dark mode — match dark header */
[data-theme="dark"] [class*="banner"],
[data-theme="dark"] [class*="Banner"],
[data-theme="dark"] [class*="hero"],
[data-theme="dark"] [class*="cover"],
[data-color-mode="dark"] [class*="banner"],
[data-color-mode="dark"] [class*="Banner"],
[data-color-mode="dark"] [class*="hero"],
[data-color-mode="dark"] [class*="cover"],
.dark-theme [class*="banner"],
.dark-theme [class*="Banner"],
.dark-theme [class*="hero"],
.dark-theme [class*="cover"],
.sp-dark [class*="banner"],
.sp-dark [class*="Banner"],
.sp-dark [class*="hero"],
.sp-dark [class*="cover"] {
  background: linear-gradient(180deg, #1a1a2e 0%, #1a1a2e 40%, #1e2038 100%) !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light-theme):not(.sp-light) [class*="banner"],
  :root:not([data-theme="light"]):not(.light-theme):not(.sp-light) [class*="Banner"],
  :root:not([data-theme="light"]):not(.light-theme):not(.sp-light) [class*="hero"],
  :root:not([data-theme="light"]):not(.light-theme):not(.sp-light) [class*="cover"] {
    background: linear-gradient(180deg, #1a1a2e 0%, #1a1a2e 40%, #1e2038 100%) !important;
  }
}

/* Header nav links */
header a,
[class*="header"] a,
[class*="Header"] a {
  font-size: 0.9375rem !important;
}

/* All inputs — dark-friendly everywhere (header, banner, search) */
input, [type="search"], [type="text"] {
  background-color: var(--K15t-background-input) !important;
  color: var(--K15t-foreground) !important;
  border-color: var(--K15t-border-neutral-strong) !important;
}

/* Left sidebar — remove ALL filled boxes (default, active, hover) */
.tree .tree-item-header {
  background-color: transparent !important;
  background: transparent !important;
}
.tree .tree-item-header:has(> [aria-current="page"]) a,
.tree .tree-item-header:has(> [aria-current]) a {
  color: var(--K15t-link) !important;
  font-weight: 600;
}
.tree .tree-item-header:hover a {
  color: var(--K15t-link) !important;
}

/* Right "On This Page" TOC — "you are here" highlight */
[data-component="toc"] {
  --background-color-selected: rgba(82, 130, 241, 0.08);
  --foreground-color-selected: var(--K15t-foreground);
}
/* Dark mode: subtle dark tint, not light */
[data-theme="dark"] [data-component="toc"],
[data-color-mode="dark"] [data-component="toc"],
.dark-theme [data-component="toc"],
.sp-dark [data-component="toc"] {
  --background-color-selected: rgba(122, 159, 244, 0.12);
  --foreground-color-selected: var(--K15t-foreground);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light-theme):not(.sp-light) [data-component="toc"] {
    --background-color-selected: rgba(122, 159, 244, 0.12);
    --foreground-color-selected: var(--K15t-foreground);
  }
}

/* Content heading underlines */
.sp-content h1, #content h1 {
  border-bottom: 1px solid var(--K15t-border-neutral);
  padding-bottom: 0.4em;
}
.sp-content h2, #content h2 {
  border-bottom: 1px solid var(--K15t-border-neutral);
  padding-bottom: 0.3em;
}

/* Tables — center aligned */
table, .sp-content table, .confluenceTable {
  margin-left: auto;
  margin-right: auto;
}
th, .confluenceTh {
  color: var(--K15t-foreground);
  font-weight: 600;
}
td, .confluenceTd {
  color: var(--K15t-foreground-subtle);
}

/* Images */
.sp-content img, .confluence-embedded-image {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Buttons */
button, .sp-button { text-transform: none; }

/* Cards */
[class*="card"], [class*="tile"] { border-radius: 4px; }

/* HR */
hr {
  border: none;
  height: 1px;
  background-color: var(--K15t-border-neutral);
  margin: 32px 0;
}

html { scroll-behavior: smooth; }

/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  pre { font-size: 0.8rem; padding: 12px; }
  th, td { padding: 8px 10px; font-size: 0.8125rem; }
}

/* ==========================================================================
   6. PRINT
   ========================================================================== */
@media print {
  body { color: #000; background: #fff; }
  pre, code { border: 1px solid #ddd; background: #f9f9f9; color: #333; }
}