/* ==========================================================================
   GENERATED FILE. DO NOT EDIT.
   Produced from css/dark.css by tools/build.py. Every selector is scoped
   to :root[data-theme="dark"] so the header's theme toggle can force the
   dark theme on regardless of the operating-system setting, without the
   page flashing light on first paint.
   Edit css/dark.css instead, then re-run: python3 tools/build.py
   ========================================================================== */

/* ==========================================================================
   Reantis Pharmaceuticals dark theme
   --------------------------------------------------------------------------
   Every dark-mode rule lives here, written ONCE. This is the file to edit.

   It reaches the page by two routes:

   1. <link href="css/dark.css" media="(prefers-color-scheme: dark)">
      Applies automatically when the visitor's operating system is set to
      dark. Because the media query matches, the browser treats it as
      render-blocking, so the page is dark from the very first frame. This also
      means dark mode still works with JavaScript switched off.

   2. css/dark-forced.css, a GENERATED copy of this file with every selector
      scoped to :root[data-theme="dark"]. It is always loaded, so when the
      header toggle forces dark on a light-themed computer the rules are
      already parsed and there is no flash of white.

   After editing this file, run  python3 tools/build.py  to regenerate
   css/dark-forced.css. Never edit that file by hand.
   ========================================================================== */

:root[data-theme="dark"]{ color-scheme: dark; }

:root[data-theme="dark"]{
  /* brand */
  --navy:        #98a0f0;   /* links, eyebrows, stat figures  */
  --navy-600:    #b3b8f6;   /* hover: lighter, not darker     */
  --navy-700:    #c6cbfb;   /* text on tinted blue chips      */
  --brand-solid: #4a52c4;   /* solid brand behind white text  */
  --ink:         #f2f4fb;   /* headings                       */
  --ink-soft:    #d4daf0;
  --red-ink:     #ff6b6e;   /* red as a foreground colour     */
  --sky:         #56b8e8;
  --sky-soft:    rgba(86,184,232,.15);

  /* neutrals */
  --bg:          #0b0f1e;
  --surface:     #151b30;
  --surface-tr:  rgba(11,15,30,.86);
  --paper:       #141a30;
  --paper-2:     #1c2340;
  --footer-bg:   #070a15;
  --line:        #262e4a;
  --line-strong: #3b4568;
  --text:        #e4e8f4;
  --text-muted:  #a8afc8;
  --text-faint:  #8d95b0;

  /* shadows read as depth, not as grey haze, on a dark ground */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-lg: 0 28px 60px -20px rgba(0, 0, 0, .8), 0 4px 12px rgba(0, 0, 0, .4);
}

:root[data-theme="dark"] /* hero: cool dark wash rather than the light blue gradient */
.hero{
  background:
    radial-gradient(90rem 40rem at 88% -10%, rgba(30,154,214,.20), transparent 62%),
    radial-gradient(70rem 36rem at -8% 8%, rgba(74,82,196,.26), transparent 58%),
    linear-gradient(180deg, #0d1223 0%, #0a0e1b 100%);
}
:root[data-theme="dark"] .hero::after{
  background-image:
    linear-gradient(rgba(152,160,240,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(152,160,240,.07) 1px, transparent 1px);
}
:root[data-theme="dark"] .hero h1 .accent{
  background: linear-gradient(100deg, #a2a9f5 15%, #6ec8f2 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

:root[data-theme="dark"] /* buttons */
.btn--primary{ box-shadow: 0 6px 18px -8px rgba(0,0,0,.8); }
:root[data-theme="dark"] .btn--primary:hover{ background: #5b63d8; }
:root[data-theme="dark"] .btn--accent{ box-shadow: 0 6px 18px -8px rgba(0,0,0,.8); }
:root[data-theme="dark"] .btn--accent:hover{ background: #f0393c; }
:root[data-theme="dark"] .btn--ghost:hover{ border-color: var(--navy); color: var(--navy); }

:root[data-theme="dark"] /* the amber "note" panel */
.note{ background: #241d0c; border-color: #4b3d17; color: #f0d79b; }
:root[data-theme="dark"] .note strong{ color: #ffe6ad; }

:root[data-theme="dark"] /* about-page pull quote */
.pull-quote{
  background: linear-gradient(135deg, rgba(86,184,232,.10), rgba(74,82,196,.14));
  border-color: #2e3757;
}

:root[data-theme="dark"] /* The product scans have light backgrounds of their own,
:root[data-theme="dark"] so they read fine
   on a dark page. Google's map embed has no dark variant,
:root[data-theme="dark"] so dim it a touch
   instead of letting it glare. */
.map-frame iframe{ filter: brightness(.86) saturate(.92); }
:root[data-theme="dark"] .prod-card__img{ background: var(--paper-2); }

:root[data-theme="dark"] /* form controls */
.search-field input::placeholder{ color: var(--text-faint); }
:root[data-theme="dark"] .select-field select{ color: var(--text); }
:root[data-theme="dark"] .search-field input:focus,
:root[data-theme="dark"] .select-field select:focus{ box-shadow: 0 0 0 4px rgba(152,160,240,.22); }

:root[data-theme="dark"] /* the footer sits below the page background,
:root[data-theme="dark"] so lift its rules a little */
.site-footer{ border-top: 1px solid var(--line); }

/* logo swap is handled in the HTML with <picture media="..."> */