/* Assist Dog — brand tokens and components.
   World: working-dog harness & vest — cordura field, hi-vis tape, webbing straps,
   stitched patches, tan leather handle. */

@font-face{font-family:"Unbounded";src:url(../fonts/unbounded-cyrillic.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";src:url(../fonts/unbounded-latin.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";src:url(../fonts/onest-cyrillic.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";src:url(../fonts/onest-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-cyrillic.woff2) format("woff2");font-weight:100 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrains-mono-latin.woff2) format("woff2");font-weight:100 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* cordura vest */
  --vest:#0F4A3C;
  --vest-deep:#0A3229;
  --vest-lift:#165C4B;
  --on-vest:#F1F5EE;
  --on-vest-2:#B6CCC1;
  /* hi-vis tape */
  --hivis:#E2EC38;
  --hivis-deep:#C9D31F;
  /* leather handle — the colour of Hatiko's coat */
  --leather:#B4622C;
  --leather-ink:#8A4519;
  /* webbing & reflective */
  --webbing:#151917;
  --silver:#C4CACE;
  --silver-hi:#E3E7EA;
  /* reading surface */
  --paper:#EDF0E9;
  --paper-2:#E1E6DE;
  --ink:#151917;
  --ink-2:#3B4640;
  --line:#C3CBC2;
  /* status */
  --ok:#0F4A3C;
  --warn:#B4622C;
  --stop:#9E2A22;

  --f-display:"Unbounded",system-ui,sans-serif;
  --f-text:"Onest",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;

  --r-strap:6px;
  --r-card:14px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* textures */
.cordura{
  background-color:var(--vest);
  background-image:
    repeating-linear-gradient(45deg,rgb(255 255 255 / .025) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(-45deg,rgb(0 0 0 / .05) 0 1px,transparent 1px 4px);
}
.tape{
  height:28px;
  background:
    linear-gradient(var(--hivis),var(--hivis)) top/100% 7px no-repeat,
    linear-gradient(var(--hivis),var(--hivis)) bottom/100% 7px no-repeat,
    repeating-linear-gradient(90deg,var(--silver) 0 3px,var(--silver-hi) 3px 5px);
}

/* straps (buttons) */
.strap{
  --bg:var(--hivis);--fg:var(--webbing);--stitch:rgb(21 25 23 / .55);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:0 1.5em;border:0;border-radius:var(--r-strap);
  background:var(--bg);color:var(--fg);
  font:700 15px/1 var(--f-display);letter-spacing:.02em;text-decoration:none;cursor:pointer;
  outline:1.5px dashed var(--stitch);outline-offset:-6px;
  box-shadow:0 2px 0 rgb(0 0 0 / .18),0 8px 18px -10px rgb(0 0 0 / .45);
  transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out),background-color .16s;
}
.strap:hover{background:var(--hivis-deep)}
.strap:active{transform:translateY(2px);box-shadow:0 0 0 rgb(0 0 0 / .18),0 4px 10px -8px rgb(0 0 0 / .45)}
.strap:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.strap--webbing{--bg:var(--webbing);--fg:var(--on-vest);--stitch:rgb(196 202 206 / .6)}
.strap--webbing:hover{background:#262c29}
.strap--webbing:focus-visible{outline-color:var(--hivis)}
.strap--leather{--bg:var(--leather);--fg:#fff;--stitch:rgb(255 255 255 / .6)}
.strap--leather:hover{background:var(--leather-ink)}
.strap[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* stitched patch (status) */
.patch{
  --bg:var(--vest);--fg:var(--hivis);--edge:var(--hivis);
  display:inline-flex;align-items:center;gap:.55em;
  padding:.55em 1.1em .55em .9em;border-radius:999px;
  background:var(--bg);color:var(--fg);
  font:700 12px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 0 0 3px var(--edge),inset 0 0 0 2px var(--bg),inset 0 0 0 3.5px color-mix(in srgb,var(--fg) 45%,transparent);
}
.patch::before{content:"";width:.7em;height:.7em;border-radius:50%;background:currentColor}
.patch--training{--bg:var(--leather);--fg:#fff;--edge:var(--webbing)}
.patch--paused{--bg:var(--silver);--fg:var(--webbing);--edge:var(--webbing)}
.patch--revoked{--bg:var(--stop);--fg:#fff;--edge:var(--webbing)}

/* field */
.field{display:grid;gap:8px}
.field label{font:600 14px/1.2 var(--f-text);color:inherit}
.field input{
  width:100%;min-width:0;min-height:56px;padding:0 18px;border-radius:var(--r-strap);
  border:2px solid var(--webbing);background:#fff;color:var(--ink);
  font:600 20px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;
}
.field input::placeholder{color:#6B756F}
.field input:focus-visible{outline:3px solid var(--hivis);outline-offset:2px}

/* pictograms */
.pic{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

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