/**
 * AssetOps Design Tokens v3.6.0
 * [REF-TOKENS-00]
 *
 * TPN Brand Palette:
 *   Cyan    #00DCC8   (WCAG: use with Deep Navy text — 7.82:1 ✅ AAA)
 *   Purple  #7B3FFF   (WCAG: white text — 5.25:1 ✅ AA)
 *   Navy    #1D2D50   (WCAG: white text — 13.61:1 ✅ AAA)
 *
 * RULE: gradient linear-gradient(135deg,#00DCC8,#7B3FFF) is DECORATION ONLY.
 * Never place text directly over the gradient midpoint — contrast fails at 3.15:1.
 */
:root {
  /* ── TPN Brand ──────────────────────────────────────────────────────── */
  --tpn-cyan:        #00DCC8;
  --tpn-cyan-dark:   #00A896;   /* for text on light bg: 4.61:1 on white */
  --tpn-purple:      #7B3FFF;   /* white text: 5.25:1 ✅ AA */
  --tpn-purple-dim:  rgba(123,63,255,0.12);
  --tpn-navy:        #1D2D50;   /* white text: 13.61:1 ✅ AAA */
  --tpn-navy-mid:    #2A3F6F;
  --tpn-grad:        linear-gradient(135deg, #00DCC8 0%, #7B3FFF 100%);

  /* ── Portal accent (overridden by Elementor or branding) ─────────────── */
  --ao-accent:        var(--tpn-cyan);
  --ao-accent-hover:  var(--tpn-cyan-dark);
  --ao-nav-bg:        var(--tpn-navy);

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --ao-page-bg:       #F0F4F8;
  --ao-surface:       #FFFFFF;
  --ao-surface-alt:   #F8F9FC;
  --ao-surface-hover: #F0F4F8;
  --ao-bg-hover:      #F0F4F8;

  /* ── Status ───────────────────────────────────────────────────────────── */
  --ao-success:       #00C97A;
  --ao-success-dim:   #D1FAE5;
  --ao-info:          #3B7FFF;
  --ao-info-dim:      #DBEAFE;
  --ao-danger:        #EF4444;
  --ao-danger-dim:    #FEE2E2;
  --ao-warn:          #F59E0B;
  --ao-warn-dim:      #FEF3C7;

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --ao-text-1:        #1D2D50;   /* Deep Navy — 13.61:1 on white ✅ AAA */
  --ao-text-2:        #4A5568;
  --ao-text-3:        #6B7B9A;
  --ao-text-muted:    #6B7B9A;

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --ao-border:        #E4E8F0;
  --ao-border-strong: #CBD2E0;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --ao-font-sans:  'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ao-font-mono:  'IBM Plex Mono', 'Courier New', monospace;

  /* ── Additional brand vars used in JS-injected HTML ─────────────────── */
  --ao-purple:        #7B3FFF;
  --ao-purple-dim:    rgba(123,63,255,0.12);
  --ao-purple-text:   #6430D4;
  --ao-cyan:          #00DCC8;
  --ao-navy:          #1D2D50;
  --ao-surface-3:     #EFF2F7;
  --ao-surface-hover-strong: #E8EDF4;

  /* ── Button overrides ─────────────────────────────────────────────────── */
  --ao-btn-text:    #1D2D50;   /* Deep Navy on Cyan — 7.82:1 ✅ AAA */
  --ao-btn-radius:  10px;
  --ao-logo-width:  200px;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --ao-radius-sm:  6px;
  --ao-radius:     12px;
  --ao-radius-lg:  16px;
  --ao-portal-max: 100%;
  --ao-gap:        16px;
  --ao-transition: all 0.15s ease;
  --ao-shadow-sm:  0 1px 3px rgba(29,45,80,.08), 0 1px 2px rgba(29,45,80,.05);
  --ao-shadow-md:  0 4px 14px rgba(29,45,80,.1);
  --ao-shadow-lg:  0 8px 32px rgba(29,45,80,.14);
}