/* =============================================================
   tokens.css — Moberg Fönsterputs designsystem
   Källa: version 2/design-systems.md
   Ändra INGA värden här utan att uppdatera system.md först.
   ============================================================= */


/* -----------------------------------------------------------
   Sektion 2 — Typsnitt: @font-face (General Sans, self-hosted)
   Källa: fonts/GeneralSans_Complete/Fonts/WEB/fonts/
   ----------------------------------------------------------- */

@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans_Complete/Fonts/WEB/fonts/GeneralSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans_Complete/Fonts/WEB/fonts/GeneralSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans_Complete/Fonts/WEB/fonts/GeneralSans-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans_Complete/Fonts/WEB/fonts/GeneralSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* -----------------------------------------------------------
   :root — alla CSS-variabler
   ----------------------------------------------------------- */

:root {

  /* Sektion 1 — Färger */
  --color-white: #FCFCFD;
  --color-black: #222121;
  --color-blue: #004D7C;
  --color-brass: #CDC262;
  --color-signal-green: #007B5F; /* PMS 335 C — positiv bekräftelse */

  --color-text-primary: var(--color-black);
  --color-text-secondary: #5A5958;
  --color-text-muted: #8A8987;
  --color-text-muted-strong: #6B6A68;

  --color-background: var(--color-white);
  --color-background-alt: #F4F3F1;

  --color-border: #E3E2DF;

  /* Sektion 2 — Typsnitt */
  --font-sans: 'General Sans', -apple-system, sans-serif;

  /* Sektion 3 — Spacing-skala */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* Sektion 4 — Border-radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-sheet: 28px;

  /* Sektion 5 — Layout (desktop) */
  --layout-wide: 1120px;    /* header, hero, footer på ≥ 1024px */
  --layout-reading: 640px;  /* text, formulär, kort på ≥ 1024px */
  --layout-gutter: var(--space-5);

}