/* Marikollen Deli — design tokens
   Hentet fra logoen (logo/marikollen_deli.svg) + kremgul bakgrunn #F6EEDE.
   Brukes av både admin (/admin) og den offentlige siden. */

/* De to skrifttype-FAMILIENE for HELE nettsiden — offentlig OG admin.
   Ingen andre skrifttyper skal lastes noe sted i prosjektet:
     Gaglio (kjøpt, YouWorkForThem) — fire vekter, all rett-opp tekst:
       Regular → brødtekst · Medium → kort-/paneltitler ·
       SemiBold → meny og seksjonstitler · Bold → hero-/mega-titler.
     Swarsh Daisy — alt kursivt/skriftpreget: sitater, signaturer,
       aksentord (.script). Regular + Italic.
   Importert ÉN gang her, sentralt — enhver side som laster tokens.css
   (det gjør alle) får automatisk hele settet. Vendor-CSS-ene urørt
   (lisensen krever at merknaden i filene forblir synlig). Importen er
   billig selv på sider som ikke bruker alle vektene: selve fontfila
   lastes først når noe på siden faktisk rendrer tegn i den familien —
   @font-face alene koster nesten ingenting. */
@import url("/font/gaglio/gaglio-regular/webfonts/gaglio-regular.css");
@import url("/font/gaglio/gaglio-medium/webfonts/gaglio-medium.css");
@import url("/font/gaglio/gaglio-semi-bold/webfonts/gaglio-semi-bold.css");
@import url("/font/gaglio/gaglio-bold/webfonts/gaglio-bold.css");
@import url("/font/swarsh/swarsh-daisy-regular/webfonts/swarsh-daisy-regular.css");
@import url("/font/swarsh/swarsh-daisy-italic/webfonts/swarsh-daisy-italic.css");

