/**
 * Design tokens – MAN Template
 * Override these with company values from Supabase (companies.color_primary, etc.)
 */

:root {
  /* ---- Colors (default theme; override per company from DB) ---- */
  --color-primary: #2c3e50;
  --color-primary-hover: #1a252f;
  --color-accent: #3498db;
  --color-accent-hover: #2980b9;
  --color-dark: #1a1a1a;
  --color-text: #333333;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-bg: #ffffff;
  --color-bg-alt: #f9fafb;
  /* Scrollbar colors (global defaults; can override per company) */
  --scrollbar-track: #e5e7eb;
  --scrollbar-thumb: #580678;
  --scrollbar-thumb-hover: #3d0554;
  --scrollbar-size: 9px;
  --scrollbar-radius: 999px;
  --scrollbar-border-width: 2px;
  /* Shape defaults. Real sites can override from theme_settings.styles. */
  --radius-image: 0.5rem;
  --radius-card: 0.75rem;
  --radius-control: 0.625rem;
  --radius-sm: var(--radius-control);
  /* Lila (t.ex. knappvariant) */
  --color-purple: #580678;
  --color-purple-hover: #3d0554;
  /* Sidhuvud: varumärkestext, slogan, meny (överstyrs per sajt från theme_settings.colors.header_text) */
  --color-header-text: var(--color-purple);

  /* ---- Typography (fluid with clamp) ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: ui-serif, Georgia, serif;

  /* ---- Typography scale (fluid clamp; mapped by role in Site settings) ---- */
  /* Body: XS–XL (~10–26px). Headings: HS–HM–HL (~32–54px). */
  --font-size-xs: clamp(0.625rem, 0.58rem + 0.18vw, 0.75rem);
  --font-size-s: clamp(0.75rem, 0.68rem + 0.22vw, 0.875rem);
  --font-size-m: clamp(0.875rem, 0.78rem + 0.4vw, 1.0625rem);
  --font-size-l: clamp(1.0625rem, 0.92rem + 0.55vw, 1.3125rem);
  --font-size-xl: clamp(1.3125rem, 1.05rem + 0.85vw, 1.625rem);
  --font-size-hs: clamp(2rem, 1.7rem + 1vw, 2.375rem);
  --font-size-hm: clamp(2.375rem, 2rem + 1.2vw, 2.875rem);
  --font-size-hl: clamp(2.875rem, 2.35rem + 1.75vw, 3.375rem);

  /* Role tokens (sections & base use these) */
  --text-sm: var(--font-size-s);
  --text-label: var(--text-sm);
  --text-base: var(--font-size-m);
  /* Knappar; överstyrs från Site settings theme_settings.typography.button */
  --text-button: var(--text-base);
  --text-lg: var(--font-size-l);
  /* Heading defaults — kan överstyras från Site settings theme_settings.typography.{h2,h3,h4}.
     Skala designad för tydlig hierarki under h1: h2 < h1, h3 < h2, h4 < h3.
     h4 (inre kort-/block-titlar) hålls medvetet liten. */
  --text-xl: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); /* h4 default: ~18–22px */
  --text-2xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); /* h3 default: ~22–28px */
  --text-3xl: clamp(1.75rem, 1.5rem + 0.85vw, 2.25rem); /* h2 default: ~28–36px */
  --text-4xl: var(--font-size-hl); /* h1 default: ~46–54px (oförändrad) */
  /* h5 / h6 in rich text (overridable from theme) */
  --text-h5: var(--font-size-m);
  --text-h6: var(--font-size-s);

  /* Font weights per roll — överstyrs av theme_settings.typography.weights */
  --font-weight-h1: 700;
  --font-weight-h2: 700;
  --font-weight-h3: 700;
  --font-weight-h4: 600;
  --font-weight-h5: 600;
  --font-weight-h6: 600;
  --font-weight-p: 400;
  --font-weight-span: 500;
  --font-weight-label: var(--font-weight-span);
  --font-weight-button: 500;

  /* Aktuell höjd på .site-header__inner — sätts dynamiskt av sections/header/header.js
     (ResizeObserver). Används av sektioner med data-overlap-header="true" för att
     dras upp under en transparent header utan att lämna gap mot nästa sektion. */
  --header-height: 0px;

  /* Globalt mellanrum mellan vanliga sektioner — överstyrs av theme_settings.section_gap.
     Default 0 = sektioner följer omedelbart efter varandra (modernt). Per-sektion margin
     i page editor kan override detta lokalt. */
  --section-gap: 0px;

  /* Vertikal rytm — koppling till spacing-skalan; faktiska värden styrs av theme (copyAfter m.m.) */
  --rhythm-copy-after: var(--space-2);
  --rhythm-section-title-after: 24px;
  --rhythm-h1-after: 24px;
  --rhythm-h2-after: 24px;
  --rhythm-h3-after: 24px;
  --rhythm-h4-after: 24px;
  --rhythm-h5-after: 24px;
  --rhythm-h6-after: 24px;
  --rhythm-heading-after: 24px;
  --rhythm-paragraph-after: var(--rhythm-copy-after);
  --rhythm-paragraph-gap: var(--space-5);
  --rhythm-media-after: var(--space-6);
  --rhythm-block-gap: var(--rhythm-copy-after);
  --rhythm-actions-before: 32px;
  --rhythm-column-heading-after: 24px;

  /* Line heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Global radhöjd (brödtext m.m.) — överstyrs av theme_settings.line_height via Site settings */
  --site-line-height: 1.5;

  /* ---- 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;

  /* Section padding (vertical) – fluid; överstyrs av theme_settings.section_density */
  --section-padding-y: clamp(2rem, 4vw, 4rem);
  /* CTA-band (.section-cta); theme_settings.cta_density */
  --section-padding-y-cta: clamp(1.5rem, 3vw, 2.75rem);
  /* Min-height för .section--min-screen, hero m.m.; överstyrs av section_density */
  --section-min-screen: 670px;
  /* CTA-band (.section-cta); theme_settings.cta_density */
  --section-cta-min-height: 280px;
  /* Rader i alternating-rows; överstyrs av section_density */
  --section-row-min: 350px;
  /* Content max-width */
  --content-width: min(1200px, 100vw - 2rem);
  --content-gutter: 1rem;
}