/* ============================================================
   HEJ NYKÖPING — Design tokens
   Auktoritativa brand-tokens. Ljus + mörk via [data-theme].
   Används av: token-gallery.html och vidare implementeringar.
   ============================================================ */

/* ---------- Primitive färger (scales) ---------- */
:root {
  /* Varm orange — brand #E5742E (orange-500) */
  --orange-50:  #FFF8F2;
  --orange-100: #FBEBD5;   /* varm aprikos — mjuk primär-yta (badge/ticket/ikon) */
  --orange-200: #F6D9B3;
  --orange-300: #F0C489;
  --orange-400: #F59E5C;
  --orange-500: #E5742E;   /* BRAND — knappar, CTA, länkar */
  --orange-600: #D9641C;   /* hover/darker — text på ljus yta */
  --orange-700: #B54E14;
  --orange-800: #8F3D10;
  --orange-900: #6E300C;

  /* Marinblå — brand #1D396E (navy-600) */
  --navy-50:  #EEF2F9;
  --navy-100: #DCE5F2;
  --navy-200: #B7C7E0;
  --navy-300: #8AA3C8;
  --navy-400: #5C7AA9;
  --navy-500: #3A5687;
  --navy-600: #1D396E;   /* BRAND — djup marinblå */
  --navy-700: #162C55;
  --navy-800: #101F3D;
  --navy-900: #0E131F;   /* nästan-svart marin — text */

  /* Neutral — sval blågrå (håller ihop med marin/blå; ingen orange/rosa) */
  --neutral-50:  #F7F8FA;
  --neutral-100: #F1F3F7;
  --neutral-200: #E4E8EF;
  --neutral-300: #D2D8E2;
  --neutral-400: #B4BDCB;
  --neutral-500: #8F9AAC;
  --neutral-600: #616B7E;
  --neutral-700: #4A5262;
  --neutral-800: #333A47;
  --neutral-900: #1D222B;

  /* Semantik — status */
  --green-100: #E7F2E5;
  --green-300: #8FE086;
  --green-500: #3D8E34;
  --green-700: #2C6B26;
  --green-800: #235520;

  --red-100: #FBEAEA;
  --red-300: #F2A9A9;
  --red-400: #E88C8C;
  --red-500: #D64545;
  --red-600: #C23B3B;
  --red-700: #A93232;
  --red-800: #8A2A2A;
  --red-900: #6E2222;

  --amber-100: #FEF3C7;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --amber-900: #78350F;

  --white: #FFFFFF;
  --black: #000000;

  /* Klassisk logotyp-blå (#3366B2 i logo-original/logo-blue) — skiljer
     sig från blåskalan ovan och används bara till logotypen. */
  --blue-brand: #3366B2;
}

/* ============================================================
   SEMANTISKA TOKENS — ljus (default)
   ============================================================ */
