/**
 * CCTRL CHILD THEME – CSS LAYER: CORE
 * Handle suggestion in WordPress: 'cctrl-core'
 *
 * PURPOSE
 * - Design tokens & theming (CSS custom properties)
 * - Base elements: html/body, typography, links, lists, code, etc.
 *
 * LAYERING (LOAD ORDER)
 * - Load BEFORE:
 *     cctrl-layout.css
 *     cctrl-components.css
 *     cctrl-patterns.css
 *     cctrl-interactions.css
 * - Plugin overrides (assets-plugins/*.css) should depend on the LAST global layer
 *   so they can safely override components when needed.
 *
 * RULES FOR FUTURE WORK (for humans + AI)
 * - Do NOT add component-specific classes here (.btn, .card, .alert, etc.).
 * - Keep this file limited to:
 *     * :root tokens
 *     * global element selectors (body, h1–h6, p, a, ul, ol, etc.)
 * - If you add a new token:
 *     * Name it consistently (kebab-case, grouped by area, e.g. --success-500).
 *     * Document it in the DESIGN TOKENS & THEMING section.
 *
 * DESIGN PHILOSOPHY & CORE VALUES
 * ===================================================================
 * Detta tema bygger på tre grundvärderingar som ALLTID ska följas:
 *
 * 1. MICROSOFT FLUENT DESIGN
 *    - Subtila skuggor och elevation för djup och hierarki
 *    - Smooth animations med cubic-bezier easing (0.4, 0, 0.2, 1)
 *    - Microinteractions som ger tydlig feedback
 *    - Layered design med tydlig visuell hierarki
 *    - Focus states med outline och box-shadow
 *
 * 2. SKANDINAVISK MINIMALISM
 *    - Ren design utan onödig dekor
 *    - Generös whitespace och luftig spacing
 *    - Tydlig typografi med bra läsbarhet
 *    - Balanserad färgpalett (Lavender & Terracotta)
 *    - Funktion före form, men med elegans
 *
 * 3. DIGITAL ELEGANS
 *    - Perfekt spacing och rytm (8px grid system)
 *    - Konsekvent komponentlogik
 *    - Tydlig visuell feedback på alla interaktioner
 *    - Smooth transitions (200-400ms)
 *    - Tydlig skala och proportioner
 *
 * IMPLEMENTATION RULES:
 * - Alla transitions ska använda cubic-bezier(0.4, 0, 0.2, 1)
 * - Spacing ska följa 8px grid (var(--space-1) till var(--space-8))
 * - Shadows ska vara subtila men tydliga (0 1px-4px rgba)
 * - Hover states ska ge tydlig feedback utan att vara påträngande
 * - Focus states måste alltid vara tydliga för tillgänglighet
 * - Animationer ska vara korta (150-400ms) och mjuka
 */
/* ===================================================================
   1. DESIGN TOKENS & THEMING
   ================================================================== */

/* 1.0 Font-face – Cooper Hewitt (headings) */
/* Font-face deklareras via PHP i functions.php för korrekt URL */