:root {
  /* ---------- Farger ---------- */
  --cream: #f6eede;          /* gulaktig bakgrunn */
  --cream-deep: #eee1ca;     /* kremgul ett hakk dypere — båndsoner */
  --paper: #fffef4;          /* panel / kort */
  --ink: #034433;            /* mørk grønn, primær tekst */
  --ink-deep: #012a20;       /* nesten svart grønn — dype seksjoner */
  --green: #076046;          /* grønn fra logoen */
  --green-bright: #5aa75d;   /* lys grønn fra logoen */
  --red: #cf2b31;            /* rød aksent fra logoen */
  --red-dark: #a81e24;
  --line: rgba(3, 68, 51, 0.16);
  --ink-soft: rgba(3, 68, 51, 0.62);

  /* På mørk grønn bunn */
  --on-dark: #f6eede;
  --on-dark-soft: rgba(246, 238, 222, 0.68);
  --line-dark: rgba(246, 238, 222, 0.18);

  /* ---------- Typografi ----------
     ÉN definert skala, fire Gaglio-vekter + Swarsh Daisy. Ingen fallback
     peker lenger på en nedlastet skrifttype (Fraunces/Oswald/Archivo/
     PT Serif er borte) — kun generiske OS-nøkkelord som absolutt siste
     utvei, og Gaglio er selvhostet (ingen tredjeparts-CDN å feile mot),
     så den utveien utløses i praksis aldri.

     Alle fire Gaglio-vekter er registrert som font-weight: normal i
     vendor-CSS-en — vekten ER fonten. Bruk DERFOR ALLTID
     font-weight: 400 sammen med enhver av tokenene under (h1, h2, h3,
     nav, ui), uansett hvor tung skriften ser ut. font-weight: 700 oppå
     en allerede fet fil ber nettleseren om SYNTETISK fet skrift oppå
     ekte fet skrift — utflytende og stiv, ikke skarpere. */
  --font-h1: "Gaglio-Bold", Georgia, serif; /* hero-titler: forsiden, om, mat, v2 */
  --font-h2: "Gaglio-SemiBold", Georgia, serif;   /* seksjonstitler; også h1/h2 på admin, kasse, konto, nyheter */
  --font-h3: "Gaglio-Medium", Georgia, serif;     /* kort- og paneltitler */
  --font-body: "Gaglio-Regular", Arial, sans-serif; /* løpende tekst, skjema, knapper */
  /* Kursivt/skriftpreget — sitater, signaturer, aksentord (.script).
     Kursiven er BAKT INN i fonten: sett font-style: normal sammen med
     --font-accent-italic, en style: italic oppå gir dobbel skråstilling. */
  --font-accent: "SwarshDaisy-Regular", Georgia, serif;
  --font-accent-italic: "SwarshDaisy-Italic", Georgia, serif;

  /* De gamle tokennavnene brukes fortsatt i det aller meste av CSS-en
     (mange filer) — peker nå videre til nivåene over i stedet for at
     hvert sted skal endres enkeltvis. Samme fire regler (400-vekt osv.)
     gjelder uansett hvilket navn man leser via. */
  --font-mega: var(--font-h1);     /* store titler — samme rolle som --font-h1 */
  --font-title: var(--font-h1);    /* hero-titler på de redaksjonelle sidene */
  --font-display: var(--font-h2);  /* h1/h2 på admin/kasse/konto/nyheter/handlekurv/hurtigvisning */
  --font-nav: "Gaglio-SemiBold", Arial, sans-serif; /* meny — egen rolle, SemiBold */
  --font-ui: var(--font-body);
  --font-quote: var(--font-accent);
  --font-quote-italic: var(--font-accent-italic);

  --type-nav: 0.78rem;
  --type-nav-track: 0.14em;

  /* Redaksjonell skala — clamp gjør at alt skalerer med viewport */
  --type-mega: clamp(3.2rem, 9vw, 8.4rem);   /* forside-hero */
  --type-h1: clamp(2.6rem, 6.4vw, 5.6rem);   /* sidetitler */
  --type-h2: clamp(1.9rem, 3.4vw, 3.1rem);   /* seksjonstitler */
  --type-h3: clamp(1.15rem, 1.6vw, 1.45rem);
  --type-lead: clamp(1.05rem, 1.5vw, 1.3rem);/* ingress */
  --type-body: 1rem;
  --type-small: 0.86rem;

  /* ---------- Form ---------- */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-arch: 999px 999px var(--radius) var(--radius);

  /* Varme skygger — nøytralt grått gjør kremgulen skitten */
  --shadow: 0 10px 30px rgba(3, 68, 51, 0.10);
  --shadow-lift: 0 22px 60px -18px rgba(3, 68, 51, 0.34);
  --shadow-deep: 0 40px 90px -30px rgba(1, 42, 32, 0.55);

  /* ---------- Rytme ---------- */
  --section-y: clamp(72px, 11vh, 150px);   /* vertikal luft mellom seksjoner */
  --gutter: clamp(20px, 4vw, 56px);

  /* ---------- Bevegelse ---------- */
  /* Én kurve for det meste: rask start, lang hale. Matcher GSAP power4.out. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 0.28s;
  --dur: 0.55s;
  --dur-slow: 0.9s;
}

/* ---------- Element-nivå basisstiler: h1–h6 og løpende tekst ----------
   DEFINERTE fontstiler for de rene semantiske elementene — ikke bare
   utility-klasser. Hver hånd-bygde side (.j-title, .vista h1, .dish-row
   h3, .konto-head h1, …) har egen klasse med høyere presisitet og
   overstyrer disse akkurat som før — ingenting av det eksisterende
   endrer utseende. Dette er GULVET: en bar <h2> uten egen klasse, et
   glemt <h3> i et fremtidig admin-panel, en <p> uten .j-text — alt
   arver riktig font og en fornuftig størrelse i stedet for nettleserens
   Times-serif og tilfeldige standardstørrelser.

   Vekt 400 overalt (se begrunnelsen i :root over — vekten er bakt inn
   i selve fontfila). Margin kun i bunnen, så elementer stables uten
   dobbel luft mot innhold satt av omkringliggende layout. */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-weight: 400;
  line-height: 1.08;
}
h1 { font-family: var(--font-h1); font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-family: var(--font-h2); font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-family: var(--font-h3); font-size: 1.35rem; line-height: 1.2; }
h4, h5, h6 { font-family: var(--font-h3); font-size: 1.1rem; line-height: 1.3; }

p { font-family: var(--font-body); margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }