/* ==========================================================================
   HostMonitor Pro — shared base styles, loaded by every page.
   Page-specific rules live in home.css, pricing.css, legal.css, welcome.css.

   The palette is the application's own, read from src/appearance:
   light is the Default theme, dark is the Blue theme. Every token keeps the
   name it has on the non-Pro site, so the rules in the other stylesheets are
   untouched and both sites stay in step structurally while looking like their
   own product.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── TOKENS ── */
:root {
  color-scheme: light;
  /* Default theme: WindowBackground / CardBackground / SidebarHoverRow. */
  --bg:        #f4f4f6;
  --surface:   #ffffff;
  --surface2:  #ededef;
  /* MeterUnlit makes a natural hairline; the second step is a shade down. */
  --border:    #e4e4e4;
  --border2:   #cfcfd4;
  /* AccentFor(Availability) — the blue the cards and the logo are drawn in. */
  --accent:    #2f80ed;
  --accent2:   #1f6ad2;
  /* SidebarSelectedRow, which is exactly this accent's tint in the app. */
  --accent-lt: #dbeafe;
  --accent-br:  #9cc4f7;
  --accent-br2: #c6def9;
  --accent-rgb: 47,128,237;
  --on-accent: #ffffff;
  /* AccentFor(Latency) and AccentFor(Traffic). */
  --green:     #1faa59;
  --green-lt:  #e6f7ee;
  --green-br:  #a5dec1;
  /* Theme::Alert() and Theme::Warning() in their light form. */
  --red:       #ba1a1a;
  --red-lt:    #fdecec;
  --red-br:    #f2c2c2;
  --yellow:    #e08a1e;
  --yellow-lt: #fdf3e4;
  --yellow-br: #f2d3a6;
  /* The Slate theme's accent. The app has no violet, and this keeps the one
     token the site needs for a fourth hue inside the product's own palette. */
  --purple:    #3f5e8a;
  --purple-lt: #e8edf5;
  --purple-br: #b4c4da;
  --text:      #28282c;
  --text2:     #44444a;
  --muted:     #787878;
  --muted2:    #9a9aa0;
  --nav-bg:    rgba(244,244,246,.92);
  --hero-top:  #e9f1fd;
  --shadow-rgb: 6,12,24;
  --radius:    10px;
}

/* Dark palette — same token names, so every rule on the site is theme-agnostic.
   Screenshots swap separately via <picture media="(prefers-color-scheme: dark)">. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Blue theme: WindowBackground / CardBackground / SidebarHoverRow. */
    --bg:        #060c18;
    --surface:   #0b1426;
    --surface2:  #0e1a30;
    --border:    #18243a;
    --border2:   #27374f;
    --accent:    #4696ff;
    --accent2:   #6fadff;
    /* SidebarSelectedRow. */
    --accent-lt: #183058;
    --accent-br:  #2f6fd0;
    --accent-br2: #1d4a86;
    --accent-rgb: 70,150,255;
    --on-accent: #060c18;
    /* The Green theme's accent, which is the app's green in a dark window. */
    --green:     #46dc78;
    --green-lt:  #0a2416;
    --green-br:  #1d6b3c;
    /* Theme::Alert() and Theme::Warning() in their dark form. */
    --red:       #ff6a62;
    --red-lt:    #2d1210;
    --red-br:    #7d302c;
    --yellow:    #ffbe5c;
    --yellow-lt: #2b1f08;
    --yellow-br: #6b4f16;
    --purple:    #6f93c6;
    --purple-lt: #141f30;
    --purple-br: #3a5176;
    /* Brighter than SidebarText (#96bef5), which is a label colour rather than
       a body one and reads thin at paragraph length. */
    --text:      #dce9fb;
    --text2:     #b9cde8;
    /* DetailText. */
    --muted:     #7896c8;
    --muted2:    #5b7193;
    --nav-bg:    rgba(6,12,24,.92);
    --hero-top:  #0a1730;
    --shadow-rgb: 0,0,0;
  }
}

/* ── BASE ── */
html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ── NAV BAR ── */
nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1rem, 5vw, 3rem);
  height: 64px;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; color: var(--text);
}
.nav-logo img { width: 32px; height: 32px; }

.back-link { font-size: .9rem; color: var(--muted); transition: color .2s; }
.back-link:hover { color: var(--accent); text-decoration: none; }

/* ── SHARED COMPONENTS ── */
.section-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .75rem;
}

/* Centred footer used by the inner pages; the home page has its own layout. */
.page-footer {
  text-align: center; padding: 1.75rem;
  border-top: 1px solid var(--border);
  color: var(--muted2); font-size: .85rem;
  background: var(--surface);
}
.page-footer .footer-links { margin-top: .5rem; }
.page-footer .footer-links a { color: var(--muted); margin: 0 .5rem; }
.page-footer .footer-links a:hover { color: var(--accent); }