/* Wahss Labs – tokens. Samma fil som i wahsslabs.se-paketet; värdena kommer ur designsystemet Wahss Labs.
   Ljust tema som grund; mörkt tema följer besökarens systeminställning (prefers-color-scheme).
   Bara färg-, typ- och spacingvariablerna används på den här sidan; resten följer med så att värdena är desamma som i wahsslabs.se-paketets tokens.css. */

@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Färg (designsystemet, ljust tema) */
  --paper: #ffffff;
  --paper-alt: #f4f4f2;
  --ink: #141414;
  --ink-muted: #5c5c5c;
  --line: #d6d6d6;
  --line-strong: #141414;
  --accent: #9b2d20;
  --on-accent: #ffffff;
  --pattern-grid: #d6d6d6; /* mönstrets rutor: ljus variant = line */

  /* Typsnitt */
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  /* Spacing (designsystemet) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* Linjer (designsystemet) */
  --rule-hair: 1px;
  --rule-strong: 2px;

  /* Radie (designsystemet): allt kantigt */
  --radius-none: 0;

  /* Sajtens egna – ligger utanför designsystemets skalor, se HANDOFF/SPEC.md §2.4 */
  --container: 1152px;
  --gutter: 24px;
  --section-y: 80px;
  --hero-y: 96px;
  --button-h: 48px;
  --link-pad-y: 12px;
  --nav-gap: 32px;
  --breakpoint-stack: 860px; /* dokumentation – används som literal i @media */
  color-scheme: light;
}

/* Mörkt tema (designsystemet, mörk ställning). Mönstrets rutor i #5c5c5c enligt mönsterfilernas mörka variant. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141414;
    --paper-alt: #1e1e1e;
    --ink: #f4f4f2;
    --ink-muted: #a3a3a3;
    --line: #3a3a3a;
    --line-strong: #f4f4f2;
    --accent: #b5402e;
    --on-accent: #ffffff;
    --pattern-grid: #5c5c5c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #141414;
  --paper-alt: #1e1e1e;
  --ink: #f4f4f2;
  --ink-muted: #a3a3a3;
  --line: #3a3a3a;
  --line-strong: #f4f4f2;
  --accent: #b5402e;
  --on-accent: #ffffff;
  --pattern-grid: #5c5c5c;
  color-scheme: dark;
}