/* ============================================================
   BrowserProbe — Design Tokens
   ------------------------------------------------------------
   Built ON the Meritin brand foundation (deep navy base + the
   modern, high-tech vibe) but BrowserProbe takes its own accent:
   a deep TEAL / CYAN identity — trustworthy, technical and
   privacy-minded, a better fit for a diagnostics/security tool
   than purple. Light-first with a full dark theme. WCAG 2.2 AA.

   THEMES
     :root              → light (default)
     :root[data-theme="dark"] → dark
     Toggle persists via BP.initTheme() (localStorage 'bp-theme').

   WHITE-LABEL CONTRACT
     Enterprises override ONLY the --bp-brand-* group + --bp-grad
     + --bp-radius + the logo slot. Semantic state colors
     (pass/warn/fail) are LOCKED so results stay trustworthy.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&family=Inter:ital,opsz,wght@0,14..32,400..700;1,14..32,400..600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND (themeable) — teal/cyan ---------- */
  --bp-brand:        #0E7490;  /* primary action — white text AA ~4.9:1 */
  --bp-brand-hover:  #0C657C;  /* hover (slightly deeper) — AA ~5.6:1 */
  --bp-brand-2:      #0AA2C2;  /* highlight cyan (gradient end / accents) */
  --bp-brand-strong: #0B5A72;  /* deep teal (active / strong) */
  --bp-brand-ink:    #0B5E74;  /* brand-colored TEXT on light (AA ~5.4:1) */
  --bp-brand-soft:   #DEF1F6;  /* tinted brand surface */
  --bp-brand-softer: #EFF8FA;
  --bp-brand-border: #B6DEE8;
  --bp-on-brand:     #FFFFFF;  /* text/icon on brand fill */
  --bp-grad:         linear-gradient(115deg, #0E7490 0%, #0AA2C2 100%);
  --bp-grad-deep:    linear-gradient(130deg, #062A45 0%, #0E7490 60%, #0AA2C2 100%);

  /* ---------- NEUTRALS (cool, slightly teal-tinted) ---------- */
  --bp-bg:        #F1F6F8;  /* page background */
  --bp-surface:   #FFFFFF;  /* cards / panels */
  --bp-surface-2: #E8F0F3;  /* nested / track / hover surface */
  --bp-fg:        #0C1F2B;  /* primary text (AA ~15:1 on white) */
  --bp-fg-muted:  #46606B;  /* secondary text (AA ~6.4:1) */
  --bp-fg-subtle: #67808A;  /* tertiary / captions (AA ~4.6:1) */
  --bp-border:    #DCE7EB;  /* hairline */
  --bp-border-2:  #C4D5DB;  /* stronger divider */
  --bp-ring:      rgba(14,116,144,0.34);
  --bp-nav-bg:    rgba(241,246,248,0.85);
  --bp-skel-a:    #E8F0F3;
  --bp-skel-b:    #d7e4e9;

  /* ---------- SEMANTIC STATE (LOCKED — never theme) ---------- */
  --bp-pass:        #18804F; --bp-pass-strong: #12774A; --bp-pass-soft: #E3F6EC; --bp-pass-border: #A6E0C4;
  --bp-warn:        #8A5300; --bp-warn-strong: #B87214; --bp-warn-soft: #FBF0D6; --bp-warn-border: #F0D49A;
  --bp-fail:        #C0273F; --bp-fail-strong: #B7253C; --bp-fail-soft: #FCE7EB; --bp-fail-border: #F2B6C0;
  --bp-info:        var(--bp-brand-ink); --bp-info-soft: var(--bp-brand-soft);

  /* ---------- TYPE ---------- */
  --bp-font-display: 'Josefin Sans', 'Century Gothic', sans-serif;
  --bp-font:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bp-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --bp-t-display: clamp(2.2rem, 4.4vw, 3.6rem); /* @kind other */
  --bp-t-h1:      clamp(1.85rem, 3.2vw, 2.6rem); /* @kind other */
  --bp-t-h2:      clamp(1.45rem, 2.4vw, 1.95rem); /* @kind other */
  --bp-t-h3:      1.3rem;     /* @kind other */
  --bp-t-h4:      1.0625rem;  /* @kind other */
  --bp-t-lg:      1.125rem;   /* @kind other */
  --bp-t-body:    1rem;       /* @kind other */
  --bp-t-sm:      0.875rem;   /* @kind other */
  --bp-t-xs:      0.78rem;    /* @kind other */
  --bp-t-2xs:     0.69rem;    /* @kind other */

  --bp-track-eyebrow: 0.16em; /* @kind other */
  --bp-track-cta:     0.04em; /* @kind other */
  --bp-lh-tight: 1.1;  /* @kind other */
  --bp-lh-snug:  1.3;  /* @kind other */
  --bp-lh-body:  1.62; /* @kind other */

  /* ---------- SPACING (4px base) ---------- */
  --bp-1: 4px;  --bp-2: 8px;  --bp-3: 12px; --bp-4: 16px;
  --bp-5: 20px; --bp-6: 24px; --bp-8: 32px; --bp-10: 40px;
  --bp-12: 48px; --bp-16: 64px; --bp-20: 80px; --bp-24: 96px;

  /* ---------- RADIUS (themeable anchor) ---------- */
  --bp-radius:    14px;
  --bp-r-sm:      calc(var(--bp-radius) - 8px);
  --bp-r-md:      calc(var(--bp-radius) - 4px);
  --bp-r-lg:      var(--bp-radius);
  --bp-r-xl:      calc(var(--bp-radius) + 8px);
  --bp-r-pill:    999px;

  /* ---------- SHADOW ---------- */
  --bp-shadow-xs: 0 1px 2px rgba(12,31,43,0.06);
  --bp-shadow-sm: 0 2px 8px rgba(12,31,43,0.07);
  --bp-shadow-md: 0 8px 24px rgba(12,31,43,0.09);
  --bp-shadow-lg: 0 20px 48px rgba(12,31,43,0.14);
  --bp-shadow-brand: 0 10px 30px rgba(14,116,144,0.26);

  /* ---------- MOTION ---------- */
  --bp-ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --bp-dur:  0.22s;

  --bp-maxw: 1140px;
  color-scheme: light;
}

/* ============================================================
   DARK THEME — deep navy base + brighter cyan accent
   ============================================================ */
:root[data-theme="dark"] {
  --bp-brand:        #0E7490;  /* keep white-text AA on any surface */
  --bp-brand-hover:  #119AB4;
  --bp-brand-2:      #22D3EE;
  --bp-brand-strong: #0B5A72;
  --bp-brand-ink:    #5FE0F2;  /* BRIGHT cyan for brand-colored text on dark (AA ~8:1) */
  --bp-brand-soft:   rgba(34,211,238,0.14);
  --bp-brand-softer: rgba(34,211,238,0.08);
  --bp-brand-border: rgba(34,211,238,0.32);
  --bp-grad:         linear-gradient(115deg, #0E7490 0%, #22D3EE 100%);
  --bp-grad-deep:    linear-gradient(130deg, #041634 0%, #0E7490 58%, #22D3EE 100%);

  --bp-bg:        #03061C;
  --bp-surface:   #0A1130;
  --bp-surface-2: #131B3E;
  --bp-fg:        #EAF1F5;  /* AA ~16:1 on surface */
  --bp-fg-muted:  #A8B6C6;  /* AA ~7:1 */
  --bp-fg-subtle: #7E8DA2;  /* AA ~4.6:1 */
  --bp-border:    rgba(255,255,255,0.10);
  --bp-border-2:  rgba(255,255,255,0.20);
  --bp-ring:      rgba(34,211,238,0.50);
  --bp-nav-bg:    rgba(3,6,28,0.78);
  --bp-skel-a:    #131B3E;
  --bp-skel-b:    #1d2750;

  /* state colors re-tuned for dark surfaces (text lighter, soft = translucent) */
  --bp-pass:        #4ED69A; --bp-pass-strong: #2BB877; --bp-pass-soft: rgba(78,214,154,0.15); --bp-pass-border: rgba(78,214,154,0.32);
  --bp-warn:        #F4C254; --bp-warn-strong: #E0A53A; --bp-warn-soft: rgba(244,194,84,0.15); --bp-warn-border: rgba(244,194,84,0.32);
  --bp-fail:        #FB7E90; --bp-fail-strong: #F2566F; --bp-fail-soft: rgba(251,126,144,0.15); --bp-fail-border: rgba(251,126,144,0.34);

  --bp-shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
  --bp-shadow-sm: 0 2px 10px rgba(0,0,0,0.4);
  --bp-shadow-md: 0 10px 30px rgba(0,0,0,0.5);
  --bp-shadow-lg: 0 24px 60px rgba(0,0,0,0.6);
  --bp-shadow-brand: 0 12px 36px rgba(34,211,238,0.22);

  color-scheme: dark;
}