:root,
[data-theme="light"] {
  /* Ytor */
  --color-bg: var(--white);
  --color-surface: var(--white);
  --color-surface-subtle: var(--neutral-50);
  --color-surface-hover: var(--neutral-100);
  --color-surface-inverse: var(--navy-900);

  /* Text */
  --color-foreground: var(--navy-900);
  --color-foreground-muted: #5C6675;        /* AA 4.5:1 på vit */
  --color-foreground-meta: #5C6675;         /* AA 4.5:1 – metadata, datum, etiketter */
  --color-foreground-subtle: #98A1AD;       /* placeholder/disabled – aldrig text */
  --color-foreground-inverse: var(--white);

  /* Linjer */
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-border-focus: var(--orange-500);

  /* Primär (orange) */
  --color-primary: var(--orange-500);
  --color-primary-hover: var(--orange-600);
  --color-primary-active: var(--orange-700);
  --color-on-primary: var(--navy-900);        /* AA 6.07:1 (vit på #E5742E = 3.06:1, ej AA) */
  --color-primary-soft: var(--orange-100);
  --color-on-primary-soft: var(--orange-800);

  /* Sekundär/info (marin — samma familj som brand) */
  --color-secondary: var(--navy-600);
  --color-secondary-hover: var(--navy-700);
  --color-on-secondary: var(--white);
  --color-secondary-soft: var(--navy-50);
  --color-on-secondary-soft: var(--navy-800);

  /* Länkar */
  --color-link: var(--orange-700);            /* AA 5.17:1 på vit */
  --color-link-hover: var(--orange-800);

  /* Semantik */
  --color-success: var(--green-500);
  --color-success-soft: var(--green-100);
  --color-warning: var(--amber-500);
  --color-warning-soft: var(--amber-100);
  --color-danger: var(--red-500);
  --color-danger-soft: var(--red-100);
  /* "Strong" = text/ikon på *-soft-yta (säkerställd AA-kontrast) */
  --color-success-strong: var(--green-700);
  --color-warning-strong: var(--amber-700);
  --color-danger-strong: var(--red-700);

  /* Medlemsnivåer */
  --color-plus: var(--navy-600);
  --color-plus-soft: var(--navy-50);
  --color-plus-border: var(--navy-200);
  --color-premium: var(--amber-700);
  --color-premium-soft: var(--amber-100);
  --color-premium-border: var(--amber-400);
  --color-free: var(--neutral-600);
  --color-free-soft: var(--neutral-100);

  /* Skuggor (varmtonade) */
  --shadow-sm: 0 1px 2px rgba(14, 19, 31, 0.06);
  --shadow-md: 0 4px 12px rgba(14, 19, 31, 0.08);
  --shadow-lg: 0 10px 24px rgba(14, 19, 31, 0.10);
  --shadow-xl: 0 20px 40px rgba(14, 19, 31, 0.14);
  --shadow-focus: 0 0 0 3px rgba(229, 116, 46, 0.30);
  --shadow-focus-error: 0 0 0 3px rgba(214, 69, 69, 0.28);

  /* Höjda ytor (popover, dropdown, modal) */
  --surface-raised-bg: var(--color-surface);
  --surface-raised-border: var(--color-border);
  --surface-raised-shadow: var(--shadow-lg);

  /* Overlay/header/hero — nyckelfärgen marin. Mörka ytor är alltid i
     marin-familjen (ej rent svart) och har därför ljus text.
     LJUSARE marin-gradient i ljust läge (navy-600→700), inte nästan-svart. */
  --color-hero-gradient-start: var(--navy-600);
  --color-hero-gradient-end: var(--navy-700);
  --color-hero-text: var(--white);
  --color-hero-text-muted: rgba(255, 255, 255, 0.84);
  --color-scrim: rgba(14, 19, 31, 0.55);

  /* Färgglöd i BAKGRUNDEN (smart motiv, inga färgremsor).
     Används som radial-gradienter ovanpå --color-hero-gradient-*. */
  --color-hero-glow-warm: rgba(229, 116, 46, 0.16);
  --color-hero-glow-cool: rgba(92, 122, 169, 0.22);

  /* Logotypblå (samma i båda teman) */
  --color-logo-blue: var(--blue-brand);

  /* Stora mörka ytor — header, CTA-band, footer. Alltid i marin-familjen
     (aldrig rent svart). Här sitter sajtens "levande färgblock". */
  --color-header-bg: var(--navy-600);
  --color-header-bg-strong: var(--navy-800);   /* tydligt mörkare header (t.ex. undersidor) */
  --color-cta-bg: var(--navy-700);
  --color-cta-bg-end: var(--navy-800);
  --color-footer-bg: var(--navy-900);
  --color-on-dark: var(--white);
  --color-on-dark-muted: rgba(255, 255, 255, 0.84);
  /* Länkar på mörk yta (header/hero/CTA/footer) */
  --color-on-dark-link: var(--navy-200);
  --color-on-dark-link-hover: var(--navy-100);
  /* Ytor/avdelare PÅ mörk yta (theme-invarianta) — t.ex. lyft tabellkolumn,
     panel eller avdelarlinje på marin bakgrund. */
  --color-surface-on-dark: var(--navy-600);
  --color-surface-on-dark-strong: var(--navy-500);
  --color-on-dark-border: rgba(255, 255, 255, 0.14);

  /* Bloggens färgade botten — återanvänds på bloggindex + artikelsidor.
     Byggs som linear-gradient(top, bottom) i komponenten. */
  --color-blog-tint-top: var(--navy-50);
  --color-blog-tint-bottom: var(--navy-100);
  --color-blog-tint-border: var(--navy-100);

  /* Sektionsytor ("kapitel") — marinblå toner för rytm mellan sektioner.
     Text-tokens är AA-säkrade per ton (se contexts/public/patterns.md). */
  --color-surface-tint-soft: var(--navy-50);
  --color-surface-tint: var(--navy-100);
  --color-surface-tint-strong: var(--navy-200);
  --color-surface-tint-deep: var(--navy-600);
  --color-on-tint: var(--navy-900);
  --color-on-tint-muted: var(--navy-800);
  --color-on-tint-link: var(--orange-900);
  --color-on-tint-border: var(--navy-300);
}

