/* Liftly — The Level Book
   Tokens, typography and browser surfaces. Loaded before styles.css.
   The surface is a surveyor's field book: ruled paper, graphite, one spirit-vial
   accent reserved for what you can act on or what is being measured right now. */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- Light: the field book itself, read in daylight ---- */
:root{
  color-scheme:light;

  --ground:#edf1ea;          /* ruled field-book paper */
  --surface:#f6f8f4;         /* a leaf laid on the page */
  --sunk:#e3e8df;            /* a measured-out area */
  --rule:#c9d2c6;            /* hairline rules */
  --rule-strong:#9aa89b;     /* the datum */

  --ink:#141a17;             /* graphite */
  --ink-2:#4c574f;
  --ink-3:#5e6962;

  --accent:#c6e84b;          /* spirit-vial fluid: fills only, in light */
  --accent-ink:#46590a;      /* the same idea, legible as text on paper */
  --accent-sunk:#dfeeb4;
  --on-accent:#141a17;

  --warn:#e8873c;            /* out of adjustment */
  --warn-ink:#8a4409;
  --warn-sunk:#f7e2cd;

  --bad:#d9523f;             /* out of tolerance / cannot assess */
  --bad-ink:#9b2c1a;
  --bad-sunk:#f7d9d3;

  --housing:#141a1d;         /* instrument body — the live screen, both themes */
  --housing-ink:#e6ebe8;
  --housing-ink-2:#a3aea8;
  --housing-rule:#28322f;

  --station:#8d988f;         /* left-margin station numerals */
  --chart:#46590a;           /* chart marks: validated against the light surface */
  --plate:#e8eee2;           /* a pasted plate: the artwork's own ground */

  --shadow:0 1px 2px rgba(20,26,23,.06),0 6px 18px -8px rgba(20,26,23,.18);
  --shadow-lift:0 2px 4px rgba(20,26,23,.10),0 8px 16px -8px rgba(20,26,23,.24);

  --col:clamp(16px,3.2vw,30px);   /* column gutter */
  --step:8px;                      /* the rule pitch everything sits on */
  --radius:3px;                    /* instruments are machined, not pillowed */
  --radius-lg:5px;

  --font:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---- Dark: the instrument housing, read in a dim room ---- */
:root[data-theme=dark]{
  color-scheme:dark;

  --ground:#141a1d;
  --surface:#1b2225;
  --sunk:#10161a;
  --rule:#28322f;
  --rule-strong:#414e49;

  --ink:#e6ebe8;
  --ink-2:#a3aea8;
  --ink-3:#7c8883;

  --accent:#c6e84b;
  --accent-ink:#c6e84b;
  --accent-sunk:#2c3a18;
  --on-accent:#141a1d;

  --warn:#e8873c;
  --warn-ink:#eda263;
  --warn-sunk:#3a2a19;

  --bad:#e8654f;
  --bad-ink:#f08b78;
  --bad-sunk:#3a1f1a;

  --station:#65706a;
  --chart:#809d22;
  --plate:#e8eee2;

  --shadow:0 1px 2px rgba(0,0,0,.5),0 6px 18px -8px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.55),0 8px 16px -8px rgba(0,0,0,.75);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

/* Measurement is the product; numerals never reflow as they climb. */
.reading,.count,.stat-value,.station,.chainage,.tally,table,time,
input[type=number],.metric b,.tolerance{font-variant-numeric:tabular-nums}

h1,h2,h3,h4{
  margin:0;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.018em;
  text-wrap:balance;
}
h1{font-size:clamp(25px,3.4vw,34px)}
h2{font-size:clamp(18px,2.1vw,22px)}
h3{font-size:16px}
p{margin:0;max-width:68ch}

/* Field-book lettering: condensed, tracked, small. Labels, not decoration. */
.label,.station,.tag,thead th,.setting small,.chainage-key{
  font-stretch:78%;
  font-weight:600;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-3);
}

small{font-size:12.5px;color:var(--ink-2);line-height:1.5}
b,strong{font-weight:600}

a{color:var(--accent-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--accent)}

/* ---- Browser surfaces: the parts we did not draw still carry the world ---- */
::selection{background:var(--accent);color:var(--on-accent)}
:root{caret-color:var(--accent-ink);accent-color:var(--accent-ink)}
:root[data-theme=dark]{caret-color:var(--accent);accent-color:var(--accent)}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent-ink);
  outline-offset:2px;
  border-radius:2px;
}
:root[data-theme=dark] :where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline-color:var(--accent);
}

*{scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--rule-strong);
  border:3px solid var(--ground);
  border-radius:6px;
}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

::placeholder{color:var(--ink-3);opacity:1}

svg{display:block}
.icon{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none}
.icon-sm{width:16px;height:16px}

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