/* ============================================================
   AVISHKAARI PORTFOLIO — DESIGN TOKENS
   All CSS variables used across the entire project
   ============================================================ */

:root {
  /* --- Colors: Dark Theme (default) --- */
  --bg:           #060608;
  --bg2:          #0a0a0f;
  --bg3:          #0e0e16;
  --surface:      rgba(255, 255, 255, 0.03);
  --surface2:     rgba(255, 255, 255, 0.06);
  --surface3:     rgba(255, 255, 255, 0.10);
  --border:       rgba(255, 255, 255, 0.08);
  --border2:      rgba(255, 255, 255, 0.14);
  --border3:      rgba(255, 255, 255, 0.22);
  --text:         #f0eeea;
  --text2:        #8a8890;
  --text3:        #4a4858;
  --text-inv:     #060608;

  /* --- Accent Palette --- */
  --accent:       #39ff14;     /* Neon green — primary CTA */
  --accent-rgb:   57, 255, 20;
  --accent2:      #ff6b35;     /* Ember orange — secondary */
  --accent3:      #7c5cfc;     /* Deep violet — glow */
  --accent3-rgb:  124, 92, 252;

  /* --- Glow / Shadow --- */
  --glow:         rgba(57, 255, 20,  0.18);
  --glow-lg:      rgba(57, 255, 20,  0.28);
  --glow2:        rgba(124, 92,  252, 0.22);
  --glow3:        rgba(255, 107, 53,  0.15);

  /* --- Typography --- */
  --font-display: 'Bebas Neue', sans-serif;
  --font-head:    'Syne',       sans-serif;
  --font-body:    'DM Sans',    sans-serif;

  /* --- Spacing --- */
  --nav-h:        80px;
  --section-px:   clamp(24px, 5vw, 80px);
  --section-py:   clamp(60px, 8vw, 120px);
  --max-w:        1280px;
  --card-radius:  10px;

  /* --- Transitions --- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:       0.2s;
  --t-med:        0.4s;
  --t-slow:       0.7s;

  /* --- Z-index layers --- */
  --z-base:       1;
  --z-card:       10;
  --z-nav:        500;
  --z-lightbox:   700;
  --z-loader:     900;
  --z-cursor:     999;
}

/* --- Light Theme --- */
[data-theme="light"] {
  --bg:           #f4f2ee;
  --bg2:          #eceae5;
  --bg3:          #e4e2dc;
  --surface:      rgba(0, 0, 0, 0.04);
  --surface2:     rgba(0, 0, 0, 0.07);
  --surface3:     rgba(0, 0, 0, 0.11);
  --border:       rgba(0, 0, 0, 0.08);
  --border2:      rgba(0, 0, 0, 0.14);
  --border3:      rgba(0, 0, 0, 0.22);
  --text:         #0e0c0a;
  --text2:        #5a5550;
  --text3:        #9a9590;
  --text-inv:     #f4f2ee;
  --glow:         rgba(30, 220, 10, 0.22);
  --glow2:        rgba(100, 70, 220, 0.15);
}