/* ==========================================================================
   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
   ==========================================================================
   These are the official Scroll Sites customization tokens. Setting them
   here means Scroll Sites' own components (header, footer, banner, TOC,
   sidebar, color mode switcher, etc.) will use our values natively —
   no !important needed, no icon breakage.
   ========================================================================== */
: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.ts body1/body2 light */
  --theme-headline-color: #858484;       /* theme.ts h1-h6 light */

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

  /* Header — AppBar */
  --theme-header-background-color: #5282f1;  /* theme.ts MuiAppBar light */
  --theme-header-text-color: #ffffff;

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

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

  /* Roundness — registry uses 4px radius */
  --theme-roundness: 0.5;
}

/* ==========================================================================
   2. K15t DESIGN TOKENS — fine-grained control
   ========================================================================== */
:root {
  /* Foreground */
  --K15t-foreground: #3f3f3f;              /* theme.ts text.primary light */
  --K15t-foreground-subtle: #858484;       /* theme.ts text.secondary light */

  /* Links */
  --K15t-link: #5282f1;                   /* theme.ts primary.main */

  /* Surfaces */
  --K15t-surface: #ffffff;                 /* theme.ts background.default light */
  --K15t-surface-raised: #ffffff;          /* theme.ts background.paper light */

  /* Borders */
  --K15t-border-neutral: rgba(0, 0, 0, 0.12);  /* theme.ts divider light */

  /* 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 — using K15t's experimental approach + theme.ts dark values
   ========================================================================== */
[data-theme="dark"],
[data-color-mode="dark"],
.dark-theme,
.sp-dark {
  color-scheme: dark;

  --theme-text-color: #c0c0c0;            /* theme.ts body1 dark */
  --theme-headline-color: #e0e0e0;        /* theme.ts h1-h6 dark */
  --theme-header-background-color: #1a1a2e;  /* theme.ts MuiAppBar dark */
  --theme-footer-background-color: #1a1a2e;
  --theme-banner-background-color: #1a1a2e;

  --K15t-foreground: #e0e0e0;             /* theme.ts text.primary dark */
  --K15t-foreground-subtle: #a0a0a0;      /* theme.ts text.secondary dark */
  --K15t-link: #7a9ff4;                   /* theme.ts primary.light for readability */

  --K15t-surface: #121212;                /* theme.ts background.default dark */
  --K15t-surface-raised: #1e1e1e;         /* theme.ts background.paper dark */
  --K15t-surface-overlay: #2a2a2a;

  --K15t-border-neutral: rgba(255, 255, 255, 0.12);  /* theme.ts divider dark */

  --K15t-background-neutral: #2a2a2a;
  --K15t-background-neutral-hovered: #333333;
  --K15t-background-neutral-subtle-hovered: #2a2a2a;
  --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-background-neutral: #2a2a2a;
    --K15t-background-neutral-hovered: #333333;
    --K15t-background-neutral-subtle-hovered: #2a2a2a;
    --K15t-background-input: #1e1e1e;
  }
}

/* ==========================================================================
   4. SUPPLEMENTAL CSS — things the token system doesn't cover
   ==========================================================================
   Keep this section minimal. The tokens above handle most of the styling.
   Below are only overrides for elements that K15t tokens don't reach.
   ========================================================================== */

/* Visited links — match registry behavior */
a:visited { color: inherit; }

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

/* Header nav link text — slightly larger */
header a,
[class*="header"] a,
[class*="Header"] a {
  font-size: 0.9375rem !important;  /* 15px */
}

/* Sidebar active item — gray highlight, not blue */
[class*="navigation"] a[aria-current],
[class*="navigation"] a.active,
[class*="navigation"] a[data-active],
[class*="pagetree"] a[aria-current],
[class*="pagetree"] a.active,
[class*="sidebar"] a[aria-current],
[class*="sidebar"] a.active {
  background-color: var(--K15t-background-neutral, #f3f4f6) !important;
  color: var(--K15t-foreground) !important;
  font-weight: 600;
}

/* Sidebar text — use foreground (dark/crisp), not subtle */
[class*="navigation"] a,
[class*="pagetree"] a,
[class*="sidebar"] a {
  color: var(--K15t-foreground) !important;
}

/* 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, respect Confluence alignment setting */
table,
.sp-content table,
.confluenceTable {
  margin-left: auto;
  margin-right: auto;
}

/* Table header text — use text.primary (darker than body) per theme.ts MuiTableCell.head */
th, .confluenceTh {
  color: var(--K15t-foreground);
  font-weight: 600;
}

td, .confluenceTd {
  color: var(--K15t-foreground-subtle);
}

/* Code — no custom styling, let Scroll Sites handle it */

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

/* Buttons — no uppercase, matching registry MuiButton */
button, .sp-button {
  text-transform: none;
}

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

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

/* Smooth scroll */
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; }
}