/* ==========================================================================
   Medfit – design tokens
   Source: Figma "MedFit – Startsida" (variables: Medfit / Färg, Medfit / Avstånd,
   text styles Mobil/* and Desktop/*). Names mirror Figma 1:1 so they can be
   moved straight into WordPress theme.json (settings.color / spacing / typography).
   Breakpoint: mobile values are default, desktop values apply from 1024px.
   Fonts are self-hosted in assets/fonts/ (Avenir: see README, licence).
   ========================================================================== */

@font-face {
  font-family: "Medfit Avenir";
  src: url("../fonts/Avenir-Heavy.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face { font-family: "Inter"; src: url("../fonts/Inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/Inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Colors – Medfit / Färg */
  --color-medfit-blue: #004263;   /* Core/MedFit Blue */
  --color-deep: #00324c;          /* Core/Deep */
  --color-green: #45d45d;         /* Program/Grön */
  --color-program-text: #003a57;  /* Program/Text */
  --color-yellow: #f4c83d;        /* Energy/Gul */
  --color-canvas: #fcfcfa;        /* Neutral/Canvas – page background only */
  --color-white: #ffffff;         /* Neutral/Vit */
  --color-tone: #f1f4f2;          /* Neutral/Ton */
  --color-line: #e2e6e3;          /* Neutral/Linje */
  --color-sand: #f2efdf;          /* Neutral/Sand */
  --color-graphite: #2e2e2e;      /* Kontrast/Graphite */
  --color-muted: #4d4d4d;         /* Kontrast/Dämpad */

  /* Spacing – Medfit / Avstånd */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* Radius – Hörn */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-pill: 999px;

  /* Font families */
  --font-display: "Medfit Avenir", "Avenir Next", "Avenir", "Nunito Sans", system-ui, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-voice: "Cormorant Garamond", "Cormorant", Georgia, serif;

  /* Layout */
  --content-max: 1184px;
  --rail: 384fr;          /* left rail on desktop (384px at 1440) */
  --column: 776fr;        /* main column on desktop (776px at 1440) */
  --gutter: var(--space-16);
  --section-pad: var(--space-24);
  --section-pad-last: var(--space-48);

  /* Typography – Mobil/* (default) */
  --h1-size: 40px;  --h1-lh: 1;    --h1-ls: -0.03em;
  --h2-size: 28px;  --h2-lh: 1.12; --h2-ls: -0.015em;
  --h3-size: 23px;  --h3-lh: 1.3;  --h3-ls: -0.01em;
  --h4-size: 18px;  --h4-lh: 1.1;  --h4-ls: -0.02em;
  --ingress-size: 18px; --ingress-lh: 1.4; --ingress-ls: -0.02em;
  --body-size: 16px;    --body-lh: 1.4;
  --small-size: 14px;   --small-lh: 1.35;
  --meta-size: 14px;    --meta-lh: 1.25;
  --label-size: 12px;   --label-lh: 1.2; --label-ls: 0.02em;
  --voice-size: 28px;   --voice-lh: 1.2; --voice-ls: -0.02em;
  --number-size: 56px;  --number-lh: 1.05; --number-ls: 0;

  /* Buttons (Knapp/Liten, Knapp/Normal, Knapp/Stor) */
  --btn-small-size: 13px;
  --btn-normal-size: 16px;
  --btn-large-size: 18px;
}

@media (min-width: 768px) {
  :root { --gutter: var(--space-32); }
}

@media (min-width: 1024px) {
  :root {
    --section-pad: var(--space-48);
    --section-pad-last: var(--space-128);

    /* Typography – Desktop/* */
    --h1-size: 64px;  --h1-lh: 1;    --h1-ls: -0.03em;
    --h2-size: 48px;  --h2-lh: 1.12; --h2-ls: -0.02em;
    --h3-size: 28px;  --h3-lh: 1.25; --h3-ls: -0.01em;
    --h4-size: 22px;  --h4-lh: 1.15; --h4-ls: -0.01em;
    --ingress-size: 24px; --ingress-lh: 1.6; --ingress-ls: -0.01em;
    --body-size: 18px;    --body-lh: 1.5;
    --small-size: 16px;   --small-lh: 1.35;
    --meta-size: 16px;    --meta-lh: 1.25;
    --label-size: 14px;   --label-lh: 1.2; --label-ls: 0.02em;
    --voice-size: 45px;   --voice-lh: 1.3; --voice-ls: -0.02em;
    --number-size: 128px; --number-lh: 1.05; --number-ls: -0.07em;
  }
}