/* 1.1 Base tokens (light mode default) */
:root {
  /* Typography families */
  /* OBS: --font-heading används endast för H1. H2-H6 använder system fonts direkt. */
  --font-heading: "Cooper Hewitt Heavy", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Brand palettes – Lavender & Terracotta (3-step) */
  --lav-50: #f8f9ff;
  --lav-100: #f3f4fb;
  --lav-200: #e6e8f6;
  --lav-300: #cfd3ec;
  --lav-400: #aeb3da;
  --lav-500: #6264a7;
  --lav-600: #55578f; /* Mörkare variant för hover */
  --lav-700: #4a4c7a; /* Interpolerat 600→800 – används i banner-gradienter */
  --lav-800: #464770; /* Mellanliggande för dark hover */
  --lav-900: #3d3e66;

  /* Fluent UI BrandVariants – cctrl365 (10-160) */
  --cctrl365-10: #020204;
  --cctrl365-20: #16151E;
  --cctrl365-30: #232235;
  --cctrl365-40: #2D2D48;
  --cctrl365-50: #39395B;
  --cctrl365-60: #444570;
  --cctrl365-70: #505185;
  --cctrl365-80: #5B5D9B;
  --cctrl365-90: #696AAB;
  --cctrl365-100: #7979B4;
  --cctrl365-110: #8887BD;
  --cctrl365-120: #9796C5;
  --cctrl365-130: #A7A5CE;
  --cctrl365-140: #B6B4D7;
  --cctrl365-150: #C6C4DF;
  --cctrl365-160: #D5D4E8;

  --terracotta-100: #f7d8ce;
  --terracotta-400: #ea8f6e; /* Ljusare variant */
  --terracotta-500: #e57a55;
  --terracotta-600: #d66a45; /* Mörkare variant för hover */
  --terracotta-900: #a94c2d;

  /* --terra-* alias – används av news-feed.css banner-gradienter */
  --terra-100: var(--terracotta-100);
  --terra-400: var(--terracotta-400); /* Ljus gradient-stopp */
  --terra-500: var(--terracotta-500);
  --terra-600: var(--terracotta-600); /* Mörk gradient-stopp */
  --terra-900: var(--terracotta-900);

  /* Traffic & info colors (3-step scales) */
  --green-100: #e7f3ec;
  --green-500: #3fa370;
  --green-900: #1e6b47;

  --yellow-100: #fff7db;
  --yellow-500: #f2c94c;
  --yellow-900: #8a6b00;

  --red-100: #f8e8e8;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #d64545;
  --red-600: #dc2626;
  --red-900: #8f1f1f;

  --info-100: #e7f0fb;
  --info-500: #2b88d8;
  --info-900: #1f4f8f;
	
	  /* Recommended text colors per tone (global pairs)
     Dessa tokens används i hela systemet, inkl. alerts, chips, badges m.m. */

  /* Lavender */
  --lav-100-text: #3D3E66;  /* mörk lav/ink */
  --lav-500-text: #FFFFFF;
  --lav-900-text: #FFFFFF;

  /* Terracotta */
  --terracotta-100-text: #A94C2D;
  --terracotta-500-text: #FFFFFF;
  --terracotta-900-text: #FFFFFF;

  /* Success / green */
  --green-100-text: #1E6B47;
  --green-500-text: #111827; /* pitch-charcoal-500 */
  --green-900-text: #FFFFFF;

  /* Warning / yellow */
  --yellow-100-text: #8A6B00;
  --yellow-500-text: #111827;
  --yellow-900-text: #FFFFFF;

  /* Error / red */
  --red-100-text: #8F1F1F;
  --red-500-text: #FFFFFF;
  --red-900-text: #FFFFFF;

  /* Info / blue */
  --info-100-text: #1F4F8F;
  --info-500-text: #111827;
  --info-900-text: #FFFFFF;


  /* Poetiska/utility-färger – gradients, pod-icon m.m. */
  --angel-vault-100: #e9eaf6;
  --angel-vault-500: #a3a6e5;
  --angel-vault-900: #3d3e66;

  --mountain-air-500: #c5f0ff;
  --sea-breeze-500: #3fa3a8;
  --wave-song-500: #6b5ae4;

  --ocean-poetry-100: #e5f2ff;
  --ocean-poetry-500: #2b88d8;
  --ocean-poetry-900: #1f4f8f;

  --lagoon-coral-100: #ffe2d6;
  --lagoon-coral-500: #e25945;

  --golden-morning-500: #f2c94c;

  --timeless-lilac-100: #f3e9ff;
  --timeless-lilac-900: #5b3a8e;

  --pitch-charcoal-100: #cbd2e0;
  --pitch-charcoal-500: #111827;

  /* Neutrals */
  --lilac-100: #e9eaf6;
  --ink: #2a2f36;
  --muted: #667085;
  --outline: #d5d7e3;

  /* Semantic feedback aliases (så alerts + badges matchar) */
  --success-100: var(--green-100);
  --success-500: var(--green-500);
  --success-900: var(--green-900);

  --warning-100: var(--yellow-100);
  --warning-500: var(--yellow-500);
  --warning-900: var(--yellow-900);

  --error-100: var(--red-100);
  --error-500: var(--red-500);
  --error-900: var(--red-900);

  --info-bg-100: var(--info-100);
  --info-ink-900: var(--info-900);

  /* Semantic “UI” tokens */
  --bg: var(--lilac-100);
  --bg-elev: #ffffff;
  --text: var(--ink);
  --primary: var(--lav-500);
  --primary-ink: #ffffff;
  --secondary: var(--lav-900);
  --accent: var(--lav-500);
  --bg-card: #ffffff;

  /* Text-size aliases – news-feed.css och komponenter använder --text-sm/--text-xs */
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;

  /* 1.2 Shadows & radii */
  --shadow: 0 10px 30px rgba(13, 23, 38, 0.12);
  --shadow-soft: 0 6px 20px rgba(13, 23, 38, 0.08);
  --shadow-hover: 0 14px 40px rgba(13, 23, 38, 0.16);

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Fluent UI Border Radius */
  --fluent-radius-none: 0;
  --fluent-radius-small: 2px;
  --fluent-radius-medium: 4px;
  --fluent-radius-large: 6px;
  --fluent-radius-xlarge: 8px;
  --fluent-radius-circular: 10000px;

  /* Fluent UI Shadows */
  --fluent-shadow-2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
  --fluent-shadow-4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
  --fluent-shadow-8: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
  --fluent-shadow-16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);
  --fluent-shadow-28: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14);
  --fluent-shadow-64: 0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14);
  --fluent-shadow-2-brand: 0 0 2px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.25);
  --fluent-shadow-4-brand: 0 0 2px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.25);
  --fluent-shadow-8-brand: 0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25);
  --fluent-shadow-16-brand: 0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25);
  --fluent-shadow-28-brand: 0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25);
  --fluent-shadow-64-brand: 0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25);

  /* 1.3 Spacing – 8px scale */
  --space-0: 0px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;

  /* Fluent UI Spacing (Horizontal & Vertical) */
  --fluent-spacing-none: 0;
  --fluent-spacing-xxs: 2px;
  --fluent-spacing-xs: 4px;
  --fluent-spacing-s-nudge: 6px;
  --fluent-spacing-s: 8px;
  --fluent-spacing-m-nudge: 10px;
  --fluent-spacing-m: 12px;
  --fluent-spacing-l: 16px;
  --fluent-spacing-xl: 20px;
  --fluent-spacing-xxl: 24px;
  --fluent-spacing-xxxl: 32px;

  /* 1.4 Layout */
  --content-max: 1024px; /* Standard max-width för .cctrl-container */
  --content-max-public: 1200px; /* Max-width för public-sidor (marketing, landing pages) – backup 25-nov */
  --content-max-tight: 800px; /* Tight content width för innehåll under hero */
  --content-max-blog: 700px; /* Blog: tightare för läsbarhet (TARGET_ARCHITECTURE) */
  --nav-max-width: 1200px;
  --section-pad-y: clamp(48px, 6vw, 96px);
  --section-pad-x: clamp(16px, 4vw, 40px);

  /* 1.5 Transitions */
  --transition-fast: 160ms ease;
  --transition-med: 260ms ease;
  --transition-slow: 420ms ease;

  /* Fluent UI Durations */
  --fluent-duration-ultra-fast: 50ms;
  --fluent-duration-faster: 100ms;
  --fluent-duration-fast: 150ms;
  --fluent-duration-normal: 200ms;
  --fluent-duration-gentle: 250ms;
  --fluent-duration-slow: 300ms;
  --fluent-duration-slower: 400ms;
  --fluent-duration-ultra-slow: 500ms;

  /* Fluent UI Curves */
  --fluent-curve-accelerate-max: cubic-bezier(0.9,0.1,1,0.2);
  --fluent-curve-accelerate-mid: cubic-bezier(1,0,1,1);
  --fluent-curve-accelerate-min: cubic-bezier(0.8,0,0.78,1);
  --fluent-curve-decelerate-max: cubic-bezier(0.1,0.9,0.2,1);
  --fluent-curve-decelerate-mid: cubic-bezier(0,0,0,1);
  --fluent-curve-decelerate-min: cubic-bezier(0.33,0,0.1,1);
  --fluent-curve-easy-ease-max: cubic-bezier(0.8,0,0.2,1);
  --fluent-curve-easy-ease: cubic-bezier(0.33,0,0.67,1);
  --fluent-curve-linear: cubic-bezier(0,0,1,1);

  /* Fluent UI Typography */
  --fluent-font-size-100: 10px;
  --fluent-font-size-200: 12px;
  --fluent-font-size-300: 14px;
  --fluent-font-size-400: 16px;
  --fluent-font-size-500: 20px;
  --fluent-font-size-600: 24px;
  --fluent-font-size-700: 28px;
  --fluent-font-size-800: 32px;
  --fluent-font-size-900: 40px;
  --fluent-font-size-1000: 68px;

  --fluent-line-height-100: 14px;
  --fluent-line-height-200: 16px;
  --fluent-line-height-300: 20px;
  --fluent-line-height-400: 22px;
  --fluent-line-height-500: 28px;
  --fluent-line-height-600: 32px;
  --fluent-line-height-700: 36px;
  --fluent-line-height-800: 40px;
  --fluent-line-height-900: 52px;
  --fluent-line-height-1000: 92px;

  --fluent-font-weight-regular: 400;
  --fluent-font-weight-medium: 500;
  --fluent-font-weight-semibold: 600;
  --fluent-font-weight-bold: 700;

  --fluent-font-family-base: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --fluent-font-family-monospace: Consolas, 'Courier New', Courier, monospace;
  --fluent-font-family-numeric: Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;

  /* Fluent UI Stroke Width */
  --fluent-stroke-thin: 1px;
  --fluent-stroke-thick: 2px;
  --fluent-stroke-thicker: 3px;
  --fluent-stroke-thickest: 4px;
}

