/* =====================================================
   OXA CODE — CSS Variables
   Dark theme is default; light theme overrides below
   ===================================================== */

:root {
  /* Brand gradient */
  --grad-blue:   #2D8CFF;
  --grad-mid:    #6F42FF;
  --grad-purple: #8A3FFC;
  --glow-blue:   #3D8BFF;
  --glow-purple: #7C4DFF;

  /* Dark backgrounds */
  --bg-0: #030512;
  --bg-1: #05071A;
  --bg-2: #070B24;

  /* Dark text */
  --text-100: #FFFFFF;
  --text-70:  #B8C1D1;
  --text-50:  #8A92A6;

  /* Cards */
  --card-bg:     rgba(255, 255, 255, 0.03);
  --card-border: rgba(255, 255, 255, 0.08);

  /* Navbar */
  --nav-bg-scroll:    rgba(4, 10, 24, 0.84);
  --nav-border-color: rgba(130, 156, 196, 0.11);

  /* Mobile menu */
  --mobile-menu-bg: rgba(4, 10, 24, 0.98);

  /* Process step */
  --process-marker-bg:     #0A0E28;
  --process-marker-border: rgba(124, 77, 255, 0.4);
  --process-marker-shadow: rgba(124, 77, 255, 0.25);
  --process-line-color: linear-gradient(180deg, #2D8CFF, #8A3FFC, transparent);

  /* Particle */
  --particle-color: #8fb4ff;
  --particle-glow:  rgba(140, 170, 255, 0.8);

  /* Glow blobs */
  --glow-blob-opacity: 0.35;

  /* Background FX gradient */
  --bg-fx-radial: rgba(45, 20, 90, 0.35);
  --bg-fx-gradient: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 45%, var(--bg-2) 100%);

  /* Stats bar */
  --stats-bar-bg:     rgba(255, 255, 255, 0.025);
  --stats-bar-border: rgba(255, 255, 255, 0.07);

  /* Why section divider */
  --why-divider: rgba(255, 255, 255, 0.07);

  /* Footer */
  --footer-border: rgba(255, 255, 255, 0.07);

  /* Cube glow */
  --cube-glow: rgba(45, 140, 255, 0.32);
}

/* =====================================================
   LIGHT THEME OVERRIDES
   ===================================================== */

html[data-theme="light"] {
  /* OxaCode Opaline Aurora — cool cyan, blue and violet */
  --bg-0: #EEF7F8;
  --bg-1: #F8FAFC;
  --bg-2: #F2F0FA;

  --text-100: #17263F;
  --text-70:  #4A5D78;
  --text-50:  #74839A;

  --card-bg:     rgba(250, 253, 255, 0.70);
  --card-border: rgba(70, 103, 154, 0.13);

  --nav-bg-scroll:    rgba(244, 250, 251, 0.78);
  --nav-border-color: rgba(65, 104, 155, 0.13);
  --mobile-menu-bg:   rgba(243, 249, 251, 0.98);

  --process-marker-bg:     rgba(252, 254, 255, 0.9);
  --process-marker-border: rgba(90, 86, 215, 0.25);
  --process-marker-shadow: rgba(90, 86, 215, 0.13);
  --process-line-color: linear-gradient(180deg, #289DD8, #6761E5, #8A5BD4, transparent);

  --particle-color: #438DB8;
  --particle-glow:  rgba(78, 130, 190, 0.25);
  --glow-blob-opacity: 0.16;

  --bg-fx-radial: rgba(70, 155, 180, 0.11);
  --bg-fx-gradient:
    radial-gradient(circle at 2% 4%, rgba(53, 179, 190, .17), transparent 30%),
    radial-gradient(circle at 97% 12%, rgba(124, 83, 210, .14), transparent 31%),
    radial-gradient(circle at 52% 105%, rgba(51, 124, 220, .10), transparent 40%),
    linear-gradient(145deg, #F7FCFC 0%, #F4F8FB 48%, #F4F1FA 100%);

  --stats-bar-bg:     rgba(250, 253, 255, 0.61);
  --stats-bar-border: rgba(70, 103, 154, 0.13);
  --why-divider:      rgba(70, 103, 154, 0.10);
  --footer-border:    rgba(70, 103, 154, 0.11);
  --cube-glow:        rgba(54, 140, 205, 0.19);
}