/*
 * njordcraft-tokens.css — Design-tokens for njordcraft
 * Palette, typografi, spacing, radius, skygger (design-direction §1).
 * E1.2 (SCRUM-115): komplet implementering.
 *
 * WCAG AA-noter:
 *  - Hvid tekst på --color-primary (#1F3A4D): ~9.1:1 — bestået.
 *  - --color-primary tekst på --color-bg-page: ~10.2:1 — bestået.
 *  - Hvid tekst på --color-accent-dark (#A8832E): ~4.7:1 — bestået (CTA-knapper).
 *  - Brug ALDRIG --color-accent (#C9A24B) som baggrund med hvid tekst (ratio ~3.1:1).
 */

:root {
  /* ------------------------------------------------------------------ */
  /* §1.1 Farvepalette                                                   */
  /* ------------------------------------------------------------------ */

  /* Primær — dyb navy/petroleumsblå */
  --color-primary:        #1F3A4D;
  --color-primary-light:  #2A4F68;   /* hover-variant */
  --color-primary-dark:   #162C3A;   /* active-variant */

  /* Accent — varm guld/sennep */
  --color-accent:         #C9A24B;
  --color-accent-light:   #D4B46A;   /* hover */
  --color-accent-dark:    #A8832E;   /* active / CTA-baggrund (WCAG AA sikker) */

  /* Baggrunde */
  --color-bg-page:        #F7F4EF;   /* cremehvid — sidebagggrund */
  --color-bg-card:        #FFFFFF;   /* rene hvide kort */
  --color-bg-section:     #F0EDE7;   /* svagt varmere sektion-baggrund */

  /* Neutrale / jord */
  --color-sand:           #E8E0D4;   /* dividers, borders */
  --color-stone:          #8A7F74;   /* sekundær tekst, labels */
  --color-text:           #2A2420;   /* primær brødtekst */
  --color-text-muted:     #6B6159;   /* undertekst, metadata */

  /* Semantiske */
  --color-success:        #3A6B47;
  --color-success-bg:     #EAF2EC;
  --color-error:          #8B2E2E;
  --color-error-bg:       #F9EAEA;
  --color-warning:        #7A5A1E;
  --color-warning-bg:     #FDF3DC;

  /* Header-bar */
  --color-header-bg:      var(--color-primary);
  --color-header-text:    #FFFFFF;
  --color-header-link:    rgba(255, 255, 255, 0.85);
  --color-header-link-hover: #FFFFFF;

  /* ------------------------------------------------------------------ */
  /* §1.2 Typografi                                                      */
  /* ------------------------------------------------------------------ */

  --font-heading: 'Raleway', 'Trebuchet MS', 'Gill Sans', sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Typeskala */
  --text-hero:     clamp(2.25rem, 5vw, 3.5rem);   /* h1 hero */
  --text-h1:       clamp(1.75rem, 3.5vw, 2.5rem);
  --text-h2:       clamp(1.375rem, 2.5vw, 1.875rem);
  --text-h3:       1.25rem;
  --text-body:     1rem;             /* 16px */
  --text-body-sm:  0.9375rem;       /* 15px */
  --text-label:    0.8125rem;       /* 13px — nav-links, kategori */
  --text-caption:  0.75rem;         /* 12px — metadata, pris-note */

  /* Aliasser (bevaret for bagudkompatibilitet med E1.1-kode) */
  --text-sm:  var(--text-body-sm);
  --text-xs:  var(--text-caption);

  /* Vægte */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Letter-spacing og transform til nav/kategori-labels */
  --nav-letter-spacing:   0.08em;
  --label-letter-spacing: 0.12em;
  --label-transform:      uppercase;

  /* ------------------------------------------------------------------ */
  /* §1.3 Spacing-skala                                                  */
  /* ------------------------------------------------------------------ */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.5rem;    /* 24px */
  --space-6:   2rem;      /* 32px */
  --space-8:   3rem;      /* 48px */
  --space-10:  4rem;      /* 64px */
  --space-12:  5rem;      /* 80px */
  --space-16:  8rem;      /* 128px */

  /* Sektion-padding */
  --section-padding-y: var(--space-10);
  --section-padding-x: var(--space-5);

  /* ------------------------------------------------------------------ */
  /* §1.4 Border-radius og skygger                                       */
  /* ------------------------------------------------------------------ */

  --radius-sm:   0.375rem;  /*  6px — form-felter, badges */
  --radius-md:   0.75rem;   /* 12px — knapper, kategori-kort */
  --radius-lg:   1.25rem;   /* 20px — produkt-kort, store flader */
  --radius-full: 9999px;    /* pill — tags, chips */

  /* Skygger — bløde og varme (navy undertone, ikke kold sort) */
  --shadow-card:       0 2px 12px rgba(31, 58, 77, 0.08);
  --shadow-card-hover: 0 6px 24px rgba(31, 58, 77, 0.14);
  --shadow-btn:        0 2px 6px rgba(31, 58, 77, 0.18);
  --shadow-header:     0 2px 8px rgba(31, 58, 77, 0.15);

  /* Aliasser (bevaret for bagudkompatibilitet med E1.1-kode) */
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-card-hover);
  --shadow-lg: 0 8px 24px rgba(31, 58, 77, 0.16);

  /* ------------------------------------------------------------------ */
  /* Transitions                                                         */
  /* ------------------------------------------------------------------ */

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
}

/* ------------------------------------------------------------------ */
/* Global basis                                                        */
/* ------------------------------------------------------------------ */

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-page);
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

/* Link-nulstilling — farver sættes per-komponent */
a {
  color: inherit;
}