/* 1.6 Fluent UI Light Theme Color Tokens */
:root {
  /* Brand Colors (mapped to cctrl365) */
  --fluent-color-brand-background: var(--cctrl365-80);
  --fluent-color-brand-background-hover: var(--cctrl365-70);
  --fluent-color-brand-background-pressed: var(--cctrl365-40);
  --fluent-color-brand-background-selected: var(--cctrl365-60);
  --fluent-color-brand-foreground-1: var(--cctrl365-80);
  --fluent-color-brand-foreground-2: var(--cctrl365-70);
  --fluent-color-brand-foreground-2-hover: var(--cctrl365-60);
  --fluent-color-brand-foreground-2-pressed: var(--cctrl365-30);
  --fluent-color-brand-foreground-link: var(--cctrl365-70);
  --fluent-color-brand-foreground-link-hover: var(--cctrl365-60);
  --fluent-color-brand-foreground-link-pressed: var(--cctrl365-40);
  --fluent-color-brand-foreground-link-selected: var(--cctrl365-70);
  --fluent-color-brand-stroke-1: var(--cctrl365-80);
  --fluent-color-brand-stroke-2: var(--cctrl365-140);
  --fluent-color-brand-stroke-2-hover: var(--cctrl365-120);
  --fluent-color-brand-stroke-2-pressed: var(--cctrl365-80);

  /* Neutral Colors (Light Theme) */
  --fluent-color-neutral-foreground-1: #242424;
  --fluent-color-neutral-foreground-2: #424242;
  --fluent-color-neutral-foreground-3: #616161;
  --fluent-color-neutral-foreground-4: #707070;
  --fluent-color-neutral-foreground-disabled: #bdbdbd;
  --fluent-color-neutral-background-1: #ffffff;
  --fluent-color-neutral-background-1-hover: #f5f5f5;
  --fluent-color-neutral-background-1-pressed: #e0e0e0;
  --fluent-color-neutral-background-1-selected: #ebebeb;
  --fluent-color-neutral-background-2: #fafafa;
  --fluent-color-neutral-background-3: #f5f5f5;
  --fluent-color-neutral-stroke-1: #d1d1d1;
  --fluent-color-neutral-stroke-2: #e0e0e0;
  --fluent-color-neutral-stroke-3: #f0f0f0;
  --fluent-color-neutral-stroke-accessible: #616161;
}

