/* =========================================================
   🎨 RDCORE SKIN.CSS – DESIGN SYSTEM (GRUND)
   ---------------------------------------------------------
   Denna fil innehåller ENDAST variabler (design tokens).
   Inga selectors (.class) ska finnas här.

   All styling i övriga CSS-filer ska använda:
   var(--variabelnamn)

   Detta gör hela siten:
   ✔ Enhetlig
   ✔ Lätt att ändra globalt
   ✔ Skalbar
   ========================================================= */


/* =========================================================
   🎨 FÄRGER (CORE COLORS)
   ---------------------------------------------------------
   Används över hela siten:
   - Bakgrunder
   - Text
   - Borders
   - CTA
   ========================================================= */
:root {
  --color-primary: #1e3a5f;
  --color-secondary: #f5f7fa;
  --color-accent: #ff6b35;

  --color-text: #1a1a1a;
  --color-text-light: #666666;

  --color-bg: #ffffff;
  --color-bg-alt: #f9f9f9;

  --color-border: #e5e5e5;
}


/* =========================================================
   🔤 TYPOGRAFI
   ---------------------------------------------------------
   Fonts + storlekar + line-height
   Ska styra ALL text på sidan
   ========================================================= */
:root {
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Poppins', sans-serif;

  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-body: 16px;
  --font-size-small: 14px;

  --line-height: 1.6;
}


/* =========================================================
   📏 SPACING (AVSTÅND)
   ---------------------------------------------------------
   Använd istället för hårdkodade px-värden
   Ger konsekvent luft i hela designen
   ========================================================= */
:root {
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
}


/* =========================================================
   🔲 UI / DESIGN ELEMENT
   ---------------------------------------------------------
   Rundningar, skuggor, containers
   ========================================================= */
:root {

  /* =========================
     RADIUS SYSTEM
  ========================= */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-xxl: 28px;
  --radius-pill: 999px;

  /* =========================
     SHADOW SYSTEM
  ========================= */
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.05);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.12);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.16);

  /* =========================
     CONTAINERS
  ========================= */
  --container-width: 1200px;
  --container-narrow: 880px;
  --container-wide: 1320px;

}


/* =========================================================
   ⚡ Z-INDEX SYSTEM (OPTIONAL MEN BRA)
   ---------------------------------------------------------
   För overlays, modals, sticky CTA etc
   ========================================================= */
:root {
  --z-base: 1;
  --z-header: 10;
  --z-dropdown: 20;
  --z-overlay: 50;
  --z-modal: 100;
}