/* ============================================================
   LOUPE — BRAND CONFIG  ·  ONE OF THE 3 THINGS YOU CHANGE
   ------------------------------------------------------------
   Swap these values to re-theme the entire product (marketing
   site + workspace) at once. Both site/index.html and
   workspace/index.html link to this file, so every surface
   updates from here.

   To re-brand a new business: change --accent*, the fonts, and
   the radii if you want. Leave the structural tokens (surfaces,
   text, glass) unless you're moving away from the dark-glass look.
   ============================================================ */

:root {
  /* ===== ACCENT — Loupe brand colours (matched to styloupe.com) ===== */
  /* Primary: Loupe lime — the dominant action + highlight colour. Buttons are
     lime with DARK text. This is the site's signature "designed for impact" pop. */
  --accent:       #D9EB37;     /* primary accent — lime */
  --accent-soft:  #E8F27F;     /* lighter lime — highlights, links */
  --accent-deep:  #AEBE1E;     /* deeper olive-lime — gradient ends, pressed */
  --accent-rgb:   217,235,55;  /* same colour as rgb() for translucent layers */

  /* Secondary: periwinkle-violet — the wordmark + supporting accent. */
  --accent-2:      #6667AB;
  --accent-2-rgb:  102,103,171;
  --accent-2-soft: #8B8CCF;  /* lighter violet for small TEXT — AA 5.2:1 on bg (the base #6667AB is only 3.1:1) */

  /* ===== BASE / SURFACES (warm charcoal — styloupe.com) ===== */
  --bg:             #212121;   /* page background */
  --bg-2:           #262626;   /* slightly raised background */
  --surface:        rgba(255,255,255,0.05);   /* raised panel fill */
  --surface-strong: rgba(255,255,255,0.075);  /* stronger panel fill */

  /* ===== TEXT ===== */
  --text:       #FFFFFF;
  --text-muted: rgba(255,255,255,0.62);
  --text-faint: rgba(255,255,255,0.50);  /* raised from .42 → AA: 5.0:1 on bg, 4.7:1 on surface (WCAG 1.4.3) */

  /* ===== LINES / GLASS ===== */
  --glass-border:        rgba(255,255,255,0.10);
  --glass-border-strong: rgba(255,255,255,0.18);
  --hairline:            rgba(217,235,55,0.14); /* faint lime-tinted divider */

  /* ===== SEMANTIC (status only — don't use as brand colour) ===== */
  --green: #2DD4A7;   /* strong / pass / positive */
  --amber: #F5A524;   /* mixed / caution */
  --red:   #FF5C7A;   /* weak / fail / risk */

  /* ===== TYPE ===== */
  --font-heading: 'Montserrat', 'Inter', sans-serif;
  --font-body:    'Montserrat', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ===== SHAPE ===== */
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-card: 18px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ===== LAYOUT ===== */
  --maxw: 1120px;

  /* ===== MOTION ===== */
  --ease:   cubic-bezier(0.6, 0.6, 0, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===== GLASS RECIPE (reuse on cards/panels) ===== */
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 24px 64px rgba(0,0,0,0.45);
  --glass-blur:   blur(16px) saturate(1.3);              /* the standard glass backdrop-filter */
  --glass-hi:     inset 0 1px 0 rgba(255,255,255,0.14);  /* top-edge highlight line */
}

/* Load fonts once (each page also includes this link as a fallback). */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');