/* Designtokens — Gåvoklick demo.
   Varm, trovärdig, "lagom"-svensk ton. Ljust tema, systemtypsnitt, inga externa beroenden. */

:root {
  /* Färg — primär "gott/natur" grön */
  --gr-50:  #eef7f2;
  --gr-100: #d6ecdf;
  --gr-200: #aedcc1;
  --gr-300: #7cc39e;
  --gr-400: #4ba67c;
  --gr-500: #2f8862;   /* primär */
  --gr-600: #256e4f;
  --gr-700: #1e5741;
  --gr-800: #184433;

  /* Accent — varm "kick"-energi (kampanj, knappglöd) */
  --amber-400: #f6b64b;
  --amber-500: #ef9d1f;
  --coral-500: #f0663f;

  /* Neutraler — varma gråa */
  --ink-900: #1a1d1b;
  --ink-700: #3c423e;
  --ink-500: #646b66;
  --ink-400: #8a918c;
  --line:    #e4e8e5;
  --paper:   #ffffff;
  --bg:      #f6f8f6;
  --bg-warm: #faf7f1;

  /* Rundningar */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Skuggor */
  --sh-1: 0 1px 2px rgba(20,40,30,.06), 0 1px 3px rgba(20,40,30,.05);
  --sh-2: 0 4px 14px rgba(20,50,35,.09);
  --sh-3: 0 14px 40px rgba(20,50,35,.16);

  /* Rymd */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Typografi */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 1140px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .4em; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--gr-600); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }

/* Demo-band överst på varje sida */
.demobar {
  background: repeating-linear-gradient(-45deg, #2a2f2c, #2a2f2c 12px, #232826 12px, #232826 24px);
  color: #fff; font-size: .82rem; letter-spacing: .02em;
  text-align: center; padding: 7px 12px;
}
.demobar b { color: var(--amber-400); }

/* Knappar */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; cursor: pointer; border: 0;
  padding: 13px 22px; border-radius: var(--r-pill);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gr-500); color: #fff; box-shadow: var(--sh-2); }
.btn-primary:hover { background: var(--gr-600); box-shadow: var(--sh-3); }
.btn-ghost { background: transparent; color: var(--gr-700); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--gr-300); background: var(--gr-50); }
.btn-lg { padding: 16px 28px; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* Chips / badges */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 650; background: var(--gr-50); color: var(--gr-700);
}
.badge-campaign {
  background: linear-gradient(100deg, var(--amber-500), var(--coral-500));
  color: #fff; font-weight: 700;
}

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}

.muted { color: var(--ink-500); }
.tiny { font-size: .8rem; }
.center { text-align: center; }