/* FutureReady by RISE — designtoken
   Paletten är hämtad ur logotypen och kursens bildspel. Mint är
   penseldragets färg och sajtens primära accent. */

@font-face {
  font-family: "Code Pro";
  src: url("/static/fonts/CodePro-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/static/fonts/Lato-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/static/fonts/Lato-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/static/fonts/Lato-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("/static/fonts/Lato-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("/static/fonts/RobotoMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("/static/fonts/RobotoMono-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Djup */
  --ink-900: #061419;
  --ink-850: #08191f;
  --ink-800: #0a2028;
  --ink-750: #0c2731;
  --ink-700: #10303a;

  /* Accenter */
  --teal-700: #2b6270;
  --teal-600: #377a87;
  --teal-400: #509fa3;
  --mint-300: #8dc8c7;
  --mint-200: #a9dedd;
  --mint-100: #d3efee;

  /* Signalfärger, hämtade ur kursens modeller */
  --coral:  #e2687a;   /* det dominerande systemet i Two Loop */
  --rose:   #e39aab;   /* MTO-cirklarna */
  --amber:  #e8b96b;   /* varningar */

  /* Text */
  --text:   #e8f2f3;
  --muted:  #94aeb3;
  --faint:  #6b878d;

  /* Glas. Ytorna byggs av ljus, inte av ramar. */
  --glass:        rgba(255, 255, 255, 0.035);
  --glass-strong: rgba(255, 255, 255, 0.065);
  --glass-sunk:   rgba(0, 0, 0, 0.22);
  --hairline:     rgba(255, 255, 255, 0.09);
  --hairline-soft:rgba(255, 255, 255, 0.055);
  --sheen:        inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow:       0 24px 60px -24px rgba(0, 0, 0, 0.6);
  --shadow-lift:  0 32px 80px -28px rgba(0, 0, 0, 0.7);
  --glow-mint:    0 0 0 1px rgba(141, 200, 199, 0.22),
                  0 18px 50px -22px rgba(141, 200, 199, 0.45);

  /* Form */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Rytm */
  --gap-xs: 0.5rem;
  --gap-sm: 0.875rem;
  --gap:    1.5rem;
  --gap-lg: 2.5rem;
  --gap-xl: 4.5rem;
  --gap-2xl: 7rem;

  /* Typografi */
  --font-display: "Code Pro", "Lato", system-ui, sans-serif;
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-hero: clamp(2.75rem, 7.5vw, 6rem);
  --fs-h1:   clamp(2rem, 4.6vw, 3.5rem);
  --fs-h2:   clamp(1.5rem, 2.8vw, 2.25rem);
  --fs-h3:   clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.75rem;

  /* 74ch ger ungefär 103 tecken per rad — över det klassiska riktvärdet
     45–75, men styckena här är korta och radavståndet luftigt. Den
     avgörande spaken är inte fler tecken utan större text: se --fs-prose. */
  --measure: 74ch;
  /* Löptext i innehållsytor växer 17px → 19px mellan 1000px och 1600px
     fönster. Samma antal tecken per rad, fysiskt bredare block, och
     lättare att läsa på en stor skärm. */
  --fs-prose: clamp(1.0625rem, 0.854rem + 0.333vw, 1.1875rem);
  /* Växer jämnt från 1200 till 1320 mellan ungefär 1430px och 1570px fönster.
     Tidigare hoppade den i ett steg vid 1600px, vilket var precis den
     tröskel som fick hero-rubriken att byta radbrytning. */
  --page: clamp(1200px, 84vw, 1320px);
  --page-wide: clamp(1200px, 92vw, 1440px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}