/* Beelogic design tokens (brand kit v2). Light is the default; dark follows the visitor's system setting
   and can be forced with <html data-theme="dark">. Import once, globally. */
:root{
  /* brand */
  --bl-teal:#04828E;      /* primary: comb, links, headings accents on white */
  --bl-cyan:#00AAD3;      /* signal: circuit, large fills. Not for small text on white (2.7:1) */
  --bl-ink:#01232B;       /* text and wordmark on light */
  --bl-night:#06161C;     /* dark background */
  --bl-lift:#2AD4FF;      /* comb and accents on Night (10.5:1) */
  --bl-muted:#4F6A73;     /* secondary text on white (5.8:1) */
  --bl-wash:#F3F9FA;      /* panels, alternate sections */
  --bl-line:#DCE8EC;      /* hairlines, borders */

  /* semantic, light */
  --bg:#FFFFFF; --bg-alt:var(--bl-wash); --surface:#FFFFFF;
  --text:var(--bl-ink); --text-muted:var(--bl-muted); --border:var(--bl-line);
  --accent:var(--bl-teal); --accent-strong:#036B75;
  --btn-bg:var(--bl-ink); --btn-text:#FFFFFF; --btn2-text:var(--bl-teal);
  --focus:var(--bl-cyan);
  /* logo + motion inks */
  --mark-comb:var(--bl-teal); --mark-circuit:var(--bl-cyan); --mark-die:var(--bl-cyan); --mark-word:var(--bl-ink);
  --signal:#FFFFFF; --signal-glow:var(--bl-cyan); --cell-flash:var(--bl-cyan);
  --pattern:var(--bl-teal); --pattern-opacity:.10;

  /* type */
  --font-display:"Alexandria","Readex Pro","Segoe UI",Tahoma,system-ui,sans-serif;
  --font-body:"Readex Pro","Segoe UI",Tahoma,system-ui,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;
  --fs-display:clamp(2.1rem,1.3rem + 3.2vw,3.6rem);  /* hero h1, letter-spacing -0.02em, line-height 1.08 */
  --fs-h2:clamp(1.5rem,1.1rem + 1.5vw,2.1rem);
  --fs-h3:1.25rem; --fs-body:1rem; --fs-small:.875rem;
  --lh-body:1.6; --lh-body-ar:1.8;

  /* shape */
  --radius-sm:8px; --radius:12px; --radius-lg:16px;
  --shadow:0 18px 44px -28px rgba(1,35,43,.45);
  --space-section:clamp(48px,8vw,104px);
  --container:1200px;

  /* motion */
  --signal-duration:2.4s;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--bl-night); --bg-alt:#0A2028; --surface:#0C252D;
    --text:#E6F3F6; --text-muted:#8FB0B9; --border:#17363F;
    --accent:var(--bl-lift); --accent-strong:#7FE6FF;
    --btn-bg:var(--bl-lift); --btn-text:#04222B; --btn2-text:var(--bl-lift);
    --mark-comb:var(--bl-lift); --mark-circuit:#FFFFFF; --mark-die:#FFFFFF; --mark-word:#E6F3F6;
    --signal:#FFFFFF; --signal-glow:var(--bl-lift); --cell-flash:#FFFFFF;
    --pattern:#1BB8E0; --pattern-opacity:.30;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--bl-night); --bg-alt:#0A2028; --surface:#0C252D;
  --text:#E6F3F6; --text-muted:#8FB0B9; --border:#17363F;
  --accent:var(--bl-lift); --accent-strong:#7FE6FF;
  --btn-bg:var(--bl-lift); --btn-text:#04222B; --btn2-text:var(--bl-lift);
  --mark-comb:var(--bl-lift); --mark-circuit:#FFFFFF; --mark-die:#FFFFFF; --mark-word:#E6F3F6;
  --signal:#FFFFFF; --signal-glow:var(--bl-lift); --cell-flash:#FFFFFF;
  --pattern:#1BB8E0; --pattern-opacity:.30;
  color-scheme:dark;
}
html{background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:var(--lh-body)}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:var(--fw-semibold);text-wrap:balance}
:lang(ar){line-height:var(--lh-body-ar)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}