/* 1.7 Dark mode – enbart semantiska overrides. Lavendel 500/400 oförändrade (style guide) */
html[data-theme="dark"] {
  --bg: #151726;
  --bg-elev: #1e2132;
  --bg-card: #252840;
  --ink: #f7f7ff;
  --text: #f7f7ff;
  --muted: #a3a8c2;
  --outline: #333854;
  --lav-500: #6264A7;
  --lav-400: #aeb3da;
  --lav-300: #cfd3ec;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  --shadow-soft: 0 8px 26px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.7);
}

/* Dark mode – ren gradient: svart → brandlila (lav) */
html[data-theme="dark"] body {
  background: linear-gradient(
    180deg,
    #050508 0%,
    #0c0c14 20%,
    color-mix(in srgb, #050508 40%, var(--lav-900) 60%) 50%,
    var(--lav-900) 85%,
    var(--lav-800) 100%
  );
  background-attachment: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  /* Fluent UI Dark Theme Color Tokens */
  --fluent-color-brand-background: var(--cctrl365-70);
  --fluent-color-brand-background-hover: var(--cctrl365-80);
  --fluent-color-brand-background-pressed: var(--cctrl365-40);
  --fluent-color-brand-background-selected: var(--cctrl365-60);
  --fluent-color-brand-foreground-1: var(--cctrl365-110);
  --fluent-color-brand-foreground-2: var(--cctrl365-120);
  --fluent-color-brand-foreground-2-hover: var(--cctrl365-130);
  --fluent-color-brand-foreground-2-pressed: var(--cctrl365-160);
  --fluent-color-brand-foreground-link: var(--cctrl365-100);
  --fluent-color-brand-foreground-link-hover: var(--cctrl365-110);
  --fluent-color-brand-foreground-link-pressed: var(--cctrl365-90);
  --fluent-color-brand-foreground-link-selected: var(--cctrl365-100);
  --fluent-color-brand-stroke-1: var(--cctrl365-100);
  --fluent-color-brand-stroke-2: var(--cctrl365-50);
  --fluent-color-brand-stroke-2-hover: var(--cctrl365-50);
  --fluent-color-brand-stroke-2-pressed: var(--cctrl365-30);

  /* Neutral Colors (Dark Theme) */
  --fluent-color-neutral-foreground-1: #ffffff;
  --fluent-color-neutral-foreground-2: #d6d6d6;
  --fluent-color-neutral-foreground-3: #adadad;
  --fluent-color-neutral-foreground-4: #999999;
  --fluent-color-neutral-foreground-disabled: #5c5c5c;
  --fluent-color-neutral-background-1: #292929;
  --fluent-color-neutral-background-1-hover: #3d3d3d;
  --fluent-color-neutral-background-1-pressed: #1f1f1f;
  --fluent-color-neutral-background-1-selected: #383838;
  --fluent-color-neutral-background-2: #1f1f1f;
  --fluent-color-neutral-background-3: #141414;
  --fluent-color-neutral-stroke-1: #666666;
  --fluent-color-neutral-stroke-2: #525252;
  --fluent-color-neutral-stroke-3: #3d3d3d;
  --fluent-color-neutral-stroke-accessible: #adadad;

  /* Fluent UI Dark Theme Shadows */
  --fluent-shadow-2: 0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28);
  --fluent-shadow-4: 0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28);
  --fluent-shadow-8: 0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28);
  --fluent-shadow-16: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28);
  --fluent-shadow-28: 0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28);
  --fluent-shadow-64: 0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28);
}


