/* ============================================================
   Wolvex — Design tokens + base element styles
   Source of truth: the approved homepage mockup. Do not invent
   new colours; extend the palette here if a page needs one.
   ============================================================ */
:root{
  --ink:#253455;
  --ink-deep:#161f33;
  --ink-mid:#324467;
  --red:#C12025;
  --red-deep:#93171b;
  --cloud:#F4F6FA;
  --paper:#FFFFFF;
  --slate:#5B6B85;
  --blush:#FBEAEA;
  --line:#E1E6EE;
  --focus:#4DA3FF;
  --step:0px;
  --radius-s:8px;
  --radius-m:14px;
  --radius-l:22px;
  /* Single site-wide font — Public Sans for headings and body alike. */
  --font-display:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Compatibility aliases for account/auth/admin/errors/search/contact
     pages built against the earlier token set. Point them at the mockup
     palette above rather than maintaining two colour systems. ---- */
  --navy:var(--ink);
  --navy-dark:var(--ink-deep);
  --navy-mid:var(--ink-mid);
  --ink-soft:var(--slate);
  --cream:var(--cloud);
  --red-dark:var(--red-deep);
  --amber:#B4631A;
  --transition-fast:.15s ease;

  --radius-sm:var(--radius-s);
  --radius-md:var(--radius-m);
  --radius-lg:var(--radius-l);
  --radius-full:9999px;

  --color-success:#1E7B34;
  --color-success-bg:#EAF5EC;
  --color-success-line:#BBDCC2;
  --color-danger:#B3261E;
  --color-danger-bg:#FBEDEC;
  --color-danger-line:#EFC4C1;
  --color-warning:#8A5A00;
  --color-warning-bg:#FBF3E2;
  --color-warning-line:#EAD9AE;
  --color-info:#0F5E8C;
  --color-info-bg:#EAF3F9;
  --color-info-line:#BFDCEC;
  --color-white:#FFFFFF;

  /* Note: --step here is a px length (set by the text-size control), so
     these sizes add it directly rather than as a unitless multiplier. */
  --fs-xs:calc(0.8125rem + (var(--step) * 0.3));
  --fs-sm:calc(0.9375rem + (var(--step) * 0.3));
  --fs-base:calc(1.125rem + (var(--step) * 0.3));
  --fs-lg:calc(1.375rem + (var(--step) * 0.3));
  --fs-xl:calc(1.875rem + (var(--step) * 0.3));
  --fs-xxl:calc(2.625rem + (var(--step) * 0.3));

  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-12:3rem;
  --space-16:4rem;

  --touch-target:48px;
  --shadow-sm:0 1px 3px rgba(22,31,51,.1);
  --shadow-md:0 12px 24px -14px rgba(22,31,51,.4);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--cloud);
  color:var(--ink-deep);
  font-size:calc(17px + var(--step));
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

p{margin:0 0 1em 0;}
a{color:inherit;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
ul{list-style:none;margin:0;padding:0;}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:0;top:-60px;background:var(--red);color:#fff;padding:14px 22px;font-weight:700;z-index:1000;border-radius:0 0 10px 0;transition:top .2s ease;}
.skip-link:focus{top:0;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px;}

.wrap{max-width:1280px;margin:0 auto;padding:0 20px;}

@keyframes ring-pulse{
  0%{transform:scale(.7);opacity:.55;}
  80%{opacity:0;}
  100%{transform:scale(1.9);opacity:0;}
}
@keyframes float-idle{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}