/* =============================================
   UPHIX GADGETS — CSS Variables
   =============================================*/

:root {
  --logo-navy:    #0B2E5C;
  --logo-grey:    #4A4A5A;
  --logo-electric:#1E6FD9;

  --bg-primary:   #040d1a;
  --bg-secondary: #071525;
  --bg-surface:   #091829;
  --bg-card:      #0c1e35;

  --text-primary:   #e8eef8;
  --text-secondary: #7a9abf;
  --text-muted:     #3d5a7a;

  --accent:         #2979d4;
  --accent-hover:   #1a5fb5;
  --accent-glow:    rgba(41,121,212,0.22);

  --navy:           #0B2E5C;
  --gold:           #f59e0b;
  --hot-color:      #ef4444;
  --green-wa:       #25D366;
  --green-wa-hover: #128C7E;
  --danger:         #ef4444;
  --success:        #22c55e;

  --border:         rgba(255,255,255,0.07);
  --border-accent:  rgba(41,121,212,0.28);

  --radius:    8px;
  --radius-sm: 5px;
  --radius-lg: 12px;

  --shadow:        0 4px 24px rgba(0,0,0,0.45);
  --shadow-accent: 0 4px 32px rgba(41,121,212,0.2);

  --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Poppins', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --nav-h: 68px;
}

[data-theme="light"] {
  --bg-primary:   #eef2f9;
  --bg-secondary: #e2eaf6;
  --bg-surface:   #ffffff;
  --bg-card:      #f5f8ff;
  --text-primary:   #0a1a30;
  --text-secondary: #2c4a6e;
  --text-muted:     #7a9abf;
  --border:         rgba(0,0,0,0.08);
  --border-accent:  rgba(41,121,212,0.3);
  --shadow:         0 4px 24px rgba(0,0,0,0.08);
}