/* =============================================================
   Anne Waagstein Advisory: Design tokens
   Material 3 token-navngivning (m3.material.io).
   Farvekilde: Poul Schmith (grafit #141414, mint #50D691, slate
   #859DA1) med varme fra Implement (off-white #F8F5E7, ler #9C6E44,
   blaagroen #667F7D). Brand-seed: dyb petrolgroen #1B4638.
   Typografi: Lora (display/headline) + Inter (title/body/label).
   ============================================================= */

/* ---------- Skrifter ---------- */
@font-face {
  font-family: 'Lora';
  src: url('../assets/fonts/Lora-Variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  /* Lora har mindre x-hoejde end Lora, 0,500 mod 0,540 em. Justeringen
     holder den optiske stoerrelse, saa graderne i arket ikke skal om. */
  size-adjust: 108%;
  ascent-override: 92%;
  descent-override: 24%;
}

/* Lora har et rigtigt kursivt skaeret. Det er hele grunden til skiftet:
   browseren skal ikke skraatstille den oprejste skrift. */
@font-face {
  font-family: 'Lora';
  src: url('../assets/fonts/Lora-Italic.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  size-adjust: 108%;
  ascent-override: 92%;
  descent-override: 24%;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* Metrik tilpasset fallback (system-sans) */
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
}

:root {
  /* ================= M3 · Color · Light scheme =================
     Palette efter Studio Genial (stephaniebarbon.com): dyb blomme som
     "sort", smoergul som signaturflade, koeligt lyst papir og blush som
     accent. Markant lettere end en sort/hvid-baseret palet. */
  --md-sys-color-primary:                 #491228;  /* dyb blomme        */
  --md-sys-color-on-primary:              #fffcfa;
  --md-sys-color-primary-container:       #f6dde5;
  --md-sys-color-on-primary-container:    #330c1c;
  --md-sys-color-primary-fixed-dim:       #e7bcca;

  --md-sys-color-secondary:               #6d4a57;
  --md-sys-color-on-secondary:            #fffcfa;
  --md-sys-color-secondary-container:     #efe3e7;
  --md-sys-color-on-secondary-container:  #2d1220;

  --md-sys-color-tertiary:                #4a47a8;  /* periwinkle, moerknet */
  --md-sys-color-on-tertiary:             #fffcfa;
  --md-sys-color-tertiary-container:      #e3e2fb;
  --md-sys-color-on-tertiary-container:   #1c1a52;

  --md-sys-color-error:                   #8a2020;
  --md-sys-color-on-error:                #fffcfa;
  --md-sys-color-error-container:         #f8dcd8;
  --md-sys-color-on-error-container:      #340c0a;

  --md-sys-color-surface:                 #ecebe8;  /* sidens papir      */
  --md-sys-color-on-surface:              #491228;  /* blomme, ikke sort */
  --md-sys-color-surface-dim:             #dedcd8;
  --md-sys-color-surface-bright:          #fffcfa;
  --md-sys-color-surface-container-lowest: #fffcfa;
  --md-sys-color-surface-container-low:   #f7f1bc;  /* smoergul          */
  --md-sys-color-surface-container:       #f4f2ee;
  --md-sys-color-surface-container-high:  #e6e4df;
  --md-sys-color-surface-container-highest:#dedbd5;
  --md-sys-color-on-surface-variant:      #6b4453;  /* dæmpet mauve      */
  --md-sys-color-outline:                 #8f7580;
  --md-sys-color-outline-variant:         #d5cfd0;

  --md-sys-color-inverse-surface:         #491228;
  --md-sys-color-inverse-on-surface:      #fdf6f8;
  --md-sys-color-inverse-primary:         #e7bcca;

  --md-sys-color-scrim:                   #2a0a17;
  --md-sys-color-shadow:                  #2a0a17;

  /* ---- Egne roller (uden for M3-saettet) ---- */
  --mw-ink:            #491228;  /* moerke baand: blomme, ikke sort     */
  --mw-ink-deep:       #330c1c;  /* dybeste baand                       */
  --mw-butter:         #f7f1bc;  /* signaturflade: hero og sidehoveder  */
  --mw-accent:         #f0cdd8;  /* blush: KUN paa moerke flader       */
  --mw-accent-strong:  #e7bcca;
  --mw-periwinkle:     #b0adf5;
  --mw-mauve:          #916f7a;
  --mw-band-cream:     #fffcfa;  /* lyst baand: egen token, saa dark mode
                                    ikke kollapser det sammen med blaekbaandet */

  /* ================= M3 · Typography ================= */
  --md-sys-typescale-brand-font: 'Lora', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --md-sys-typescale-plain-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --md-sys-typescale-display-large-size:    clamp(2.6rem, 1.4rem + 4.2vw, 4.4rem);
  --md-sys-typescale-display-medium-size:   clamp(2.1rem, 1.3rem + 3.0vw, 3.4rem);
  --md-sys-typescale-display-small-size:    clamp(1.8rem, 1.25rem + 2vw, 2.7rem);
  --md-sys-typescale-headline-large-size:   clamp(1.6rem, 1.25rem + 1.3vw, 2.2rem);
  --md-sys-typescale-headline-medium-size:  clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  --md-sys-typescale-headline-small-size:   1.25rem;
  --md-sys-typescale-title-large-size:      1.25rem;
  --md-sys-typescale-title-medium-size:     1rem;
  --md-sys-typescale-body-large-size:       1.125rem;
  --md-sys-typescale-body-medium-size:      1rem;
  --md-sys-typescale-body-small-size:       0.875rem;
  --md-sys-typescale-label-large-size:      0.8125rem;
  --md-sys-typescale-label-medium-size:     0.75rem;

  /* ================= M3 · Shape ================= */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small:       8px;
  --md-sys-shape-corner-medium:      12px;
  --md-sys-shape-corner-large:       16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full:        999px;

  /* ================= M3 · Elevation ================= */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px rgba(73,18,40,.12), 0 1px 3px 1px rgba(73,18,40,.07);
  --md-sys-elevation-level2: 0 1px 2px rgba(73,18,40,.12), 0 2px 6px 2px rgba(73,18,40,.08);
  --md-sys-elevation-level3: 0 4px 8px 3px rgba(73,18,40,.09), 0 1px 3px rgba(73,18,40,.13);

  /* ================= M3 · State layers ================= */
  --md-sys-state-hover-opacity:    0.08;
  --md-sys-state-focus-opacity:    0.10;
  --md-sys-state-pressed-opacity:  0.12;

  /* ================= M3 · Motion ================= */
  --md-sys-motion-easing-standard:    cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized:  cubic-bezier(0.2, 0, 0, 1);
  /* Udgangskurve. De to ovenfor bremser op: de flytter det meste med det
     samme og er rigtige til noget, der kommer frem. Til noget, der skal
     forsvinde, er de forkerte -- mobilmenuens udtoning var reelt ovre efter
     80 af sine 200 ms og lignede et klip. Denne tager fart undervejs. */
  --md-sys-motion-easing-accelerate:  cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-duration-short4:    200ms;
  --md-sys-motion-duration-medium2:   300ms;
  --md-sys-motion-duration-long2:     500ms;

  /* ================= Layout ================= */
  --mw-container:       1200px;
  --mw-container-text:  68ch;
  --mw-gutter:          clamp(1.25rem, 4vw, 3rem);
  --mw-section-y:       clamp(3.5rem, 7vw, 7rem);
  --mw-header-h:        84px;
}