/* ==========================================================================
   DEFION Design System tokens — landing pages
   Source: /Users/hruijs/DEFION Design System/colors_and_type.css (brandbook v2.0)
   Self-hosted from /assets/fonts/. Drop-in shared sheet for every LP.

   Why these tokens are loaded as a SEPARATE stylesheet:
     - Each LP still has its own embedded <style> with :root overrides for
       legacy reasons. This sheet is loaded BEFORE the inline block so the
       inline block can still override per page where intentional.
     - All :hover/active/glass colors should reference these tokens going
       forward; over time the per-page :root blocks shrink to nothing.

   Key brand rules (do NOT break):
     - never pure #fff for section backgrounds → use --off-white #F2F2F0
     - --electric #3351FF is a SPOTLIGHT — CTAs, links, focus rings only
     - 60%+ dark on hero/header band; light-first elsewhere
     - headings: weight 500, sentence case, letter-spacing -0.015..-0.02em
   ========================================================================== */

/* ── Webfonts (self-hosted) ── */
@font-face { font-family:'ABCDiatype'; src:url('/assets/fonts/ABCDiatype-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'ABCDiatype'; src:url('/assets/fonts/ABCDiatype-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'ABCDiatype Semi-Mono'; src:url('/assets/fonts/ABCDiatypeSemi-Mono-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'ABCDiatype Semi-Mono'; src:url('/assets/fonts/ABCDiatypeSemi-Mono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'ABCDiatypeSemiMono'; src:url('/assets/fonts/ABCDiatypeSemi-Mono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } /* legacy alias */

:root {
  /* ---------- PRIMARY PALETTE ---------- */
  --ink-logo:      #0a0632;
  --marine:        #070033;   /* Hero, dark bg, ink text */
  --marine-deep:   #29058E;
  --blue:          #3351FF;   /* Electric — primary CTA */
  --electric:      #3351FF;
  --electric-soft: #ADB4F7;
  --purple:        #6040FF;
  --violet:        #9113EA;
  --magenta:       #F615FF;

  /* ---------- SECONDARY / TINTS ---------- */
  --lightblue:     #A3C3FF;
  --lila:          #ADB4F7;
  --lavender:      #CAA1FA;
  --off-white:     #F2F2F0;   /* NEVER pure #fff for sections */
  --lightgray:     #D1D3D1;

  /* ---------- SEMANTIC ALIASES ---------- */
  --ink:           #070033;
  --ink-90:        #1a1547;
  --ink-70:        #3d3666;

  /* ---------- RAW SURFACES (literal) ---------- */
  --surface-dark:  #070033;
  --surface-mid:   #0d0a2e;
  --surface-muted: #F2F2F0;
  --surface-white: #ffffff;

  /* ---------- LIGHT THEME (default — 70%) ---------- */
  --surface:        #F2F2F0;
  --surface-card:   #ffffff;
  --surface-alt:    #E8E8E5;
  --surface-sunken: #DCDBD7;

  --text:           #070033;
  --text-strong:    #070033;
  --text-muted:     #3d3666;
  --text-subtle:    #6b7280;

  --border:         rgba(7, 0, 51, 0.10);
  --border-strong:  rgba(7, 0, 51, 0.18);
  --divider:        rgba(7, 0, 51, 0.06);

  --glass-bg:       rgba(7, 0, 51, 0.04);
  --glass-border:   rgba(7, 0, 51, 0.08);
  --glass-hover:    rgba(7, 0, 51, 0.08);

  /* Back-compat aliases */
  --text-on-dark:   #ffffff;
  --text-on-light:  #070033;
  --text-body:      #3d3666;
  --grey:           #595f6b;
  --grey-light:     #e5e7eb;
  --white:          #ffffff;
  --purple-light:   #A3C3FF;       /* legacy var name → maps to lightblue */
  --blue-accent:    #3351FF;       /* legacy var name → maps to electric */
  --accent:         #3351FF;       /* legacy var name → maps to electric */

  /* ---------- STATUS / SERVICE COLORS ---------- */
  --danger:        #dc2626;
  --success:       #16a34a;
  --green:         #16a34a;
  --red:           #dc2626;

  --c-advisory:    #ADB4F7;
  --c-pentest:     #F97316;
  --c-mdr:         #22C55E;
  --c-dfir:        #EF4444;
  --c-bcdr:        #3351FF;

  /* ---------- GRADIENTS ---------- */
  --grad-accent:   linear-gradient(90deg, #3351FF, #6040FF, #F615FF);
  --grad-hero:     linear-gradient(135deg, #070033 0%, #0d0050 40%, #29058E 75%, #3a0a9e 100%);
  --grad-stat:     linear-gradient(135deg, #3351FF, #6040FF);

  /* ---------- TYPOGRAPHY ---------- */
  --font:          'ABCDiatype', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:     'ABCDiatype', 'Inter', system-ui, -apple-system, sans-serif;
  --mono:          'ABCDiatype Semi-Mono', 'JetBrains Mono', 'Courier New', monospace;
  --font-mono:     'ABCDiatype Semi-Mono', 'JetBrains Mono', 'Courier New', monospace;

  /* ---------- SHADOWS ---------- */
  --shadow-card-rest:  0 1px 3px rgba(7, 0, 51, 0.04);
  --shadow-card-hover: 0 8px 24px rgba(7, 0, 51, 0.08);

  /* ---------- RADII ---------- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------- LAYOUT ---------- */
  --section-pad-y:    4.5rem;
  --section-pad-y-lg: 7rem;
  --container-max:    1280px;
}

/* ==========================================================================
   DARK THEME — punctuation. Add data-theme="dark" to any wrapper.
   ========================================================================== */
[data-theme="dark"] {
  --surface:        #070033;
  --surface-card:   #0d0a2e;
  --surface-alt:    #1a1547;
  --surface-sunken: #05002a;

  --text:           #ffffff;
  --text-strong:    #ffffff;
  --text-muted:     rgba(255, 255, 255, 0.72);
  --text-subtle:    rgba(255, 255, 255, 0.52);

  --border:         rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --divider:        rgba(255, 255, 255, 0.08);

  --glass-bg:       rgba(255, 255, 255, 0.04);
  --glass-border:   rgba(255, 255, 255, 0.08);
  --glass-hover:    rgba(255, 255, 255, 0.08);

  --shadow-card-rest:  0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.45);
}