/* ============================================================
 * GuardianGaze shared theme layer
 * ------------------------------------------------------------
 * Single source of truth for design tokens across the marketing
 * website (root landing page + static pages) and the Enterprise
 * app (`/enterprise`). Mirrors the product's live design tokens:
 *   - the `.gx-root` scoped style block in the product dashboard
 *     (ModuleRiskDashboard / GuardianGazeDashboard.jsx)
 *   - src/configs/theme.tokens.js (BRAND / RISK)
 *
 * Do not duplicate these values inline anywhere else in either
 * site - reference the custom properties only. If a value needs
 * to change, change it here once.
 *
 * NOT consumed by, and must never leak into, /wp or /blog.
 * ============================================================ */

:root {
  /* -- Surfaces -- */
  --gx-canvas: #f5f6fb;
  --gx-card:   #ffffff;

  /* -- Ink / text hierarchy -- */
  --gx-ink:  #16183a;
  --gx-ink2: #43476e;
  --gx-ink3: #8d92b4;

  /* -- Borders -- */
  --gx-line: #e9eaf3;

  /* -- Brand -- */
  --gx-primary:   #6060a6; /* BRAND.primary, theme.tokens.js */
  --gx-navy:      #1a1f4e; /* BRAND.navy, theme.tokens.js - also the canonical theme-color value */
  --gx-navy-deep: #171b45; /* derived: --gx-navy darkened ~12%, for hover/active states on navy surfaces */
  --gx-navy-rgb:      26, 31, 78;  /* rgb triple of --gx-navy, for rgba() shadows/glows without re-hardcoding hex */
  --gx-primary-rgb:   96, 96, 166; /* rgb triple of --gx-primary, for rgba() tints without re-hardcoding hex */

  /* -- Typography --
     Reverted per direct request: keep the site's original editorial pairing
     (Fraunces display serif + Inter body) rather than the product's
     system-ui fallback. */
  --gx-display: 'Fraunces', Georgia, serif;
  --gx-body:    'Inter', system-ui, sans-serif;
  --gx-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Fluid marketing display sizes (proposed addition - the dashboard's
     largest heading is ~28px; the site needs true hero/section scale).
     Same font, same weight/letter-spacing discipline, larger steps only. */
  --gx-text-hero: clamp(2.5rem, 5vw, 4rem);     /* ~40-64px */
  --gx-text-h1:   clamp(2rem, 3.5vw, 2.75rem);  /* ~32-44px */
  --gx-text-h2:   clamp(1.5rem, 2.5vw, 2rem);   /* ~24-32px */

  /* -- Elevation -- */
  --gx-shadow-sm: 0 1px 2px rgba(22, 24, 58, 0.04), 0 8px 24px -16px rgba(22, 24, 58, 0.18);
  --gx-shadow:    0 1px 2px rgba(22, 24, 58, 0.05), 0 22px 48px -24px rgba(22, 24, 58, 0.22);

  /* -- Card / panel grammar (product's Panel primitive) -- */
  --gx-radius-card: 20px;
  --gx-radius-btn:  11px;
  --gx-radius-pill: 6px;

  /* -- Module identity colors (MODULE_COLOR, theme.tokens.js) --
     The product's per-module accent palette, used for module icons/nav
     tiles in the real dashboard (MODULE_META). Deliberately a cohesive
     cool/on-brand family, not a rainbow - keep it that way. Do NOT use
     theme.tokens.js's separate CHART palette here; that one is for
     data-viz series, not module identity. */
  --gx-module-brand:       #6060a6; /* Brand Protection */
  --gx-module-domain:      #1a1f4e; /* Domain Security */
  --gx-module-appsec:      #4338ca; /* Application Security */
  --gx-module-network:     #5b6bb5; /* Network Security */
  --gx-module-cloud:       #7c5cbf; /* Cloud Security */
  --gx-module-compliance:  #8a8fc7; /* Compliance */

  /* -- Semantic / risk tokens --
     Data only (severity badges, compliance status). Never used
     decoratively on marketing copy or section backgrounds. */
  --gx-risk-healthy:      #16a34a;
  --gx-risk-healthy-tint: #dcfce7;
  --gx-risk-low:          #84cc16;
  --gx-risk-low-tint:     #f7fee7;
  --gx-risk-medium:       #ca8a04;
  --gx-risk-medium-tint:  #fef9c3;
  --gx-risk-high:         #c13737;
  --gx-risk-high-tint:    #fee2e2;
  --gx-risk-critical:     #b91c1c;
  --gx-risk-critical-tint:#fee2e2;
  --gx-risk-neutral:      #6b7280;
  --gx-risk-neutral-tint: #f3f4f6;
}