/* Autoposter design system: tokens and base layer.
   Shared by the landing (/css/styles.css) and every product page (/cabinet/cabinet.css).
   Fonts: Geologica (headings and big numbers) + Onest (interface and body). Loaded in each page <head>.
   Rule of thumb: components read tokens only. No raw colours outside this file. */

:root {
  /* Surfaces, from the page background up */
  --bg: #0A0B0D;
  --bg-2: #0E0F12;
  --surface: #131519;
  --surface-2: #191C21;
  --surface-3: #22262C;
  --line: rgba(242, 240, 235, .08);
  --line-2: rgba(242, 240, 235, .15);
  --line-3: rgba(242, 240, 235, .28);

  /* Text */
  --text: #F2F0EB;
  --muted: #AAA9A3;
  --dim: #85847E;

  /* Brand and status */
  --accent: #FF5A26;
  --accent-2: #FF8A3D;
  --accent-ink: #0B0C0E;
  --accent-soft: rgba(255, 90, 38, .12);
  --ok: #3DDC97;
  --ok-soft: rgba(61, 220, 151, .12);
  --wait: #FFB547;
  --wait-soft: rgba(255, 181, 71, .12);
  --err: #FF6B6B;
  --err-soft: rgba(255, 107, 107, .12);
  --info: #6EB6FF;
  --info-soft: rgba(110, 182, 255, .12);

  /* Type */
  --f-display: "Geologica", "Onest", system-ui, sans-serif;
  --f-ui: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12.5px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-h3: 20px;
  --fs-h2: clamp(28px, 3.6vw, 44px);
  --fs-h1: clamp(30px, 3vw, 38px);

  /* Shape and space (4px grid) */
  --r-xs: 8px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* Elevation */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px -18px rgba(0, 0, 0, .8);
  --shadow-2: 0 30px 80px -30px rgba(0, 0, 0, .85);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .15s;
  --t: .25s;
  --t-slow: .5s;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-md)/1.55 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 0;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Numbers that change or line up (clocks, prices, counters) */
.num, .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Thin dark scrollbars inside panels */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

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