/* Skuggea: designvärden. Alla värden är tagna ur glasea.se (startsidans inline-stilar och <style>-block,
   hämtade 2026-10-27). Glasea har ingen färgaccent, bara nästan svart, kräm och varmgrått, så Skuggea har ingen
   egen accent heller. Glasea sätter allt i style-attribut utan variabelnamn; namnen här är svenska och
   Glaseas värde står i kommentaren (rgb-värdena i Glaseas markup omräknade till hex). */
@font-face {
  font-family: "Manrope";
  src: url("manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Ytor */
  --bg: #f7f5f1;          /* rgb(247,245,241): sidans botten och filosofin */
  --sand: #f3f1ec;        /* rgb(243,241,236): sortimentet, rutorna i Om, länkraden och sidfoten */
  --vit: #fff;            /* Om-sektionen, vita knappen */
  --kort: #eae7e7;        /* rgb(234,231,231): produktkortens yta (bakom fotot), grå knappen */
  --kort2: #e7e3db;       /* rgb(231,227,219): kortet Letar du efter något annat? */
  --hjalte: #111418;      /* rgb(17,20,24): hjältens yta (bakom fotot) */

  /* Text */
  --ink: #1d1d1b;         /* rgb(29,29,27): rubriker, svarta rutor, markering */
  --text2: #474747;       /* rgb(71,71,71): brödtext och länkraden */
  --text3: #57534e;       /* rgb(87,83,78): texten i Letar du efter något annat? */
  --dim: #747474;         /* rgb(116,116,116): små versaler, sidfotens länkar */
  --dim2: #9a9490;        /* rgb(154,148,144): sidfotens minsta rad */
  --linje: #e4e2e1;       /* rgb(228,226,225): linjen till vänster om filosofins stycken */
  --linje2: #cdc9c1;      /* rullningslistens tumme */

  /* Vitt på mörk yta (hjälten och måttrutan), Glaseas alfavärden */
  --vit-90: rgba(255, 255, 255, .9);
  --vit-80: rgba(255, 255, 255, .8);
  --vit-78: rgba(255, 255, 255, .78);
  --vit-75: rgba(255, 255, 255, .75);
  --vit-70: rgba(255, 255, 255, .7);
  --vit-65: rgba(255, 255, 255, .65);
  --vit-55: rgba(255, 255, 255, .55);
  --vit-50: rgba(255, 255, 255, .5);
  --vit-45: rgba(255, 255, 255, .45);
  --vit-35: rgba(255, 255, 255, .35);
  --vit-25: rgba(255, 255, 255, .25);
  --vit-20: rgba(255, 255, 255, .2);
  --vit-12: rgba(255, 255, 255, .12);

  /* Typografi: Manrope (Glasea hämtar den från Google, här ligger den i assets/) */
  --font: "Manrope", "Segoe UI", sans-serif;
  --logga: 1.625rem;      /* 800, spärrad .14em, versaler */
  --logga-ls: .14em;
  --h1: clamp(2.75rem, 4.5vw, 3.75rem);   /* 600, radavstånd 1.08, -.02em */
  --h2-sektion: clamp(32px, 4vw, 48px);   /* SORTIMENTET: 800, -.02em */
  --h2-filosofi: clamp(2rem, 3.5vw, 3rem);    /* 800, versaler, 1.1 */
  --h2-matt: clamp(1.75rem, 3.4vw, 2.75rem);  /* 800, versaler, 1.12 */
  --h2-om: clamp(1.8rem, 3vw, 2.5rem);        /* 800, gemener, 1.15 */
  --h3-kort: 36px;        /* produktkort: 800, versaler, 1.08 */
  --ingress: 1.0625rem;   /* 17px, radavstånd 1.65 */
  --bryd: 1rem;           /* filosofins stycken, 1.7 */
  --liten: .875rem;       /* knappar och meny, 14px */
  --etikett: 11px;        /* små versaler: 600–700, .1–.14em */

  /* Mått */
  --max: 1344px;
  --sidmarg: 48px;        /* 20px på mobil */
  --sektion: 128px;       /* sortimentet och Om */
  --sektion-stor: 192px;  /* filosofin */
  --galler-gap: 4px;      /* mellan produktkorten */
  --kort-hog: 600px;      /* första raden kort */
  --kort-lag: 500px;      /* andra och tredje raden */
  --nav-hojd: 76px;
  --topprad-hojd: 30px;
  --hjalte-hojd: 88vh;    /* minst 760px, högst 960px */
  --radie-pill: 999px;    /* bara knappen i måttrutan är rundad; allt annat har raka hörn */
}