/* ============================================================
   SEMANTISKA TOKENS — mörk
   ============================================================ */
[data-theme="dark"] {
  --color-bg: var(--navy-900);
  --color-surface: #16203A;         /* steget ovanför bg */
  --color-surface-subtle: #1B2745;
  --color-surface-hover: #223051;
  --color-surface-inverse: var(--white);

  --color-foreground: #F2F4F7;
  --color-foreground-muted: #ADB6C4;   /* AA 4.5:1 på mörk */
  --color-foreground-meta: #ADB6C4;    /* AA 4.5:1 – metadata, datum, etiketter */
  --color-foreground-subtle: #6F7A8C;  /* placeholder/disabled – aldrig text */
  --color-foreground-inverse: var(--navy-900);

  --color-border: #2A3550;
  --color-border-strong: #3A4766;
  --color-border-focus: var(--orange-400);

  --color-primary: var(--orange-400);
  --color-primary-hover: var(--orange-500);
  --color-primary-active: var(--orange-600);
  --color-on-primary: var(--navy-900);
  --color-primary-soft: rgba(229, 116, 46, 0.16);
  --color-on-primary-soft: var(--orange-200);

  --color-secondary: var(--navy-300);
  --color-secondary-hover: var(--navy-200);
  --color-on-secondary: var(--navy-900);
  --color-secondary-soft: rgba(138, 163, 200, 0.18);
  --color-on-secondary-soft: var(--navy-200);

  --color-link: var(--orange-400);
  --color-link-hover: var(--orange-300);

  --color-success: #58C24D;
  --color-success-soft: rgba(61, 142, 52, 0.18);
  --color-warning: var(--amber-400);
  --color-warning-soft: rgba(245, 158, 11, 0.18);
  --color-danger: #E06666;
  --color-danger-soft: rgba(214, 69, 69, 0.18);
  --color-success-strong: var(--green-300);
  --color-warning-strong: var(--amber-400);
  --color-danger-strong: var(--red-300);

  --color-plus: var(--navy-300);
  --color-plus-soft: rgba(138, 163, 200, 0.18);
  --color-plus-border: var(--navy-400);
  --color-premium: var(--amber-400);
  --color-premium-soft: rgba(245, 158, 11, 0.18);
  --color-premium-border: var(--amber-400);
  --color-free: var(--neutral-400);
  --color-free-soft: rgba(255, 255, 255, 0.06);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.50);
  --shadow-focus: 0 0 0 3px rgba(249, 115, 22, 0.40);
  --shadow-focus-error: 0 0 0 3px rgba(224, 102, 102, 0.35);

  --color-hero-gradient-start: var(--navy-800);
  --color-hero-gradient-end: var(--navy-900);
  --color-hero-text: var(--white);
  --color-hero-text-muted: rgba(255, 255, 255, 0.80);
  --color-scrim: rgba(0, 0, 0, 0.60);

  /* Samma glöd-tokens i mörkt, något svagare */
  --color-hero-glow-warm: rgba(229, 116, 46, 0.12);
  --color-hero-glow-cool: rgba(92, 122, 169, 0.16);

  --color-logo-blue: var(--blue-brand);

  /* Bloggyta i mörkt tema (mörk ton i stället för ljus) */
  --color-blog-tint-top: #16203A;
  --color-blog-tint-bottom: #1B2745;
  --color-blog-tint-border: #2A3550;

  /* Sektionsytor i mörkt läge (experimentellt) */
  --color-surface-tint-soft: var(--color-surface-subtle);
  --color-surface-tint: var(--color-surface-subtle);
  --color-surface-tint-strong: var(--color-surface-hover);
  --color-surface-tint-deep: var(--color-surface-subtle);
  --color-on-tint: var(--color-foreground);
  --color-on-tint-muted: var(--color-foreground-muted);
  --color-on-tint-link: var(--color-link);
  --color-on-tint-border: var(--color-border);
}

