/* ==========================================================================
   NetRadar.io design tokens (values from the Webflow "Softkit" stylesheet)
   Breakpoints (Webflow): 991px (tablet), 767px (mobile landscape), 479px (mobile)
   ========================================================================== */
:root {
  /* brand palette */
  --primary: #53fdca;
  --secondary: #44dbae;
  --primary-dark: #31bd93;
  --black: #121212;
  --dark: #1f1f1f;
  --dark-grey: #252525;
  --grey: #676e73;
  --light-grey: #8a8f98;
  --light: #f6f6f6;
  --white: #ffffff;
  --yellow: #eeb524;
  --grey-helper: #e7e7e7;

  /* accessible accent variants for text on light backgrounds (WCAG AA):
     large text (headings) >= 3:1, small text (eyebrows, links) >= 4.5:1 – on BOTH white and --light.
     --accent-large-on-light was #26a37d (2.94 on --light); #259d78 is the same mint hue a touch darker:
     3.40 on white, 3.15 on --light. */
  --accent-large-on-light: #259d78;
  --accent-small-on-light: #1a7f5f;

  /* neutrals outside the Webflow palette */
  --grey-helper-dark: #333333;   /* --border on tone-dark / tone-dark-grey (the dark counterpart of --grey-helper) */
  --charcoal: #363838;           /* illustration charcoal (docs/images.md): boxed tick background (mint tick 9.14:1) */

  /* status colours (text pairs checked in web/styleguide.py) */
  --error: #c9302c;              /* error text on white / light: 5.33 / 4.93 */
  --error-on-dark: #ff8a80;      /* error text on dark tones: >= 6.71 */
  --error-border: #d9534f;       /* invalid input border, error summary rule */
  --error-tint: rgba(217, 83, 79, .1);
  --success-tint: rgba(49, 189, 147, .15);
  --info: #5b9bd5;               /* "note" callout rule */
  --info-tint: rgba(91, 155, 213, .1);
  --warning-tint: rgba(238, 181, 36, .12);

  /* tints and overlays */
  --accent-tint: rgba(83, 253, 202, .1);    /* plain blockquote */
  --badge-bg: rgba(83, 253, 202, .12);      /* eyebrow badge on dark tones */
  --badge-bg-on-light: #e5faf4;             /* eyebrow badge on white/light: opaque (≈ 14 % mint on white), so the
                                               --accent-small-on-light text keeps 4.55:1 on either light tone */
  --halo: rgba(68, 219, 174, .2);           /* timeline dot ring */
  --ghost: rgba(255, 255, 255, .05);        /* ghost button, arrow-button label, nav toggle hover (dark only) */
  --ghost-faint: rgba(255, 255, 255, .03);  /* nav card background (dark only) */
  --overlay: rgba(18, 18, 18, .6);          /* control on top of a photo/video (video pause button) */
  --overlay-strong: rgba(18, 18, 18, .85);
  --muted-on-accent: rgba(18, 18, 18, .75); /* muted text on --primary-dark (CTA band accent): 5.04 */

  /* code (always on --dark / --black) */
  --code-text: #e8e8e8;
  --code-key: #7aa7ff;
  --code-string: var(--primary);
  --code-function: var(--yellow);
  --code-number: #ff9e7a;
  --code-comment: var(--light-grey);        /* 5.07 on --dark (was --grey, 3.18) */
  --code-line: var(--grey);                 /* line numbers, aria-hidden decoration: 3.18 on --dark (>= 3:1) */

  /* fonts */
  --font-sans: "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-code: "Inconsolata", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* type scale (desktop; reduced in base.css media queries) */
  --fs-h1: 60px;
  --fs-h2: 52px;
  --fs-h3: 46px;
  --fs-h4: 36px;
  --fs-h5: 28px;
  --fs-h6: 20px;
  --fs-body: 18px;
  --fs-lead: 22px;
  --fs-medium: 16px;
  --fs-small: 14px;
  --fs-xsmall: 12px;
  --lh-body: 1.6;
  --lh-heading: 1.1;
  --tracking: .4px;
  --tracking-mono: 1px;

  /* spacing (8px grid; Webflow used 10/20/40/60/80) */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 20px;
  --space-4: 30px;
  --space-5: 40px;
  --space-6: 60px;
  --space-7: 80px;
  --space-8: 120px;
  --section-y: 80px;
  --gutter: 40px;          /* container side padding */
  --grid-gap: 20px;

  /* layout */
  --container: 1280px;     /* incl. side padding -> 1200px content */
  --container-narrow: 900px;
  --container-text: 760px;
  --header-h: 63px;

  /* shape & depth */
  --radius-sm: 4px;
  --radius: 7px;
  --shadow-card: 0 0 50px rgba(18, 18, 18, .05);
  --shadow-raised: 0 5px 30px rgba(18, 18, 18, .15);
  --shadow-tile: 0 0 30px rgba(18, 18, 18, .1);       /* framed video tiles (om-os) */
  --shadow-dropdown: 0 30px 40px rgba(0, 0, 0, .35);  /* product mega-dropdown below the black header */
  --transition: .2s ease;
  --focus-ring: 0 0 0 3px rgba(83, 253, 202, .65);

  --z-header: 1000;
}

@media (max-width: 991px) {
  :root {
    --fs-h1: 52px;
    --fs-h2: 46px;
    --fs-h3: 36px;
    --fs-h4: 28px;
    --fs-h5: 22px;
    --fs-h6: 18px;
    --fs-body: 16px;
    --fs-lead: 20px;
    --section-y: 60px;
    --gutter: 20px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 46px;
    --fs-h2: 38px;
    --fs-h3: 32px;
    --fs-h4: 26px;
    --section-y: 48px;
  }
}

@media (max-width: 479px) {
  :root {
    --fs-h1: 42px;
    --fs-h2: 34px;
    --fs-h3: 30px;
    --fs-h4: 24px;
    --fs-h5: 21px;
    --fs-lead: 18px;
    --section-y: 40px;
    --gutter: 16px;
  }
}