/* ==========================================================================
   VARUMÄRKET OSKARSHAMN 2025
   ==========================================================================

   Typsnitt och färger hämtade direkt ur Oskarshamns brandpad — inte gissade
   ur hemsidans CSS. Den här filen laddas både av attrappsajten (index.html)
   och av widgeten (widget.js), så att de garanterat ser likadana ut.

   Typsnittsfilerna ligger i varumarke/typsnitt/ och laddas härifrån. Inget
   hämtas från internet, så demot fungerar även utan uppkoppling.
   ====================================================================== */

/* ---------- Delight — rubriktypsnittet, samma som i logotypen ---------- */
@font-face {
  font-family: 'Delight';
  src: url('typsnitt/Delight-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Delight';
  src: url('typsnitt/Delight-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Delight';
  src: url('typsnitt/Delight-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Delight';
  src: url('typsnitt/Delight-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------- Sentient — den kursiva serifen, används sparsamt ---------- */
@font-face {
  font-family: 'Sentient';
  src: url('typsnitt/Sentient-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sentient';
  src: url('typsnitt/Sentient-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Sentient';
  src: url('typsnitt/Sentient-LightItalic.woff2') format('woff2');
  font-weight: 300; font-style: italic; font-display: swap;
}

/* ---------- Inter — brödtexten ---------- */
@font-face {
  font-family: 'Inter';
  src: url('typsnitt/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ==========================================================================
   FÄRGERNA — deras fem varumärkesfärger, med sina egna namn
   ====================================================================== */
:root {
  --midnatt:      #00263E;   /* huvudfärgen — text, mörka ytor, logotyp */
  --hav:          #004B98;   /* den klara blå — länkar, accenter */
  --himmel:       #B8D8EB;   /* ljusblå — luft mot mörk botten */
  --rosa-granit:  #EFB8A8;   /* varm rosa — kontrast och etiketter */
  --segel:        #F8F7F6;   /* brutet vitt — sidans botten */

  /* Kompletterande toner ur deras webbtema */
  --ljus:         #F0ECE9;   /* ljus sten — ovalda knappar */
  --ljussten:     #E5D9D0;
  --sten:         #C5B9AB;
  --skog:         #215A40;
  --mossa:        #A9C27F;
  --rosa-ljus:    #FFE7DE;

  --text:         #00263E;
  --svag:         #5D6B76;
  --kant:         #E5D9D0;

  --rubrikfont:  'Delight', 'Sentient', Georgia, serif;
  --brodfont:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif:       'Sentient', Georgia, serif;
}