/*
 * ┌──────────────────────────────────────────────────────────────┐
 * │   ÅKES SKOR — DESIGN TOKENS                                  │
 * │                                                              │
 * │   Allt som styr utseendet på sidan finns här.                │
 * │   Ändra ett värde → slår igenom på hela sidan.               │
 * │   Ingenting hårdkodat i HTML.                                │
 * └──────────────────────────────────────────────────────────────┘
 */


/* ════════════════════════════════════════════
   RESET
   ════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html    { scroll-behavior: smooth; }
img     { display: block; max-width: 100%; }
a       { color: inherit; text-decoration: none; }
address { font-style: normal; }


/* ════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════

   Färger lagras som "R G B"-kanaler utan parentes.
   Det möjliggör Tailwind-klasser med opacity, t.ex:
     bg-primary/80   →  rgba(22, 52, 38, 0.8)
     text-primary/50 →  rgba(22, 52, 38, 0.5)

   ════════════════════════════════════════════ */

:root {

  /* ── FÄRGER ─────────────────────────────── */

  /* Primär — skogsgrönt (varumärkets huvudfärg) */
  --primary-ch:           22  52  38;   /* #163426 */
  --primary-dark-ch:      45  75  59;   /* #2d4b3b  hover / djupare ton */
  --on-primary-ch:       255 255 255;   /* #ffffff  text på grön bakgr. */
  --on-primary-alt-ch:   153 186 166;   /* #99baa6  ljusgrön i gröna ktnrs */

  /* Sekundär — burgundy (accenter, kampanjer) */
  --secondary-ch:        164  57  70;   /* #a43946 */
  --on-secondary-ch:     255 255 255;   /* #ffffff */

  /* Accent — guld (1931-bricka, overlines) */
  --accent-ch:           203 167  47;   /* #cba72f */
  --on-accent-ch:         78  61   0;   /* #4e3d00  text på guld */

  /* Ytor — varm kräm-hierarki (aldrig ren vit) */
  --surface-ch:          252 249 244;   /* #fcf9f4  baslagret */
  --surface-low-ch:      246 243 238;   /* #f6f3ee  sektionsbakgrunder */
  --surface-mid-ch:      240 237 232;   /* #f0ede8  kort, containers */
  --surface-high-ch:     235 232 227;   /* #ebe8e3  bildcontainers */
  --surface-highest-ch:  229 226 221;   /* #e5e2dd  högst kontrast */

  /* Text */
  --on-surface-ch:        28  28  25;   /* #1c1c19  huvudtext (aldrig ren svart) */
  --on-surface-muted-ch:  66  72  68;   /* #424844  sekundär text */
  --outline-ch:          114 121 115;   /* #727973  bildtexter, etiketter */
  --outline-dim-ch:      194 200 194;   /* #c2c8c2  subtila avdelare */


  /* ── TYPOGRAFI ──────────────────────────── */

  --font-serif: 'Newsreader', Georgia, serif;          /* Rubriker — historiens röst   */
  --font-sans:  'Manrope',    system-ui, sans-serif;   /* Bröd & etiketter — modern    */


  /* ── SKUGGOR (ambient — aldrig hårda dropp-skuggor) ── */

  --shadow-badge: 0 8px 32px rgb(var(--accent-ch)  / 0.25);
  --shadow-card:  0 2px 24px rgb(var(--primary-ch) / 0.06);


  /* ── HERO-GRADIENT ──────────────────────── */

  --hero-gradient: linear-gradient(
    to bottom,
    rgb(var(--primary-ch) / 0.35),
    rgb(var(--primary-ch) / 0.85)
  );
}


/* ════════════════════════════════════════════
   BAS-ELEMENT
   ════════════════════════════════════════════ */

body {
  font-family: var(--font-sans);
  background-color: rgb(var(--surface-ch));
  color: rgb(var(--on-surface-ch));
  line-height: 1.6;
}

/* Alla rubriker använder seriftypsnittet automatiskt */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
}

/* Material Symbols fininställning */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}


/* ════════════════════════════════════════════
   HJÄLPKLASSER
   (Saker som inte kan uttryckas som Tailwind-klasser)
   ════════════════════════════════════════════ */

/* Heroens mörka gradient-overlay */
.hero-gradient {
  background: var(--hero-gradient);
}

/* Guld-skugga på 1931-brickan */
.shadow-badge {
  box-shadow: var(--shadow-badge);
}

/* Subtil avdelare ovan statistikraden */
.stat-divider {
  border-top: 1px solid rgb(var(--outline-dim-ch) / 0.4);
}