/* ===================================================================
   2. BASE ELEMENTS (BODY, TYPE, LINKS)
   ================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  /* Fluent gradient background med flera färger - ljus läge */
  background:
    radial-gradient(1400px 700px at 5% -5%, color-mix(in srgb, var(--lav-200) 40%, transparent 60%), transparent 70%),
    radial-gradient(1200px 600px at 95% 15%, color-mix(in srgb, var(--terracotta-100) 30%, transparent 70%), transparent 65%),
    radial-gradient(1000px 500px at 50% 80%, color-mix(in srgb, var(--wave-song-500) 20%, transparent 80%), transparent 60%),
    radial-gradient(800px 400px at 20% 50%, color-mix(in srgb, var(--ocean-poetry-100) 25%, transparent 75%), transparent 55%),
    var(--bg);
  background-attachment: fixed; /* Fixerad bakgrund som följer med vid scroll */
  background-size: 100% 100%; /* Täcker hela sidan */
  background-repeat: no-repeat;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Tillåt hero-sektioner att gå utanför main */
  position: relative;
  /* Säkerställ att body inte begränsar bredden */
  max-width: 100%;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  overflow-x: visible;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Dark mode - länkar ska vara ljusare för bättre synlighet */
html[data-theme="dark"] a {
  color: var(--fluent-color-brand-foreground-link); /* Ljusare länk i dark mode */
}

