/* StatusRadar — public theme (marketing + guest auth). Stripe-style, dual theme.
   Loaded only on non-dashboard public pages (body.sr-public). Owns the design
   tokens (light default + dark) and the page chrome: navbar, footer, theme
   toggle, logo color. Components live in home.css (.mkt) and auth.css (.auth).
   Fonts are loaded via a <link> in the layout head, not @import. */

/* ============ TOKENS — LIGHT (default) ============ */
:root,
[data-theme="light"]{
  --font-display:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  color-scheme:light;

  --bg:#ffffff;
  --bg-tint:#f6f9fc;
  --bg-sunken:#eef3f8;
  --panel:#ffffff;
  --panel-2:#fbfcfe;

  --text:#0a2540;
  --text-secondary:#425466;
  --text-faint:#687385;
  --on-accent:#ffffff;

  --border:#e3e8ee;
  --border-strong:#cfd7e0;
  --hairline:#eef1f6;

  --accent:#635bff;
  --accent-hover:#5249e6;
  --accent-active:#463dd6;
  --accent-soft:#f1f0ff;
  --link:#4b43d6;
  --accent-btn:var(--accent);
  --accent-btn-hover:var(--accent-hover);
  --accent-btn-active:var(--accent-active);
  --code-bg:#f5f7fb;
  --code-text:#1a2c44;

  --up:#15743f;    --up-bg:#e3f5ec;    --up-border:#bfe6d1;
  --slow:#9a6207;  --slow-bg:#fcf1dd;  --slow-border:#f1dcae;
  --down:#c4322b;  --down-bg:#fdeceb;  --down-border:#f6c7c4;

  --grad-1:#635bff; --grad-2:#4f8bff; --grad-3:#37c2c9; --grad-4:#a855f7;
  --angle-grad:linear-gradient(101deg,var(--grad-1) 0%,var(--grad-2) 34%,var(--grad-3) 66%,var(--grad-4) 100%);

  --shadow-sm:0 1px 2px rgba(10,37,64,.06),0 1px 1px rgba(10,37,64,.04);
  --shadow-md:0 4px 14px rgba(10,37,64,.07),0 2px 4px rgba(10,37,64,.05);
  --shadow-lg:0 24px 48px -16px rgba(10,37,64,.14),0 8px 16px -8px rgba(10,37,64,.08);
  --shadow-accent:0 6px 16px -4px rgba(99,91,255,.32);
  --focus-ring:0 0 0 3px rgba(99,91,255,.30);

  --r:14px; --r-sm:10px; --r-lg:16px;
}

/* ============ TOKENS — DARK ============ */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a1124;
  --bg-tint:#0d1730;
  --bg-sunken:#070d1d;
  --panel:#111c38;
  --panel-2:#16234a;

  --text:#eaf0fb;
  --text-secondary:#aab6cf;
  --text-faint:#7c89a6;
  --on-accent:#ffffff;

  --border:#233156;
  --border-strong:#324374;
  --hairline:#1b2747;

  --accent:#7c75ff;
  --accent-hover:#8e88ff;
  --accent-active:#6a62f5;
  --accent-soft:#1a2150;
  --link:#9a94ff;
  --accent-btn:#5b54e0;
  --accent-btn-hover:#4f48cf;
  --accent-btn-active:#4640bb;
  --code-bg:#0b1326;
  --code-text:#cdd8ec;

  --up:#3ddc97;    --up-bg:#0e2a20;    --up-border:#1d4a37;
  --slow:#f0b95c;  --slow-bg:#2c2412;  --slow-border:#4a3c1d;
  --down:#ff6b63;  --down-bg:#2c1513;  --down-border:#4a201d;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 6px 18px rgba(0,0,0,.45);
  --shadow-lg:0 28px 56px -16px rgba(0,0,0,.6);
  --shadow-accent:0 8px 22px -6px rgba(124,117,255,.45);
  --focus-ring:0 0 0 3px rgba(124,117,255,.42);
}

/* ============ PAGE CHROME ============ */
body.sr-public{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  transition:background-color .2s ease, color .2s ease;
}

/* --- navbar --- */
body.sr-public .navbar{
  background:var(--bg);
  border-bottom:1px solid var(--hairline);
  box-shadow:none;
  min-height:64px;
  backdrop-filter:none;
}
body.sr-public .navbar-brand{
  color:var(--text) !important;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.24rem;
  letter-spacing:-.02em;
}
body.sr-public .sr-mark{ color:var(--accent); }
body.sr-public .navbar-nav .nav-link{
  color:var(--text-secondary) !important;
  font-family:var(--font-display);
  font-weight:500;
  font-size:.95rem;
}
body.sr-public .navbar-nav .nav-link:hover,
body.sr-public .navbar-nav .nav-link:focus{ color:var(--text) !important; }
body.sr-public .navbar .btn-primary{
  background:var(--accent-btn);
  border-color:var(--accent-btn);
  color:var(--on-accent);
  font-family:var(--font-display);
  font-weight:600;
  border-radius:var(--r-sm);
}
body.sr-public .navbar .btn-primary:hover{ background:var(--accent-btn-hover); border-color:var(--accent-btn-hover); }

/* keyboard focus rings for links/chrome (survive forced-colors mode) */
body.sr-public a:focus-visible,
body.sr-public .nav-link:focus-visible,
body.sr-public footer a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* dropdown menus (language switcher etc.) */
body.sr-public .dropdown-menu{ background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow-md); border-radius:var(--r-sm); }
body.sr-public .dropdown-item{ color:var(--text-secondary); }
body.sr-public .dropdown-item:hover,
body.sr-public .dropdown-item.active{ background:var(--bg-tint); color:var(--text); }

/* mobile toggler */
body.sr-public .navbar-toggler{ border-color:var(--border); padding:.35rem .5rem; }
body.sr-public .navbar-toggler:focus{ box-shadow:var(--focus-ring); }
body.sr-public .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230a2540' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
body.sr-public[data-theme="dark"] .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23eaf0fb' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* theme toggle */
body.sr-public .sr-theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; margin-right:6px;
  background:transparent; border:1px solid var(--border); border-radius:10px;
  color:var(--text-secondary); cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
body.sr-public .sr-theme-toggle:hover{ color:var(--text); border-color:var(--border-strong); background:var(--bg-tint); }
body.sr-public .sr-theme-toggle:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
body.sr-public .sr-theme-toggle svg{ width:18px; height:18px; display:block; }
body.sr-public .sr-theme-toggle .icon-sun{ display:none; }
body.sr-public[data-theme="dark"] .sr-theme-toggle .icon-moon{ display:none; }
body.sr-public[data-theme="dark"] .sr-theme-toggle .icon-sun{ display:block; }

/* --- footer --- */
body.sr-public footer{
  margin-top:0 !important;
  background:var(--bg-tint) !important;
  border-top:1px solid var(--border);
  color:var(--text-secondary);
}
body.sr-public footer h5,
body.sr-public footer h6,
body.sr-public footer .text-white{ color:var(--text) !important; }
body.sr-public footer p,
body.sr-public footer .text-muted{ color:var(--text-secondary) !important; }
body.sr-public footer a.text-muted{ color:var(--text-faint) !important; text-decoration:none; }
body.sr-public footer a.text-muted:hover{ color:var(--accent) !important; }
body.sr-public footer .border-secondary{ border-color:var(--border) !important; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  body.sr-public *, body.sr-public *::before, body.sr-public *::after{
    transition:none !important; animation:none !important;
  }
}