/* ============================================================
   TYPOGRAFI
   ============================================================ */
:root {
  --font-display: "Fira Sans Extra Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Open Sans", "Source Sans 3", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Skala */
  --text-xs: 0.8125rem;    /* 13px */
  --text-sm: 0.9375rem;    /* 15px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 4rem;        /* 64px */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;
}

/* ============================================================
   SPRING / LAYOUT
   ============================================================ */
:root {
  --space-1: 0.25rem;    /* 4px  */
  --space-2: 0.5rem;     /* 8px  */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  --container-sm: 40rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 75rem;
  --container-max: 82.5rem;
  --container-page: var(--container-xl);   /* standard sidcontainer (listningar); prosa hålls smal via --prose-max */

  --radius-sm: 0.375rem;   /* 6px  — knappar */
  --radius-md: 0.5rem;     /* 8px  — inputs */
  --radius-lg: 0.75rem;    /* 12px — kort */
  --radius-xl: 1rem;       /* 16px — modaler */
  --radius-2xl: 1.25rem;   /* 20px — hero/search */
  --radius-full: 999px;    /* badges, piller */
}

/* ============================================================
   MOTION
   ============================================================ */
:root {
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   KOMPONENT-TOKENS
   ============================================================ */
:root,
[data-theme="light"] {
  /* Knappar */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-text: var(--color-on-primary);
  --btn-primary-hover: var(--color-primary-hover);
  --btn-primary-radius: var(--radius-sm);
  --btn-secondary-bg: var(--color-surface-subtle);
  --btn-secondary-text: var(--color-foreground);
  --btn-secondary-border: var(--color-border-strong);
  --btn-secondary-hover: var(--color-surface-hover);

  /* Kort */
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--radius-lg);
  --card-media-aspect: 16 / 9;   /* fast mediayta i kort */
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --card-company-media-width: 11rem;   /* liggande företagskort: logga/media till vänster */

  /* Badges */
  --badge-radius: var(--radius-full);

  /* Inputs */
  --input-bg: var(--color-surface);
  --input-border: var(--color-border-strong);
  --input-radius: var(--radius-md);
  --input-focus-ring: var(--shadow-focus);
  --input-text: var(--color-foreground);
  --input-placeholder: var(--color-foreground-subtle);

  /* Sökfält (hero) */
  --search-radius: var(--radius-2xl);

  /* Nav */
  --nav-bg: rgba(255, 255, 255, 0.92);
  --nav-link: var(--color-foreground);
  --nav-link-hover: var(--color-link);

  /* Logo-slott — vit botten där en företagslogga/ikon visas (kort). */
  --logo-slot-bg: var(--white);
  --logo-slot-border: var(--color-border);
  --logo-slot-radius: var(--radius-lg);
  --logo-slot-shadow: var(--shadow-sm);
  --logo-slot-sm: 3.5rem;               /* kompakt företagskort: liten logga */
}