html[data-theme="dark"] a:hover {
  color: var(--fluent-color-brand-foreground-link-hover); /* Ännu ljusare vid hover */
  text-decoration: underline;
}

/* Dark mode - länkar i sektioner med mörk bakgrund ska vara vita */
html[data-theme="dark"] .cctrl-section[style*="background: var(--lav-500)"] a,
html[data-theme="dark"] .cctrl-section[style*="background: var(--lav-900)"] a,
html[data-theme="dark"] .cctrl-section[style*="background-color: var(--lav-500)"] a,
html[data-theme="dark"] .cctrl-section[style*="background-color: var(--lav-900)"] a {
  color: #ffffff !important; /* Vit länk på mörk bakgrund */
}

html[data-theme="dark"] .cctrl-section[style*="background: var(--lav-500)"] a:hover,
html[data-theme="dark"] .cctrl-section[style*="background: var(--lav-900)"] a:hover,
html[data-theme="dark"] .cctrl-section[style*="background-color: var(--lav-500)"] a:hover,
html[data-theme="dark"] .cctrl-section[style*="background-color: var(--lav-900)"] a:hover {
  color: color-mix(in srgb, #ffffff, transparent 10%) !important; /* Lätt genomskinlig vid hover */
}

/* 2.1 Headings & paragraphs – EN KÄLLA FÖR HELA SITEN (styleguide) */

/* Rubrikstorlekar som variabler – används överallt (hero, sektioner, blogg). Hero överstyr bara färg, inte storlek. */
:root {
  --h1-size: clamp(2.2rem, 2.2rem + 1vw, 3.5rem);
  --h2-size: clamp(1.8rem, 1.8rem + 0.8vw, 2.6rem);
  --h3-size: clamp(1.5rem, 1.5rem + 0.6vw, 2rem);
  --h4-size: clamp(1.25rem, 1.25rem + 0.4vw, 1.5rem);
  --h5-size: clamp(1.1rem, 1.1rem + 0.3vw, 1.25rem);
  --h6-size: clamp(1rem, 1rem + 0.2vw, 1.1rem);
}

/* H1–H2: Cooper Hewitt. H3–H6 + body: Source Sans Pro (--font-body). */
h1 {
  font-family: "Cooper Hewitt", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800; /* Heavy */
  font-size: var(--h1-size);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  line-height: 1.15;
  color: var(--lav-900);
}

h2 {
  font-family: "Cooper Hewitt", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700; /* Bold */
  font-size: var(--h2-size);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  line-height: 1.15;
  color: var(--lav-900);
}

h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--h3-size);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  line-height: 1.2;
  color: var(--lav-900);
}

h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--h4-size);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  line-height: 1.2;
  color: var(--lav-900);
}

h5,
h6 {
  font-size: var(--h5-size);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  line-height: 1.2;
  color: var(--lav-900);
}

