/* ============================================================
   DESIGN TOKENS — Frejas Halsdukar
   ============================================================ */

:root {

  /* ── FÄRGER: Bakgrunder ─────────────────────────────── */
  --color-bg-primary:      #F7F4EE;
  --color-bg-sand:         #E8DFD1;
  --color-bg-forest:       #44584A;
  --color-bg-dark:         #2F3B33;
  --color-bg-white:        #FDFBF8;

  /* ── FÄRGER: Text ───────────────────────────────────── */
  --color-text-primary:    #2F312E;
  --color-text-secondary:  #5C605A;
  --color-text-muted:      #8A8E87;
  --color-text-light:      #F8F6F2;
  --color-text-placeholder:#A8ACA5;

  /* ── FÄRGER: Varumärke ──────────────────────────────── */
  --color-forest:          #44584A;
  --color-forest-dark:     #364840;
  --color-granite:         #5F635D;
  --color-mist:            #7A8A8E;
  --color-rust:            #A36A4F;
  --color-pine:            #2F3B33;

  /* ── FÄRGER: Gränser ────────────────────────────────── */
  --color-border:          #D8D2C8;
  --color-border-light:    #EDE8E0;

  /* ── FÄRGER: Status / badges ────────────────────────── */
  --color-badge-new:       #44584A;
  --color-badge-low:       #A36A4F;
  --color-badge-sold-bg:   #D0CDC7;
  --color-badge-sold-text: #5C605A;

  /* ── TYPOGRAFI: Fonter ──────────────────────────────── */
  --font-serif: 'Cormorant Garamond', 'Lora', Georgia, serif;
  --font-sans:  'Inter', 'Manrope', system-ui, -apple-system, sans-serif;

  /* ── TYPOGRAFI: Storlekar ───────────────────────────── */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   1.875rem;
  --text-3xl:   2.25rem;
  --text-4xl:   3rem;
  --text-5xl:   3.75rem;

  /* ── TYPOGRAFI: Vikter ──────────────────────────────── */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ── TYPOGRAFI: Radavstånd ──────────────────────────── */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* ── TYPOGRAFI: Bokstavsavstånd ─────────────────────── */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;

  /* ── SPACING ────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── SEKTIONSPADDING ────────────────────────────────── */
  --section-sm:  var(--space-12);
  --section-md:  var(--space-16);
  --section-lg:  var(--space-24);

  /* ── BORDER RADIUS ──────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── SKUGGOR ────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(47, 49, 46, 0.06);
  --shadow-sm: 0 2px 8px rgba(47, 49, 46, 0.08);
  --shadow-md: 0 4px 16px rgba(47, 49, 46, 0.10);
  --shadow-lg: 0 8px 32px rgba(47, 49, 46, 0.12);
  --shadow-product: 0 4px 24px rgba(47, 49, 46, 0.10);

  /* ── LAYOUT ─────────────────────────────────────────── */
  --container-max:  1200px;
  --container-md:   900px;
  --container-sm:   640px;
  --container-pad:  clamp(1rem, 5vw, 2.5rem);
  --grid-gap:       var(--space-6);

  /* ── TRANSITIONS ────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;

  /* ── HEADER ─────────────────────────────────────────── */
  --header-height: 72px;
}