/* ==========================================================================================================
   Golden Planet design tokens, design v2. GENERATED by design/redesign/kit/tools/gen_tokens.py from
   design/redesign/tokens.json (palette v1-mb). Do not edit by hand: change tokens.json and rerun.
   Layers in the first block: 1 colour roles, 2 legacy palette names re-pointed to the roles (no green),
   3 old role tokens, 4 v2 scales. Contrast of every pair: python3 -m web.styleguide (/gpadmin/styleguide/).
   v2 CSS (gp-*.css) is mobile first (min-width 768 / 992); old CSS keeps max-width 991 / 767 / 479.
   ========================================================================================================== */
:root {
  /* ---- 1. colour roles, palette "v1-mb" (tokens.json palettes; design/redesign/notes/2026-10-26-palette.md) ---- */
  --gp-page: #ffffff;          /* page background, cards, header bar */
  --gp-stone: #f6f3ef;         /* the tinted bands/trays (FAQ, quotes, toolbox, footer), chips, top-of-pag */
  --gp-wash: #fbfaf7;          /* card wash: mega-menu promo, wells inside stone trays */
  --gp-hairline: #e7e3de;      /* 2 px card/tray borders, FAQ and matrix rules (decorative) */
  --gp-line-strong: #918b84;   /* input and outline-button borders (≥ 3:1) */
  --gp-ink: #191919;           /* body text */
  --gp-heading: #05264c;       /* h1–h4, nav links, prices, matrix values, outline-button text */
  --gp-muted: #514c46;         /* captions, '/md.', matrix descriptions, footer meta */
  --gp-action: #245fd4;        /* primary button fill, check icons, active chip text, featured-plan border */
  --gp-action-hover: #194cb1;  /* primary button hover */
  --gp-action-text: #ffffff;   /* text on the primary button */
  --gp-accent: #245fd4;        /* check icons, h2 highlight text, featured-plan border, open FAQ icon (≥ 3 */
  --gp-link: #245fd4;          /* links and eyebrows, breadcrumb links */
  --gp-link-hover: #1545a2;    /* link hover */
  --gp-accent-tint: #e7f1ff;   /* chips (active), featured-plan halo, card icon tiles, status */
  --gp-accent-text: #194cb1;   /* text on the accent tint */
  --gp-dot: #e6ad00;           /* the signature full stop after headings, quote marks (decorative only) */
  --gp-surface-dark: #05264c;  /* the one dark surface per page (forest/ink CTA panel) */
  --gp-on-dark: #ffffff;       /* text on the dark surface */
  --gp-on-dark-muted: #c3cfde; /* secondary text on the dark surface */
  --gp-dot-on-dark: #f0c501;   /* the full stop on the dark surface */
  --gp-link-on-dark: #aeceff;  /* links on the dark surface */
  --gp-focus: #245fd4;         /* 2 px focus ring on light */
  --gp-focus-on-dark: #f0c501; /* focus ring on the dark surface */
  --gp-highlight-bg: #e7f1ff;  /* h1 highlight pill */
  --gp-highlight-text: #05264c; /* text in the h1 pill */
  --gp-well: #f6f3ef;          /* image wells on white (tiles, design cards) */
  --gp-well-alt: #ffffff;      /* image wells on a stone tray */
  --gp-yes-bg: #d4e5ff;        /* matrix 'included' square */
  --gp-yes-fg: #144097;        /* its tick */
  --gp-no-bg: #e7e3de;         /* matrix 'not included' square */
  --gp-no-fg: #191919;         /* its dash */
  --gp-unl-bg: #d2f1df;        /* matrix 'Ubegrænset' square */
  --gp-unl-fg: #145538;        /* its ∞ */
  --gp-icon-fill: #85abf0;     /* line-32 icon accent areas */
  --gp-icon-stroke: #245fd4;   /* line-32 icon accent strokes */
  --gp-status-bg: #d2f1df;     /* status chip (success, 'Gratis', versions) */
  --gp-status-text: #145538;   /* its text */
  --gp-sun: #f0c501;           /* the logo's sun (logo, watermark; never text) */
  --gp-error: #b42318;

  /* ---- 2. legacy palette names, re-pointed to the roles (no green value left, G1-3) ---- */
  --gp-green: var(--gp-link-on-dark);  /* was green: fills with #191919 text (12.0), text on dark (9.42) */
  --gp-green-600: var(--gp-accent);    /* was green: large text, ticks, UI borders on light (5.73) */
  --gp-green-650: var(--gp-accent);    /* v0 heading dot / ticks (never shipped) */
  --gp-green-700: var(--gp-link);      /* was green: links, eyebrows, focus on light (5.73) */
  --gp-green-800: var(--gp-link-hover); /* was green: link hover (8.73) */
  --gp-green-100: var(--gp-accent-tint); /* was green: badges, chips, selection (#191919 text) */
  --gp-green-50: var(--gp-accent-tint); /* was green: pale panels, tone-mint, current item */
  --gp-coral: #ff7b5e;                 /* kept: the 'Nyhed' badge only (#191919 text 6.90); never text on white */
  --gp-coral-600: #e76549;             /* kept: coral hover fill */
  --gp-coral-700: #c4462b;             /* kept: coral text on light */
  --gp-coral-50: #ffeee8;              /* kept: pale coral panel */
  --gp-dark: #191919;                  /* ink: body text, text on fills, theme-color (= --gp-ink) */
  --gp-dark-raised: #14365e;           /* raised dark: cards/inputs on the navy surface (white 12.0) */
  --gp-dark-line: #2b4a70;             /* borders on the navy surface (decorative) */
  --gp-light: var(--gp-page);          /* white: page, cards, text on dark */
  --gp-light-alt: var(--gp-stone);     /* was green: alternate band -> the warm stone */
  --gp-grey-700: var(--gp-muted);      /* was green: secondary text (8.49 white / 7.68 stone) */
  --gp-grey-600: var(--gp-muted);      /* was green: lightest text grey */
  --gp-grey-500: var(--gp-line-strong); /* was green: input / outline borders (3.37 / 3.05) */
  --gp-grey-300: var(--gp-hairline);   /* was green: decorative dividers */
  --gp-grey-200: var(--gp-hairline);   /* was green: hairlines */
  --gp-grey-on-dark: var(--gp-on-dark-muted); /* was green: secondary text on dark (9.58 navy) */
  --gp-mist: var(--gp-stone);          /* v0 tray tint (never shipped) */
  --gp-forest: var(--gp-surface-dark); /* v0 dark surface (never shipped) */
  --gp-line: var(--gp-hairline);       /* v0 hairline (never shipped) */

  /* ---- 3. old role tokens (read by base.css, components.css, support.css, search.css, forms.css) ---- */
  /* status (text pairs checked in web/styleguide.py) */
  --error: var(--gp-error);
  --error-on-dark: #ff8a80;        /* error text on the navy surface (7.37) */
  --error-border: var(--gp-error);
  --error-tint: #fef3f2;           /* error summary background (error text 6.05) */
  --success-tint: var(--gp-accent-tint);
  --info: #2e6fbf;                 /* "note" callout rule */
  --info-tint: #eef5fc;
  --warning: #e0a100;              /* "warning" callout rule (decoration) */
  --warning-tint: #fff8e6;

  /* tints and overlays */
  --accent-tint: var(--gp-accent-tint);       /* plain blockquote */
  --badge-bg: rgba(174, 206, 255, .16);       /* badge on dark tones (link-on-dark text on it) */
  --badge-bg-on-light: var(--gp-accent-tint); /* badge on light tones */
  --halo: rgba(36, 95, 212, .2);              /* timeline / meta dot ring */
  --ghost: rgba(255, 255, 255, .08);          /* ghost button, nav toggle hover (dark only) */
  --ghost-faint: rgba(255, 255, 255, .04);
  --overlay: rgba(25, 25, 25, .6);            /* controls on photos/videos */
  --overlay-strong: rgba(25, 25, 25, .85);
  --muted-on-accent: rgba(25, 25, 25, .78);   /* muted text on a light fill */

  /* code (always on --gp-dark) */
  --code-bg: var(--gp-dark);
  --code-text: #e8e8e8;
  --code-key: #7aa7ff;
  --code-string: var(--gp-link-on-dark);
  --code-function: #ffd166;
  --code-number: #ffb59e;
  --code-comment: #b3b3b3;
  --code-line: #6b6b6b;                       /* line numbers, aria-hidden decoration */

  /* fonts: Work Sans (self-hosted, fonts.css), one variable file for 400/500/600/700 */
  --font-sans: var(--gp-font-sans);
  --font-label: var(--font-sans);
  --font-mono: var(--gp-font-mono);
  --font-code: var(--font-mono);

  /* type scale: h1-h3, body and lead follow the v2 fluid sizes; h4-h6 keep their steps */
  --fs-h1: var(--gp-fs-page-h1);
  --fs-h2: var(--gp-fs-section-h2);
  --fs-h3: var(--gp-fs-block-h2);
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 17px;
  --fs-body: var(--gp-fs-body);
  --fs-lead: var(--gp-fs-lead);
  --fs-medium: 16px;
  --fs-small: 14px;
  --fs-xsmall: 12px;
  --lh-body: 1.6;
  --lh-heading: 1.12;
  --tracking: 0;
  --tracking-tight: -.025em;
  --tracking-label: .04em;
  --tracking-mono: 0;

  /* spacing (4/8 grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --section-y: var(--gp-section-y);
  --gutter: 32px;
  --grid-gap: 24px;

  /* layout */
  --container: 1264px;
  --container-narrow: 900px;
  --container-text: 760px;
  --header-h: 84px;          /* space the floating bar covers: top 12 + bar 72 (D5); 76 at <= 991 */

  /* shape & depth */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(25, 25, 25, .04), 0 4px 16px rgba(25, 25, 25, .06);
  --shadow-raised: 0 2px 6px rgba(25, 25, 25, .05), 0 16px 40px rgba(25, 25, 25, .10);
  --shadow-tile: 0 4px 24px rgba(25, 25, 25, .12);
  --shadow-dropdown: var(--gp-shadow-header);
  --transition: .15s cubic-bezier(.4, 0, .2, 1);
  --focus-ring: 0 0 0 3px rgba(36, 95, 212, .25);
  --z-header: 1000;

  /* legacy NetRadar aliases (do not use in new CSS) */
  --primary: var(--gp-action);
  --secondary: var(--gp-action);
  --primary-dark: var(--gp-action-hover);
  --accent-large-on-light: var(--gp-accent);
  --accent-small-on-light: var(--gp-link);
  --black: var(--gp-dark);
  --dark: var(--gp-dark);
  --dark-grey: var(--gp-dark-raised);
  --grey: var(--gp-grey-600);
  --light-grey: var(--gp-grey-on-dark);
  --light: var(--gp-light-alt);
  --white: var(--gp-light);
  --yellow: #ffd166;                          /* preview banner (#191919 text 12.19), code function */
  --grey-helper: var(--gp-grey-200);
  --grey-helper-dark: var(--gp-dark-line);
  --charcoal: var(--gp-dark-raised);

  /* ---- 4. v2 font, type, radius, layout, space, border, shadow, buttons, chips, tile, motion ---- */
  --gp-font-sans: "Work Sans", system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --gp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --gp-fs-hero-h1: clamp(34px, 22.61px + 2.921vw, 60px);
  --gp-lh-hero-h1: clamp(38px, 26.61px + 2.921vw, 64px);
  --gp-fw-hero-h1: 600;
  --gp-ls-hero-h1: -0.025em;
  --gp-fs-page-h1: clamp(34px, 26.11px + 2.022vw, 52px);
  --gp-lh-page-h1: clamp(38px, 30.11px + 2.022vw, 56px);
  --gp-fw-page-h1: 600;
  --gp-ls-page-h1: -0.025em;
  --gp-fs-giant: clamp(72px, 50.97px + 5.393vw, 120px);
  --gp-lh-giant: 1;
  --gp-fw-giant: 700;
  --gp-ls-giant: -0.04em;
  --gp-fs-section-h2: clamp(30px, 23.87px + 1.573vw, 44px);
  --gp-lh-section-h2: clamp(34px, 27.87px + 1.573vw, 48px);
  --gp-fw-section-h2: 600;
  --gp-ls-section-h2: -0.022em;
  --gp-fs-block-h2: clamp(26px, 23.37px + 0.674vw, 32px);
  --gp-lh-block-h2: clamp(32px, 29.37px + 0.674vw, 38px);
  --gp-fw-block-h2: 600;
  --gp-ls-block-h2: -0.018em;
  --gp-fs-cta-h2: clamp(28px, 22.74px + 1.348vw, 40px);
  --gp-lh-cta-h2: clamp(32px, 26.74px + 1.348vw, 44px);
  --gp-fw-cta-h2: 600;
  --gp-ls-cta-h2: -0.022em;
  --gp-fs-card-h3: clamp(20px, 19.12px + 0.225vw, 22px);
  --gp-lh-card-h3: clamp(26px, 25.12px + 0.225vw, 28px);
  --gp-fw-card-h3: 600;
  --gp-ls-card-h3: -0.01em;
  --gp-fs-plan-name: 28px;
  --gp-lh-plan-name: 32px;
  --gp-fw-plan-name: 600;
  --gp-ls-plan-name: -0.02em;
  --gp-fs-plan-price: 36px;
  --gp-lh-plan-price: 40px;
  --gp-fw-plan-price: 700;
  --gp-fs-matrix-head-price: clamp(18px, 13.62px + 1.124vw, 28px);
  --gp-lh-matrix-head-price: clamp(22px, 17.62px + 1.124vw, 32px);
  --gp-fw-matrix-head-price: 700;
  --gp-fs-body: clamp(16px, 15.56px + 0.112vw, 17px);
  --gp-lh-body: clamp(26px, 25.56px + 0.112vw, 27px);
  --gp-fw-body: 400;
  --gp-fs-lead: clamp(18px, 17.12px + 0.225vw, 20px);
  --gp-lh-lead: clamp(28px, 27.12px + 0.225vw, 30px);
  --gp-fw-lead: 400;
  --gp-fs-small: 15px;
  --gp-lh-small: 22px;
  --gp-fw-small: 400;
  --gp-fs-caption: 14px;
  --gp-lh-caption: 20px;
  --gp-fw-caption: 500;
  --gp-fs-eyebrow: 15px;
  --gp-lh-eyebrow: 20px;
  --gp-fw-eyebrow: 600;
  --gp-fs-nav: 15px;
  --gp-lh-nav: 20px;
  --gp-fw-nav: 500;
  --gp-fs-button: 15px;
  --gp-lh-button: 20px;
  --gp-fw-button: 600;
  --gp-fs-button-lg: 16px;
  --gp-fs-chip: 14px;
  --gp-lh-chip: 20px;
  --gp-fw-chip: 600;
  --gp-fs-faq-question: clamp(17px, 16.56px + 0.112vw, 18px);
  --gp-lh-faq-question: clamp(24px, 23.12px + 0.225vw, 26px);
  --gp-fw-faq-question: 600;
  --gp-fs-quote: clamp(16px, 15.56px + 0.112vw, 17px);
  --gp-lh-quote: clamp(26px, 25.12px + 0.225vw, 28px);
  --gp-fw-quote: 500;
  --gp-fs-matrix-label: 15px;
  --gp-lh-matrix-label: 22px;
  --gp-fw-matrix-label: 500;
  --gp-fs-matrix-desc: 13px; --gp-lh-matrix-desc: 18px;
  --gp-fs-prose-article: 17px; --gp-lh-prose-article: 28px;
  --gp-fs-prose-h2: 26px; --gp-lh-prose-h2: 32px;
  --gp-fs-prose-h3: 20px; --gp-lh-prose-h3: 28px;
  --gp-radius-button: 12px;
  --gp-radius-input: 12px;
  --gp-radius-chip: 12px;
  --gp-radius-status-chip: 8px;
  --gp-radius-matrix-square: 8px;
  --gp-radius-tile-inner-screenshot: 12px;
  --gp-radius-card: 24px;
  --gp-radius-plan-card-inner: 24px;
  --gp-radius-plan-card-halo: 28px;
  --gp-radius-tile: 24px;
  --gp-radius-cta-panel: 24px;
  --gp-radius-header-bar: 20px;
  --gp-radius-mega-menu: 24px;
  --gp-radius-tray: 28px;
  --gp-radius-avatar: 50%;
  --gp-container: 1240px;
  --gp-tray-inset: 8px;
  --gp-tray-pad-x: 16px;
  --gp-tray-max: 1568px;
  --gp-header-h: 64px;
  --gp-header-top: 12px;
  --gp-header-max: 1304px;
  --gp-header-reserve: calc(var(--gp-header-top) + var(--gp-header-h) + 24px);
  --gp-faq-col: 780px;
  --gp-prose: 720px;
  --gp-block-text: 520px; --gp-block-gap: 64px; --gp-tile-max: 560px;
  --gp-hero-home-h: clamp(600px, 84vh, 800px);
  --gp-hero-medium-h: 520px;
  --gp-hero-plain-top: clamp(112px, 94.47px + 4.494vw, 152px);
  --gp-hero-plain-bottom: clamp(48px, 37.48px + 2.697vw, 72px);
  --gp-space-1: 4px;
  --gp-space-2: 8px;
  --gp-space-3: 12px;
  --gp-space-4: 16px;
  --gp-space-5: 24px;
  --gp-space-6: 32px;
  --gp-space-7: 48px;
  --gp-space-8: 64px;
  --gp-space-9: 80px;
  --gp-space-10: 96px;
  --gp-space-11: 128px;
  --gp-section-y: clamp(64px, 49.98px + 3.596vw, 96px);
  --gp-tray-y: clamp(56px, 45.48px + 2.697vw, 80px);
  --gp-tray-gap: 8px;
  --gp-intro-gap: 48px;
  --gp-card-pad: clamp(24px, 20.49px + 0.899vw, 32px);
  --gp-list-gap: 12px;
  --gp-chip-gap: 8px;
  --gp-border: 2px solid var(--gp-hairline);
  --gp-rule: 1px solid var(--gp-hairline);
  --gp-shadow-header: 0 1px 2px rgba(25,25,25,.04), 0 4px 12px rgba(25,25,25,.05), 0 20px 40px -14px rgba(25,25,25,.10);
  --gp-shadow-screenshot: 0 2px 16px rgba(25,25,25,.10);
  --gp-btn-h: 44px;
  --gp-btn-h-lg: 48px;
  --gp-btn-h-sm: 40px;
  --gp-btn-px: 20px;
  --gp-btn-px-lg: 24px;
  --gp-btn-px-sm: 16px;
  --gp-btn-border: 1.5px;
  --gp-chip-h: 36px;
  --gp-chip-px: 14px;
  --gp-tile-scale: 130%; --gp-tile-rotate: -10deg; --gp-tile-x: 12%; --gp-tile-y: 14%;
  --gp-tile-flat-pad: 32px;
  --gp-dur-colour: 150ms;
  --gp-dur-header: 320ms;
  --gp-dur-dropdown: 200ms;
  --gp-dur-drawer: 240ms;
  --gp-dur-arrow: 150ms;
  --gp-ease: cubic-bezier(.4,0,.2,1);
  --gp-ease-header: cubic-bezier(.33,1,.68,1);
  --gp-arrow-shift: 4px;
}

@media (max-width: 991px) {
  :root {
    --fs-h4: 22px;
    --fs-h5: 19px;
    --gutter: 24px;
    --header-h: 76px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-h4: 21px;
  }
}

@media (max-width: 479px) {
  :root {
    --fs-h4: 20px;
    --fs-h5: 18px;
    --gutter: 16px;
  }
}

@media (min-width: 768px) {
  :root {
    --gp-radius-tray: 40px;
    --gp-tray-inset: 12px;
    --gp-tray-pad-x: 24px;
    --gp-tray-gap: 24px;
  }
}

@media (min-width: 992px) {
  :root {
    --gp-radius-header-bar: 24px;
    --gp-tray-inset: 16px;
    --gp-header-h: 72px;
    --gp-header-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --gp-dur-header: 0.01ms; --gp-dur-dropdown: 0.01ms; --gp-dur-drawer: 0.01ms; --gp-dur-arrow: 0.01ms; --gp-arrow-shift: 0px; --transition: 0.01ms; }
}