/* ============================================================
   Clearsky (concept-2-clearsky) — design tokens + minimal base
   Roddy HQ visual revamp. Canonical values — see DIRECTION.md.
   Link AFTER the Google Fonts <link>, BEFORE page styles.
   ============================================================ */
:root{
  /* color */
  --bg:#F4F8FE;
  --surface:#FFFFFF;
  --surfaceAlt:#EAF2FD;
  --border:#D9E6F7;
  --text:#1E3A5F;
  --textMuted:#4A6B8A;
  --accent:#1A73E8;          /* as TEXT: white surfaces only (4.5:1) */
  --accentHover:#155FC2;     /* hover bg + text links on tinted bgs */
  --accentSoft:#E4F0FE;
  --gradient:linear-gradient(135deg,#1A73E8 0%,#62A9F9 100%); /* decorative only */
  --green:#15803D;  --greenSoft:#E9F7EE;  --greenInk:#0F6B33;
  --red:#D92D20;    --redSoft:#FDEBE9;    --redInk:#B42318;
  --yellow:#B54708; --yellowSoft:#FEF3E2; /* yellow chip text = --yellow */

  /* type */
  --font-display:'Plus Jakarta Sans','Nunito Sans',sans-serif;
  --font-body:'Nunito Sans',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Roboto Mono',ui-monospace,Consolas,monospace;

  /* radii — Clearsky never goes below 8px (admin floor) */
  --r-sm:12px; --r-md:16px; --r-lg:24px; --r-pill:999px;

  /* elevation */
  --shadow-card:0 8px 30px rgba(30,58,95,.08);
  --shadow-lift:0 14px 40px rgba(30,58,95,.14);
  --shadow-btn:0 6px 16px rgba(26,115,232,.25);

  /* glass */
  --glass-bg:rgba(255,255,255,.72);
  --glass-blur:14px;

  /* layout */
  --control-h:44px;
  --section-pad:clamp(72px,9vw,128px);
  --container:1140px;
}

/* ---- minimal base (nothing page-specific) ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:400 16.5px/1.65 var(--font-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text);margin:0}
p{margin:0 0 1em}
img,svg{vertical-align:middle}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accentHover)} /* AA on --bg/--surfaceAlt; --accent allowed on pure white */
::selection{background:var(--accent);color:#FFFFFF}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---- shared toast (BUILD-SPEC snippet targets .arlo-toast) ---- */
.arlo-toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);
  background:var(--text);color:#FFFFFF;
  font:600 14.5px/1 var(--font-body);
  padding:13px 22px;border-radius:var(--r-pill);
  box-shadow:var(--shadow-lift);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
  z-index:9999;
}
.arlo-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- reduced-motion kill-switch ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}