/* ===== Tema: Lussekatter =====
   Julebutikken. Stil: premium og julete – skapt med farge og god luft,
   ikke ornamenter.
     - Bakgrunn: dyp grangrønn (mørkt = eksklusivt)
     - Aksent:   gull/messing (gull = safran)
     - Knapper:  dempet bærrød (den lille julefargen)
     - Tekst:    varm krem

   Denne filen fyller bare inn CSS-variablene med Lussekatter sine verdier.
   All struktur (plassering, størrelser) ligger i style-felles.css. */

:root {
  --bg: #14261c;            /* dyp grangrønn – mørk og rolig */
  --surface: #1d3327;       /* litt lysere grønn til kort og felt */
  --text: #f3e7d0;          /* varm krem til tekst */
  --muted: #c3b89e;         /* dempet, varm tone til mindre viktig tekst */
  --accent: #c9a24a;        /* gull – aksenten (lenker, pris, kurv-tall) */
  --accent-text: #14261c;   /* mørk grønn tekst oppå gullet, for kontrast */
  --border: #2f4a3a;        /* varme, mørke grønne streker */

  /* Elegant og julete: karakterfull serif til overskrifter,
     rolig serif til brødtekst. Lastes fra Google Fonts i HTML-filen,
     med vanlig serif som reserve hvis de ikke laster. */
  --font-body: "EB Garamond", Georgia, serif;
  --font-display: "Fraunces", Georgia, serif;

  --radius: 4px;            /* strammere hjørner – mer klassisk */
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ===== Den lille julefargen =====
   En egen variabel for den dempede bærrøde. Den brukes BARE på knapper
   (og er reservert til eventuelle "ny"-merker senere). Ikke bruk den
   ellers – da mister den effekten som et lite, bevisst fargeinnslag. */
:root {
  --berry: #a23e42;         /* dempet bærrød */
}

/* Knappene får bærrød bakgrunn med krem tekst.
   I felles-CSS bruker knappene aksentfargen (gull); her overstyrer vi
   dem så hovedhandlingene (Legg i kurv / Gå til betaling) blir bærrøde.
   Tekstfargen settes til krem for god kontrast mot den røde. */
.button,
.add-button {
  background-color: var(--berry);
  color: var(--text);
}

/* En varm gloning bak heroen gir lun, eksklusiv stemning.
   "radial-gradient" lager en mild gull-lyskrets som toner ut. */
.hero {
  background: radial-gradient(
    circle at 50% 30%,
    rgba(201, 162, 74, 0.16),
    transparent 60%
  );
}

/* Litt ekstra eleganse på de store overskriftene. */
.hero h1,
.section-title {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Tynn gulllinje under toppmenyen i stedet for grå. */
.site-header {
  border-bottom-color: var(--accent);
}

/* Selve oppskrift-layouten (skalering, ingredienser, steg) ligger nå i
   style-felles.css, delt av alle oppskriftssider. Her i temaet trengs ingen
   egne oppskrift-regler – variablene øverst gir lussekatt-fargene. */