/* ============================================================
   it-tools.css - IT-Tools restyled to match liforra.de (palette,
   Space Mono, flat square boxes). Linked into every page by
   ../nginx.conf, which also swaps the bundle's dark colours.
   Everything is scoped to html.dark: light mode stays stock.
   ============================================================ */

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-mono-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-mono-bold.woff2') format('woff2');
}

/* same tokens as liforra.de theme.css */
html.dark {
  --bg: oklch(0.09 0.015 300);
  --panel: oklch(0.13 0.024 300);
  --panel-alt: oklch(0.08 0.02 300);
  --border: oklch(0.4 0.06 300 / 0.5);
  --border-soft: oklch(0.4 0.06 300 / 0.35);
  --accent: oklch(0.68 0.19 300);
  --accent-strong: oklch(0.76 0.17 300);
  --accent-bright: oklch(0.85 0.15 300);
  --accent-wash: oklch(0.68 0.19 300 / 0.15);
  --text: oklch(0.94 0.015 300);
  --text-body: oklch(0.8 0.015 300);
  --text-dim: oklch(0.65 0.02 300);
  --text-dimmer: oklch(0.58 0.02 300);
  --text-faint: oklch(0.5 0.02 300);
  --font: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: dark;
  scrollbar-color: oklch(0.35 0.05 300) transparent;
}
html.dark ::selection { background: oklch(0.7 0.2 300 / 0.35); }

html.dark body,
html.dark .font-mono, html.dark [font-mono=""],
html.dark .\!font-mono, html.dark .important\:font-mono, html.dark [important\:font-mono=""] {
  font-family: var(--font) !important;
}

/* square corners everywhere, except spinners and radio dots */
html.dark *, html.dark *::before, html.dark *::after { border-radius: 0 !important; }
html.dark .n-base-loading, html.dark .n-base-loading *,
html.dark .n-spin-body *, html.dark .n-radio__dot, html.dark .n-radio__dot::before,
html.dark .rounded-full { border-radius: 50% !important; }

/* ---- sidebar header: text logo instead of the green wave ---- */

html.dark .hero-wrapper {
  height: 112px;
  border-bottom: 1px solid var(--border-soft);
  padding: 22px 16px 0;
  text-decoration: none;
}
/* the menu below is pushed down by the stock 160px wave */
html.dark .sider-content { padding-top: 124px; }
html.dark .hero-wrapper .gradient { display: none; }
html.dark .hero-wrapper .text-wrapper { position: static; color: var(--text-dim); }
html.dark .hero-wrapper .text-wrapper .title {
  color: var(--accent);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0;
}
html.dark .hero-wrapper:hover .text-wrapper .title { color: var(--accent-bright); }
html.dark .hero-wrapper .text-wrapper .divider { background-color: var(--border); width: 40px; height: 1px; margin: 4px auto 6px; }
html.dark .hero-wrapper .text-wrapper .subtitle { font-size: 12px; color: var(--text-dimmer); }

/* ---- gradient buttons/cards -> the site's outlined/washed boxes ---- */

html.dark .support-button {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-body) !important;
}
html.dark .support-button:hover {
  background: var(--accent-wash) !important;
  border-color: var(--accent) !important;
  color: var(--accent-bright) !important;
}
html.dark .colored-card {
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  color: var(--text-body);
}
html.dark .colored-card .title { color: var(--text); }
html.dark .colored-card .description a:hover { color: var(--accent-bright); }

/* ---- UnoCSS utilities with the stock green / greys baked in ---- */

html.dark .text-primary, html.dark [text-primary=""],
html.dark .hover\:text-primary:hover, html.dark [hover\:text-primary=""]:hover,
html.dark [color~="#18a058"] { color: var(--accent) !important; }
html.dark .bg-primary, html.dark .hover\:bg-primary:hover,
html.dark [hover\:bg-primary=""]:hover { background-color: var(--accent) !important; }
html.dark .border-primary, html.dark .important\:border-primary,
html.dark .\!hover\:border-primary:hover, html.dark .hover\:important\:border-primary:hover,
html.dark [hover\:important\:border-primary=""]:hover { border-color: var(--accent) !important; }
html.dark .dark\:bg-\#232323 { background-color: var(--panel-alt); }
html.dark .dark\:bg-\#333333 { background-color: oklch(0.16 0.028 300); }
html.dark [border-b~="dark:#282828"] { border-bottom-color: var(--border-soft); }
html.dark .dark\:text-neutral-400, html.dark .dark\:text-gray-400 { color: var(--text-dim); }
html.dark .dark\:text-neutral-600 { color: var(--text-faint); }

html.dark .pretty-scrollbar, html.dark [pretty-scrollbar=""] {
  --scrollbar-thumb: oklch(0.35 0.05 300);
  --scrollbar-track: transparent;
}

/* ---- pages ---- */

html.dark .tool-layout .tool-header .separator { background: var(--border); opacity: 1; height: 1px; }
html.dark .footer { color: var(--text-faint); }
html.dark a { color: inherit; }
html.dark .c-link:hover { color: var(--accent-bright); }

/* tool titles: bold and a bit smaller, like the site's page titles */
html.dark .tool-layout .tool-header .n-h1 { font-size: 32px; font-weight: 700; opacity: 1; line-height: 1.15; }
@media (max-width: 700px) {
  html.dark .tool-layout .tool-header .n-h1 { font-size: 26px; }
}

/* Space Mono is wider than the stock font: the header language picker
   (a fixed 100px) would cut "English" off, so let it fit its text */
html.dark [w-100px]:has(> .c-select) { width: auto; min-width: 100px; }
html.dark [w-100px]:has(> .c-select) .c-select-dropdown { width: max-content; min-width: 100%; }
html.dark .c-select-dropdown { border: 1px solid var(--border); }

/* ...and the coffee button wrapped to three lines on phones */
@media (max-width: 700px) {
  html.dark .support-button {
    flex-shrink: 0;
    width: 70px;
    font-size: 11px !important;
    line-height: 1.2;
    padding: 0 4px !important;
  }
}
/* the stock header is already a bit too wide at 320px; don't make it worse */
@media (max-width: 360px) {
  html.dark .support-button { width: 60px; font-size: 10px !important; }
}