/* ============================================================
   Clear Command — base.css
   Reset, tokens, typography primitives.
   Structure adapted from the American Malinois site (base.css),
   re-tokened for Clear Command: black, strong blue, white.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,video,svg{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
p{margin:0}
h1,h2,h3,h4{margin:0}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue-bright);outline-offset:3px}

/* ---------- Tokens ---------- */
:root{
  /* Palette: black, strong blue, white */
  --bg:          #000000;
  --bg-2:        #0b0d12;   /* raised black band */
  --surface:     rgba(255,255,255,.04);
  --hairline:    rgba(255,255,255,.12);
  --hairline-2:  rgba(255,255,255,.22);

  --ink:         #ffffff;
  --ink-2:       rgba(255,255,255,.80);
  --ink-3:       rgba(255,255,255,.60);

  /* TODO(brand): match these to the blue in the final Malinois-head logo file. */
  --blue:        #1a63f0;   /* buttons (white text passes contrast) */
  --blue-hover:  #2f76ff;
  --blue-bright: #5b9bff;   /* accent text on black */
  --blue-glow:   rgba(26,99,240,.22);

  /* Type */
  --font-body: "Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  /* Layout */
  --wrap: 1120px;
  --pad-x: clamp(20px,4vw,52px);
  --pad-y: clamp(64px,8vw,112px);

  --ease: cubic-bezier(.2,.6,.2,1);
}