/* teamcyclingkits.com · global layer (_DESIGN-SYSTEM.md §0, v2 2026-09-25)
   Tokens, type scale, containers, button, row highlight, entry fade.
   Section-specific layout lives in each section's scoped <style>. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:160px;}

:root{
  /* §0.1 colour: ERP three + slate neutrals */
  --ink:#0F172A;
  --white:#FFFFFF;
  --sky:#0EA5E9;          /* section fill only, ink text on top */
  --sun:#FACC15;          /* CTA fill + row highlight only */
  --sun-hover:#EAB308;
  --g-100:#F1F5F9;
  --g-200:#E2E8F0;
  --g-300:#CBD5E1;
  --g-400:#94A3B8;
  --g-600:#475569;
  --line-dark:rgba(255,255,255,.14);
  --line-sky:rgba(15,23,42,.22);

  /* §0.2 type families */
  --ff-head:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --ff-body:"Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* §0.3 type scale (seven steps) */
  --fs-h1:clamp(40px,4.6vw,64px);
  --fs-h2:clamp(30px,2.8vw,40px);
  --fs-h3:22px;
  --fs-lead:19px;
  --fs-body:17px;
  --fs-small:15px;
  --fs-label:13px;

  /* §0.4 space / containers / shape */
  --sec-pad:clamp(80px,8vw,120px);
  --w-wide:1440px;
  --w-base:1200px;
  --w-text:960px;
  --gutter:clamp(16px,4vw,40px);
  --r-img:4px;
  --r-ctl:2px;
}

body{font-family:var(--ff-body);font-size:var(--fs-body);line-height:1.65;color:var(--ink);background:var(--white);overflow-x:clip;}
h1,h2,h3{font-family:var(--ff-head);font-weight:600;color:inherit;text-wrap:balance;}
h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.01em;text-box:trim-both cap alphabetic;}
h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.005em;}
h3{font-size:var(--fs-h3);line-height:1.2;}
p{text-wrap:pretty;}
img{max-width:100%;height:auto;display:block;}
svg{display:block;}
a{color:inherit;}

/* containers */
.w-wide,.w-base,.w-text{width:100%;margin-inline:auto;padding-inline:var(--gutter);}
.w-wide{max-width:calc(var(--w-wide) + 2*var(--gutter));}
.w-base{max-width:calc(var(--w-base) + 2*var(--gutter));}
.w-text{max-width:calc(var(--w-text) + 2*var(--gutter));}
.sec{padding-block:var(--sec-pad);}

/* shared type roles */
.lead{font-size:var(--fs-lead);line-height:1.55;}
.small{font-size:var(--fs-small);line-height:1.5;}
.label{font-size:var(--fs-label);font-weight:600;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;}
.num{font-variant-numeric:tabular-nums;}

/* primary button (sun fill, ink text) — selector a.btn-p/button.btn-p beats link colour rules */
a.btn-p,button.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;
  background:var(--sun);color:var(--ink);font-family:var(--ff-body);font-size:17px;font-weight:600;line-height:1;
  text-decoration:none;border:1px solid var(--ink);border-radius:var(--r-ctl);cursor:pointer;transition:background-color 160ms;}
a.btn-p:hover,button.btn-p:hover{background:var(--sun-hover);}
a.btn-p:focus-visible,button.btn-p:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
.on-dark a.btn-p:focus-visible,.on-dark button.btn-p:focus-visible{outline-color:#fff;}
.on-dark a.btn-p{border-color:var(--sun);}

/* secondary action: text link + arrow */
a.tlink{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;white-space:nowrap;}
a.tlink:hover{text-decoration-thickness:2px;}
a.tlink:focus-visible{outline:3px solid currentColor;outline-offset:3px;}

/* tables: 2px ink top rule, hairline rows, no radius */
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-small);line-height:1.5;}
.tbl th,.tbl td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--g-200);}
.tbl thead th{font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);}

/* row highlight — the only interactive feedback (§0.4) */
.hl tbody tr,.hl-row{transition:background-color 160ms,box-shadow 160ms;}
.hl tbody tr:is(:hover,:focus-within),.hl tbody tr:has(a:focus-visible),.hl-row:is(:hover,:focus-within){box-shadow:inset 3px 0 0 var(--sun);background-color:rgba(250,204,21,.22);}
.on-dark .hl tbody tr:is(:hover,:focus-within),.on-dark .hl-row:is(:hover,:focus-within){background-color:rgba(250,204,21,.12);}
.on-sky .hl tbody tr:is(:hover,:focus-within),.on-sky .hl-row:is(:hover,:focus-within){background-color:rgba(255,255,255,.45);}

/* entry fade (tck-in keyframes + .in view-timeline) lives in index.html <style id="page"> — page-level motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .hl tbody tr,.hl-row,a.btn-p,button.btn-p{transition:none;}
}

.skip-link{position:absolute;top:0;transform:translateY(-120%);left:0;background:var(--ink);color:#fff;padding:12px 16px;z-index:10000;text-decoration:none;}
.skip-link:focus{transform:none;}
@media (max-width:768px){.dm-logo .dm-logo-text{display:inline;font-size:18px;white-space:nowrap;}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

#dynamic-menu-container{min-height:70px;}