h6 {
  font-size: var(--h6-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

p {
  margin: 0 0 var(--space-3);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
}

/* Ingress – större, läsbar färg (Source Sans Pro via body) */
.ingress {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink);
  max-width: 60ch;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

small {
  font-size: 0.9375rem;
  color: var(--muted);
}

code,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

pre {
  background: var(--bg-elev);
  border: 1px solid var(--outline);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  overflow: auto;
}

blockquote {
  position: relative;
  font-style: italic;
  font-size: 1.05rem;
  background: color-mix(in srgb, var(--angel-vault-100), #ffffff 40%);
  border-radius: var(--radius-lg);
  border-inline-start: 0;
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-soft);
  margin: var(--space-3) 0;
}

blockquote::before {
  content: "“";
  position: absolute;
  left: 16px;
  top: 2px;
  font-size: 2.6rem;
  color: var(--angel-vault-900);
  opacity: 0.25;
}

ul,
ol {
  padding-inline-start: calc(var(--space-3) + 14px);
  margin: 0 0 var(--space-3);
}

/* Dark mode - headings ska vara ljusa */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .wp-block-heading {
  color: var(--text); /* Ljus text i dark mode */
}

/* Dark mode - ingress ska också vara ljus */
html[data-theme="dark"] .ingress,
html[data-theme="dark"] .wp-block-paragraph.ingress {
  color: var(--muted); /* Ljus muted i dark mode */
}

/* Dark mode - paragraph ska vara ljus */
html[data-theme="dark"] p,
html[data-theme="dark"] .wp-block-paragraph {
  color: var(--text); /* Ljus text i dark mode */
}

/* Sektioner med mörk bakgrund ska INTE ändras av theme - behåller alltid ljus text */
.cctrl-section:has([style*="background: var(--lav-500)"]),
.cctrl-section:has([style*="background: var(--lav-900)"]),
.cctrl-section:has([style*="background-color: var(--lav-500)"]),
.cctrl-section:has([style*="background-color: var(--lav-900)"]),
.cctrl-section[style*="background: var(--lav-500)"],
.cctrl-section[style*="background: var(--lav-900)"],
.cctrl-section[style*="background-color: var(--lav-500)"],
.cctrl-section[style*="background-color: var(--lav-900)"] {
  /* Behåller sin styling oavsett theme */
}

.cctrl-section:has([style*="background: var(--lav-500)"]) h1,
.cctrl-section:has([style*="background: var(--lav-500)"]) h2,
.cctrl-section:has([style*="background: var(--lav-500)"]) h3,
.cctrl-section:has([style*="background: var(--lav-500)"]) h4,
.cctrl-section:has([style*="background: var(--lav-500)"]) h5,
.cctrl-section:has([style*="background: var(--lav-500)"]) h6,
.cctrl-section:has([style*="background: var(--lav-900)"]) h1,
.cctrl-section:has([style*="background: var(--lav-900)"]) h2,
.cctrl-section:has([style*="background: var(--lav-900)"]) h3,
.cctrl-section:has([style*="background: var(--lav-900)"]) h4,
.cctrl-section:has([style*="background: var(--lav-900)"]) h5,
.cctrl-section:has([style*="background: var(--lav-900)"]) h6,
.cctrl-section[style*="background: var(--lav-500)"] h1,
.cctrl-section[style*="background: var(--lav-500)"] h2,
.cctrl-section[style*="background: var(--lav-500)"] h3,
.cctrl-section[style*="background: var(--lav-500)"] h4,
.cctrl-section[style*="background: var(--lav-500)"] h5,
.cctrl-section[style*="background: var(--lav-500)"] h6,
.cctrl-section[style*="background: var(--lav-900)"] h1,
.cctrl-section[style*="background: var(--lav-900)"] h2,
.cctrl-section[style*="background: var(--lav-900)"] h3,
.cctrl-section[style*="background: var(--lav-900)"] h4,
.cctrl-section[style*="background: var(--lav-900)"] h5,
.cctrl-section[style*="background: var(--lav-900)"] h6 {
  color: #ffffff !important; /* Vit text på mörk bakgrund - alltid, oavsett theme */
}

.cctrl-section:has([style*="background: var(--lav-500)"]) p,
.cctrl-section:has([style*="background: var(--lav-900)"]) p,
.cctrl-section[style*="background: var(--lav-500)"] p,
.cctrl-section[style*="background: var(--lav-900)"] p {
  color: #ffffff !important; /* Vit text på mörk bakgrund - alltid, oavsett theme */
}