/* ==========================================================================
   COMPOUND MATRIX - DESIGN TOKENS & SYSTEM VARIABLES (v4.0 — WebTonic Elevated)
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     CANVAS & SURFACE PALETTE
     -------------------------------------------------------------------------- */
  --bg-canvas: #040810;
  --bg-canvas-gradient: linear-gradient(180deg, #040810 0%, #081B2B 18%, #051320 38%, #091C28 62%, #081726 82%, #02050A 100%);
  --bg-surface: #0E1524;
  --bg-surface-elevated: #131E33;
  --bg-surface-card: rgba(14, 21, 36, 0.68);
  --bg-surface-glass: rgba(10, 16, 28, 0.78);
  --bg-input: #080D18;
  --bg-input-focus: #0F172A;

  /* Text Hierarchy */
  --text-primary: #FFFFFF;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --text-muted: #475569;
  --text-accent: #2CAD75;
  --text-orange: #FF6B35;
  --text-inverse: #05080E;

  /* Brand Accents */
  --brand-green: #2CAD75;
  --brand-green-subtle: rgba(44, 173, 117, 0.12);
  --brand-green-glow: rgba(44, 173, 117, 0.45);

  --accent-orange: #FF6B35;
  --accent-orange-subtle: rgba(255, 107, 53, 0.12);
  --accent-orange-glow: rgba(255, 107, 53, 0.45);
  --accent-blue: #3B82F6;
  --accent-purple: #8B5CF6;
  --accent-pink: #EC4899;
  --accent-gold: #F59E0B;

  /* Holographic Gradients */
  --gradient-rainbow-arc: conic-gradient(
    from 180deg at 50% 50%,
    #2CAD75 0deg,
    #3B82F6 90deg,
    #8B5CF6 180deg,
    #EC4899 260deg,
    #FF6B35 320deg,
    #2CAD75 360deg
  );
  --gradient-holo-text: linear-gradient(135deg, #2CAD75 0%, #3B82F6 45%, #EC4899 75%, #FF6B35 100%);
  --gradient-btn-primary: linear-gradient(135deg, #2CAD75 0%, #1DA366 100%);
  --gradient-btn-shine: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);

  /* Subtle Borders */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-medium: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.24);
  --border-brand: rgba(44, 173, 117, 0.48);
  --border-orange: rgba(255, 107, 53, 0.45);

  /* Inner light rim — top-left corner glow on glass cards */
  --border-rim-light: inset 0 1px 0 rgba(255,255,255,0.10), inset 1px 0 0 rgba(255,255,255,0.05);

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Spacing Scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* Layout */
  --container-max: 1240px;
  --header-height: 76px;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 12px 40px -10px rgba(0, 0, 0, 0.65), var(--border-rim-light);
  --shadow-card-hover: 0 20px 60px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(44,173,117,0.25), var(--border-rim-light);
  --shadow-modal: 0 40px 100px -16px rgba(0, 0, 0, 0.92), var(--border-rim-light);
  --shadow-glow: 0 0 50px rgba(44, 173, 117, 0.28);
  --shadow-glow-blue: 0 0 50px rgba(59, 130, 246, 0.22);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 420ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-Index */
  --z-bg: -2;
  --z-ambient: -1;
  --z-base: 1;
  --z-header: 100;
  --z-modal-backdrop: 200;
  --z-modal: 210;
  --z-toast: 300;
}