/* ==========================================================================
   PCB ROUTING — DESIGN TOKENS
   The single source of truth. Every colour, size, space and motion value in
   the theme resolves back to a token declared here.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- colour */
  --base: #F4F5F7;
  --surface: #FFFFFF;
  --ink: #0A0D14;
  --ink-light: #475467;
  --ink-mute:  #667085;
  --support: #D0D5DD;
  --line:      #E4E7EC;

  --copper: #DE4916;
  --copper-hot: #FF4500;          /* dark grounds only */
  --copper-dim: #B3380F;
  --copper-wash: rgba(222, 73, 22, .08);
  --copper-edge: rgba(222, 73, 22, .38);

  --void: #030504;
  --graphite: #121614;
  --on-dark:      rgba(255, 255, 255, .92);
  --on-dark-mute: #98A2B3;
  --on-dark-line: rgba(255, 255, 255, .10);
  --on-dark-wash: rgba(255, 255, 255, .04);

  --ok:   #059669;
  --warn: #B54708;

  /* ------------------------------------------------------------------ type */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Code', Menlo, monospace;

  /* fluid type scale — 320px -> 1600px viewport */
  --fs-3xs: clamp(10px,  .30vw + 9.4px,  11px);
  --fs-2xs: clamp(11px,  .32vw + 10.4px, 12px);
  --fs-xs:  clamp(12px,  .34vw + 11.2px, 13.5px);
  --fs-sm:  clamp(13px,  .30vw + 12.4px, 15px);
  --fs-md:  clamp(15px,  .28vw + 14.4px, 17px);
  --fs-lg:  clamp(17px,  .34vw + 16.2px, 20px);
  --fs-xl:  clamp(20px,  .70vw + 18.0px, 28px);
  --fs-2xl: clamp(24px, 1.30vw + 19.6px, 40px);
  --fs-3xl: clamp(30px, 2.20vw + 21.0px, 60px);
  --fs-4xl: clamp(38px, 3.60vw + 22.0px, 88px);

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.62;
  --lh-loose: 1.75;

  --ls-display: -.028em;
  --ls-tight:   -.018em;
  --ls-label:   .16em;

  --measure: 68ch;
  --measure-tight: 54ch;

  /* ---------------------------------------------------------------- space */
  --sp-3xs: 2px;
  --sp-2xs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
  --sp-4xl: 96px;

  --gutter: clamp(16px, 5vw, 40px);
  --section-y:  clamp(56px, 8vw, 144px);
  --shell:      1440px;
  --shell-wide: 1680px;
  --shell-prose: 760px;

  /* -------------------------------------------------------------- geometry */
  /* chamfers are the brand: one cut corner, 45°, never a full radius */
  --cut:      22px;
  --cut-sm:   12px;
  --cut-xs:   8px;
  --cut-pill: 999px;

  --clip:         polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  --clip-sm:      polygon(0 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%);
  --clip-xs:      polygon(0 0, 100% 0, 100% calc(100% - var(--cut-xs)), calc(100% - var(--cut-xs)) 100%, 0 100%);
  --clip-top:     polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  --clip-both:    polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));

  /* --------------------------------------------------------------- effects */
  --sh-1: 0 1px 2px rgba(10, 13, 20, .06);
  --sh-2: 0 0 0 1px var(--line), 0 4px 6px -2px rgba(10, 13, 20, .04), 0 10px 14px -6px rgba(10, 13, 20, .07);
  --sh-3: 0 0 0 1px var(--line), 0 8px 12px -4px rgba(10, 13, 20, .06), 0 22px 30px -12px rgba(10, 13, 20, .10);
  --sh-lift: 0 0 0 1px var(--copper-edge), 0 14px 26px -12px rgba(10, 13, 20, .22);
  --sh-dark: 0 0 0 1px var(--on-dark-line), 0 18px 34px -18px rgba(0, 0, 0, .8);

  /* ---------------------------------------------------------------- motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --t-fast:   .18s;
  --t-base:   .32s;
  --t-slow:   .6s;

  /* ------------------------------------------------------------- elevation */
  --z-nav: 100;
  --z-overlay: 200;
  --z-drawer: 300;
  --z-top: 400;

  --nav-h: 72px;
  --glass: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.10);
  --section-pad: clamp(64px, 10vw, 160px);
  --nav-height: 76px;
  --radius-sm: 4px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-round: 999px;
  --shadow-sm: 0 4px 6px -1px rgba(10,13,20,.05), 0 2px 4px -2px rgba(10,13,20,.05);
  --shadow-card: 0 0 0 1px var(--support), 0 4px 6px -2px rgba(10,13,20,.03), 0 12px 16px -4px rgba(10,13,20,.08);
  --shadow-lg: 0 20px 25px -5px rgba(10,13,20,.08), 0 8px 10px -6px rgba(10,13,20,.06);
  --border: 1px solid rgba(10,13,20,.08);
  --chamfer: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
  --chamfer-sm: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  --chamfer-m: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}


/* Coarse pointers get no hover lift — it sticks after a tap. */
@media (hover: none) {
  :root { --hover-lift: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: .01s; --t-base: .01s; --t-slow: .01s; }
}