[data-theme="dark"] {
  --nav-bg: rgba(14, 19, 31, 0.90);
  --nav-link: var(--color-foreground);
  --nav-link-hover: var(--color-link);
}

/* ============================================================
   KOMPONENT-TOKENS — UTÖKAD KATALOG (v1.1.0)
   Knappvarianter, badge/chip, formulär, rating, feedback,
   navigering, data-visning, marknadsföring och innehåll.
   Värden är satta här; komponenterna konsumerar bara dessa.
   ============================================================ */
:root,
[data-theme="light"] {
  /* --- Knappar: storlekar & varianter --- */
  --btn-radius: var(--radius-sm);
  --btn-primary-active: var(--color-primary-active);
  --btn-secondary-active: var(--color-border-strong);
  --btn-ghost-bg: transparent;
  --btn-ghost-text: var(--color-foreground);
  --btn-ghost-hover: var(--color-surface-hover);
  --btn-on-dark-bg: rgba(255, 255, 255, 0.12);
  --btn-on-dark-text: var(--color-on-dark);
  --btn-on-dark-border: rgba(255, 255, 255, 0.35);
  --btn-on-dark-hover: rgba(255, 255, 255, 0.22);
  --btn-link-text: var(--color-link);
  --btn-link-hover: var(--color-link-hover);
  --btn-danger-bg: var(--red-700);
  --btn-danger-text: var(--white);
  --btn-danger-hover: var(--red-800);
  --btn-disabled-bg: var(--color-surface-hover);
  --btn-disabled-text: var(--color-foreground-subtle);
  --btn-disabled-opacity: 0.6;
  --btn-sm-padding-y: var(--space-2);
  --btn-sm-padding-x: var(--space-4);
  --btn-sm-font: var(--text-sm);
  --btn-md-padding-y: var(--space-3);
  --btn-md-padding-x: var(--space-5);
  --btn-md-font: var(--text-base);
  --btn-lg-padding-y: var(--space-4);
  --btn-lg-padding-x: var(--space-6);
  --btn-lg-font: var(--text-lg);
  --btn-icon-size: 2.75rem;              /* 44px touch target */

  /* --- Badges --- */
  --badge-padding-y: var(--space-1);
  --badge-padding-x: var(--space-3);
  --badge-font: var(--text-xs);
  --badge-plus-bg: var(--color-plus-soft);
  --badge-plus-text: var(--color-plus);
  --badge-premium-bg: var(--color-premium-soft);
  --badge-premium-text: var(--color-premium);
  --badge-premium-strong-bg: var(--amber-400);
  --badge-premium-strong-text: var(--navy-900);
  --badge-free-bg: var(--color-free-soft);
  --badge-free-text: var(--color-free);
  --badge-new-bg: var(--color-surface-hover);
  --badge-new-text: var(--color-foreground);
  --badge-success-bg: var(--color-success-soft);
  --badge-success-text: var(--color-success-strong);
  --badge-warning-bg: var(--color-warning-soft);
  --badge-warning-text: var(--color-warning-strong);
  --badge-danger-bg: var(--color-danger-soft);
  --badge-danger-text: var(--color-danger-strong);
  --badge-neutral-bg: var(--color-surface-hover);
  --badge-neutral-text: var(--color-foreground-muted);

  /* --- Chips (filter/kategori) --- */
  --chip-bg: var(--color-surface);
  --chip-text: var(--color-foreground-muted);
  --chip-border: var(--color-border-strong);
  --chip-bg-hover: var(--color-surface-hover);
  --chip-bg-active: var(--color-secondary);
  --chip-text-active: var(--color-on-secondary);
  --chip-border-active: var(--color-secondary);
  --chip-radius: var(--radius-full);
  --chip-padding-y: var(--space-2);
  --chip-padding-x: var(--space-4);
  --chip-gap: var(--space-2);
  /* Chip på mörk yta (hero/CTA) */
  --chip-on-dark-bg: rgba(255, 255, 255, 0.14);
  --chip-on-dark-text: var(--color-on-dark);
  --chip-on-dark-border: transparent;
  --chip-on-dark-bg-hover: rgba(255, 255, 255, 0.26);
  --filter-panel-bg: var(--color-surface);
  --filter-panel-border: var(--color-border);
  --filter-panel-radius: var(--radius-lg);
  --filter-panel-shadow: var(--shadow-md);

  /* --- Formulär --- */
  --input-height: 2.75rem;               /* 44px touch target */
  --input-padding-y: var(--space-3);
  --input-padding-x: var(--space-4);
  --input-border-hover: var(--color-border-focus);
  --input-disabled-bg: var(--color-surface-subtle);
  --input-disabled-text: var(--color-foreground-subtle);
  --input-error-border: var(--color-danger);
  --input-error-ring: var(--shadow-focus-error);
  --input-success-border: var(--color-success);
  --select-bg: var(--color-surface);
  --select-arrow: var(--color-foreground-muted);
  --textarea-min-height: 7rem;
  --checkbox-size: 1.25rem;
  --checkbox-radius: var(--radius-sm);
  --checkbox-bg: var(--color-surface);
  --checkbox-border: var(--color-border-strong);
  --checkbox-checked-bg: var(--color-primary);
  --checkbox-checked-mark: var(--color-on-primary);
  --radio-size: 1.25rem;
  --radio-bg: var(--color-surface);
  --radio-border: var(--color-border-strong);
  --radio-checked-bg: var(--color-primary);
  --radio-checked-dot: var(--color-on-primary);
  --upload-bg: var(--color-surface-subtle);
  --upload-border: var(--color-border-strong);
  --upload-border-hover: var(--color-border-focus);
  --upload-radius: var(--radius-lg);
  --upload-icon: var(--color-foreground-subtle);
  --label-text: var(--color-foreground);
  --label-weight: var(--weight-semibold);
  --label-required: var(--color-danger);
  --field-help-text: var(--color-foreground-muted);
  --field-error-text: var(--color-danger-strong);
  --form-gap: var(--space-5);
  --field-gap: var(--space-2);

  /* --- Rating / recension --- */
  --rating-star-on: var(--amber-500);
  --rating-star-off: var(--color-border-strong);
  --rating-size: var(--rating-size-md);
  --rating-size-sm: 0.875rem;
  --rating-size-md: 1.125rem;
  --rating-size-lg: 1.5rem;
  --rating-gap: var(--space-1);
  --review-avatar-size: 2.5rem;
  --review-border: var(--color-border);

  /* --- Feedback: notice --- */
  --notice-radius: var(--radius-lg);
  --notice-border-width: 1px;
  --notice-padding-y: var(--space-4);
  --notice-padding-x: var(--space-5);
  --notice-info-bg: var(--color-secondary-soft);
  --notice-info-text: var(--color-on-secondary-soft);
  --notice-info-border: var(--color-secondary);
  --notice-success-bg: var(--color-success-soft);
  --notice-success-text: var(--color-success-strong);
  --notice-success-border: var(--color-success);
  --notice-warning-bg: var(--color-warning-soft);
  --notice-warning-text: var(--color-warning-strong);
  --notice-warning-border: var(--color-warning);
  --notice-danger-bg: var(--color-danger-soft);
  --notice-danger-text: var(--color-danger-strong);
  --notice-danger-border: var(--color-danger);

  /* --- Feedback: empty / skeleton / tooltip --- */
  --empty-icon-color: var(--color-foreground-subtle);
  --empty-icon-size: 3rem;
  --empty-title: var(--color-foreground);
  --empty-text: var(--color-foreground-muted);
  --skeleton-bg: var(--color-surface-hover);
  --skeleton-bg-strong: var(--color-border);
  --skeleton-radius: var(--radius-md);
  --tooltip-bg: var(--navy-800);
  --tooltip-text: var(--white);
  --tooltip-radius: var(--radius-md);
  --tooltip-padding-y: var(--space-2);
  --tooltip-padding-x: var(--space-3);
  --tooltip-shadow: var(--shadow-md);
  --tooltip-max-width: 18rem;

  /* --- Navigering --- */
  --breadcrumb-text: var(--color-foreground-muted);
  --breadcrumb-link: var(--color-link);
  --breadcrumb-separator: var(--color-foreground-subtle);
  --breadcrumb-current: var(--color-foreground);
  --breadcrumb-gap: var(--space-2);
  --pagination-item-size: 2.75rem;   /* 44px touch target */
  --pagination-radius: var(--radius-md);
  --pagination-bg: var(--color-surface);
  --pagination-text: var(--color-foreground);
  --pagination-border: var(--color-border-strong);
  --pagination-hover-bg: var(--color-surface-hover);
  --pagination-active-bg: var(--color-primary);
  --pagination-active-text: var(--color-on-primary);
  --pagination-disabled-text: var(--color-foreground-subtle);
  --pagination-gap: var(--space-1);
  --loadmore-text: var(--color-foreground-muted);
  --loadmore-bg: transparent;
  --loadmore-border: var(--color-secondary);
  --loadmore-text-strong: var(--color-secondary);
  --loadmore-hover-bg: var(--color-secondary-soft);
  --loadmore-radius: var(--radius-md);
  --loadmore-padding-y: var(--space-3);
  --loadmore-padding-x: var(--space-6);
  --tabs-border: var(--color-border);
  --tabs-text: var(--color-foreground-muted);
  --tabs-text-active: var(--color-foreground);
  --tabs-indicator: var(--color-primary);
  --tabs-padding-y: var(--space-3);
  --tabs-padding-x: var(--space-4);
  --tabs-gap: var(--space-2);
  /* Segmented control (fakturering, vy-växlare) */
  --segmented-bg: var(--color-surface);
  --segmented-border: var(--color-border-strong);
  --segmented-radius: var(--radius-full);
  --segmented-padding: var(--space-1);
  --segmented-item-color: var(--color-foreground-muted);
  --segmented-item-hover: var(--color-surface-hover);
  --segmented-item-active-bg: var(--color-secondary);
  --segmented-item-active-text: var(--color-on-secondary);
  --segmented-item-min-height: 2.75rem;
  --accordion-bg: var(--color-surface);
  --accordion-border: var(--color-border);
  --accordion-radius: var(--radius-lg);
  --accordion-summary-text: var(--color-foreground);
  --accordion-summary-hover: var(--color-surface-hover);
  --accordion-icon: var(--color-foreground-muted);
  --accordion-padding-y: var(--space-4);
  --accordion-padding-x: var(--space-5);
  --accordion-gap: var(--space-3);

  /* --- Data-visning --- */
  --table-border: var(--color-border);
  --table-header-bg: var(--color-surface-subtle);
  --table-header-text: var(--color-foreground);
  --table-row-hover: var(--color-surface-hover);
  --table-cell-padding-y: var(--space-3);
  --table-cell-padding-x: var(--space-4);
  --table-caption-text: var(--color-foreground-muted);
  --table-zebra: var(--color-surface-subtle);
  /* Tabell på mörk yta (on-dark panel) */
  --table-on-dark-border: rgba(255, 255, 255, 0.16);
  --table-on-dark-zebra: rgba(255, 255, 255, 0.05);
  --table-on-dark-row-hover: rgba(255, 255, 255, 0.08);
  --table-on-dark-text: var(--color-on-dark-muted);
  --table-on-dark-header-bg: var(--color-surface-on-dark-strong);
  --table-on-dark-header-text: var(--color-on-dark);
  --avatar-radius: var(--radius-full);
  --avatar-bg: var(--color-secondary-soft);
  --avatar-text: var(--color-on-secondary-soft);
  --avatar-border: var(--color-border);
  --avatar-size-sm: 2rem;
  --avatar-size-md: 2.5rem;
  --avatar-size-lg: 3.5rem;
  --meta-label-text: var(--color-foreground-muted);
  --meta-value-text: var(--color-foreground);
  --meta-gap: var(--space-2);
  --gallery-gap: var(--space-2);
  --gallery-radius: var(--radius-lg);
  --gallery-thumb-size: 4.5rem;
  --gallery-thumb-border: var(--color-border-strong);
  --gallery-thumb-border-active: var(--color-primary);
  --lightbox-bg: rgba(14, 19, 31, 0.92);
  --icon-size-xs: 1rem;
  --icon-size-sm: 1.25rem;
  --icon-size-md: 1.5rem;
  --icon-size-lg: 2rem;
  --icon-size-xl: 2.5rem;
  --icon-stroke: 1.75;

  /* --- Marknadsföring --- */
  --member-card-bg: var(--color-surface);
  --member-card-border: var(--color-border);
  --member-card-radius: var(--radius-xl);
  --member-card-featured-border: var(--color-primary);
  --member-card-featured-shadow: var(--shadow-lg);

  /* --- Promo / uppgraderings-banner (tunn, ljus yta, knapp höger) --- */
  --promo-bg: var(--color-plus-soft);
  --promo-border: var(--color-plus);
  --promo-radius: var(--radius-lg);
  --promo-padding-y: var(--space-4);
  --promo-padding-x: var(--space-5);
  --promo-gap: var(--space-4);
  --ad-slot-bg: var(--color-surface-subtle);
  --ad-slot-border: var(--color-border-strong);
  --ad-slot-radius: var(--radius-lg);
  --ad-slot-label-text: var(--color-foreground-meta);
  --ad-slot-min-height: 6rem;
  /* IAB-format (se docs/ADS.md) */
  --ad-slot-mobile-banner-h: 6.25rem;      /* 320×100 */
  --ad-slot-leaderboard-h: 5.625rem;       /* 728×90 */
  --ad-slot-billboard-h: 15.625rem;        /* 970×250 */
  --ad-slot-medium-rectangle-w: 18.75rem;  /* 300×250 */
  --ad-slot-medium-rectangle-h: 15.625rem;
  --ad-slot-half-page-w: 18.75rem;         /* 300×600 */
  --ad-slot-half-page-h: 37.5rem;
  --newsletter-bg: var(--color-surface-subtle);
  --newsletter-border: var(--color-border);
  --newsletter-radius: var(--radius-xl);
  --ticket-bg: var(--color-primary);
  --ticket-text: var(--color-on-primary);
  --ticket-border: var(--color-primary);
  --ticket-radius: var(--radius-full);
  --social-icon-color: var(--color-foreground-muted);
  --social-icon-hover: var(--color-primary);

  /* --- Layout / innehåll --- */
  --prose-max: 68ch;
  --prose-text: var(--color-foreground);
  --prose-heading: var(--color-foreground);
  --prose-muted: var(--color-foreground-muted);
  --prose-link: var(--color-link);
  --prose-blockquote-border: var(--color-primary);
  --prose-code-bg: var(--color-surface-subtle);
  --prose-code-text: var(--color-on-primary-soft);
  --prose-hr: var(--color-border);
  --prose-figure-radius: var(--radius-lg);
  --section-header-gap: var(--space-2);
  --section-header-link: var(--color-link);
  --rail-width: 20rem;
  --rail-gap: var(--space-6);
  --grid-gap: var(--space-6);
  --grid-gap-tight: var(--space-4);
  --grid-gap-loose: var(--space-8);
}

[data-theme="dark"] {
  /* Knappar */
  --btn-danger-bg: var(--red-600);
  --btn-danger-text: var(--white);
  --btn-danger-hover: var(--red-500);

  /* Rating */
  --rating-star-on: var(--amber-400);

  /* Tooltip */
  --tooltip-bg: #0A101C;

  /* Ad slot */
  --ad-slot-bg: var(--color-surface-subtle);
}

/* ============================================================
   BASSTILAR + RÖRELSE-REDUCERING
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}