/* subqix design system — tokens, base styles and shared components.
   Reference: /cd/ (Corporate Design) and CORPORATE-DESIGN.md */

@font-face{font-family:'Chakra Petch';src:url('/assets/fonts/chakra-petch-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('/assets/fonts/chakra-petch-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('/assets/fonts/chakra-petch-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('/assets/fonts/chakra-petch-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('/assets/fonts/chakra-petch-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jetbrains-mono-variable.woff2') format('woff2');font-weight:100 800;font-display:swap}

:root{
  /* Colour */
  --sq-ink:#0B0C0D;
  --sq-graphite:#121315;
  --sq-carbon:#1A1C1F;
  --sq-line:#2B2D31;
  --sq-steel:#5C5F66;
  --sq-ash:#7F838B;
  --sq-silver:#9A9DA3;
  --sq-text:#E8E9EB;
  --sq-white:#FFFFFF;
  --sq-yellow:#FFE500;
  --sq-paper:#F2F2EE;
  --sq-nugget:#F7B520;
  --sq-error:#FF4D3D;

  /* Type */
  --sq-font:'Chakra Petch',system-ui,sans-serif;
  --sq-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  /* Space: 8px base */
  --sq-1:8px;--sq-2:16px;--sq-3:24px;--sq-4:32px;--sq-6:48px;--sq-8:64px;--sq-12:96px;--sq-16:128px;

  /* Lines and marks */
  --sq-hair:1px;
  --sq-mark:13px;
  --sq-grid:32px;

  --sq-max:1380px;
  --sq-gutter:clamp(20px,4.6vw,64px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--sq-graphite);color:var(--sq-text);font-family:var(--sq-font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
body{background:var(--sq-graphite);min-height:100svh}
img,svg{display:block;max-width:100%}
::selection{background:var(--sq-yellow);color:var(--sq-graphite)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--sq-yellow);outline-offset:4px}
button,input,select,textarea{font:inherit;color:inherit;border-radius:0}

/* Layout */
.sq-wrap{max-width:var(--sq-max);margin-inline:auto;padding-inline:var(--sq-gutter)}

/* Header / footer */
.sq-header{display:flex;align-items:center;justify-content:space-between;gap:var(--sq-3);height:88px;border-bottom:var(--sq-hair) solid var(--sq-line)}
.sq-header .sq-logo img{height:30px;width:auto}
.sq-nav{display:flex;gap:var(--sq-3);font:500 11px/1 var(--sq-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sq-silver)}
.sq-nav a:hover,.sq-nav a[aria-current]{color:var(--sq-yellow)}
.sq-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sq-1) var(--sq-3);padding-block:20px;border-top:var(--sq-hair) solid var(--sq-line);font:11px/1.5 var(--sq-mono);color:var(--sq-ash);letter-spacing:.02em}
.sq-footer a:hover{color:var(--sq-yellow)}

/* Text */
.sq-label{font:500 11px/1.4 var(--sq-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sq-silver)}
.sq-label--yellow{color:var(--sq-yellow)}
.sq-display{font-weight:700;letter-spacing:-.02em;line-height:.92}
.sq-accent{color:var(--sq-yellow)}
.sq-muted{color:var(--sq-silver)}
.sq-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--sq-steel)}
.sq-link:hover{color:var(--sq-yellow);text-decoration-color:var(--sq-yellow)}

/* Wordmark set as text (for UI; files in /brand/logo/ are the reference) */
.sq-word{font-weight:700;color:var(--sq-white);white-space:nowrap}
.sq-word b{font-weight:700;color:var(--sq-yellow)}
.sq-word span{font-weight:300}

/* Status square and cursor */
.sq-dot{display:inline-block;width:6px;height:6px;background:var(--sq-yellow);vertical-align:middle}
.sq-cursor::after{content:'_';color:var(--sq-yellow);animation:sq-blink 1.1s steps(1) infinite}
@keyframes sq-blink{50%{opacity:0}}

/* Corner marks: 1px yellow brackets on all four corners (painted on ::before so they
   combine with any background on the element itself) */
.sq-marks{position:relative}
.sq-marks::before{content:'';position:absolute;inset:0;pointer-events:none;--c:var(--sq-yellow);--m:var(--sq-mark);background:
  linear-gradient(var(--c),var(--c)) top left/var(--m) 1px,linear-gradient(var(--c),var(--c)) top left/1px var(--m),
  linear-gradient(var(--c),var(--c)) top right/var(--m) 1px,linear-gradient(var(--c),var(--c)) top right/1px var(--m),
  linear-gradient(var(--c),var(--c)) bottom left/var(--m) 1px,linear-gradient(var(--c),var(--c)) bottom left/1px var(--m),
  linear-gradient(var(--c),var(--c)) bottom right/var(--m) 1px,linear-gradient(var(--c),var(--c)) bottom right/1px var(--m);
  background-repeat:no-repeat}

.sq-marks--white::before{--c:var(--sq-white)}
.sq-marks--line::before{--c:var(--sq-steel)}

/* Blueprint grid */
.sq-grid{background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:var(--sq-grid) var(--sq-grid)}

/* 45° chamfer — the cut corner of Chakra Petch and of PCB traces. Use once per element. */
.sq-chamfer{--cut:14px;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}

/* Buttons and tags */
.sq-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border:1px solid var(--sq-yellow);background:var(--sq-yellow);color:var(--sq-graphite);font:600 14px/1 var(--sq-font);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s}
.sq-btn:hover{background:transparent;color:var(--sq-yellow)}
.sq-btn--ghost{background:transparent;border-color:var(--sq-line);color:var(--sq-text)}
.sq-btn--ghost:hover{border-color:var(--sq-yellow);color:var(--sq-yellow)}
.sq-btn[aria-disabled=true]{opacity:.4;pointer-events:none}
.sq-tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border:1px solid var(--sq-line);font:500 10px/1 var(--sq-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sq-silver)}
.sq-tag--yellow{border-color:var(--sq-yellow);color:var(--sq-yellow)}

@media (prefers-reduced-motion:reduce){.sq-cursor::after{animation:none}}