/* ============================================================
   COLORS — Pushpak Jain Portfolio
   Dark slate canvas + per-subject neon accents + glass surfaces.
   Base values are the literal Tailwind hues used in the source.
   ============================================================ */

:root {
  /* ---- Canvas / base ---- */
  --slate-950: #020617;          /* page base (bg-slate-950) */
  --ink-0: #02030a;              /* deep gradient stop */
  --ink-1: #071225;              /* mid gradient stop */
  --ink-2: #0a1730;              /* upper-mid gradient stop */
  --ink-3: #02050b;              /* tail gradient stop */

  /* ---- Subject accents (the theming dimension) ---- */
  --ai-300:        #67e8f9;      /* cyan-300   — Artificial Intelligence */
  --ai-secondary:  #c4b5fd;      /* violet-300 — AI gradient partner */
  --cyber-300:     #c4b5fd;      /* violet-300 — Cybersecurity */
  --cyber-secondary:#818cf8;     /* indigo-400 — cyber gradient partner */
  --physics-300:   #7dd3fc;      /* sky-300    — Physics */
  --physics-secondary:#a855f7;   /* purple-500 — physics gradient partner */
  --chem-300:      #6ee7b7;      /* emerald-300 — Chemistry */
  --chem-secondary:#2dd4bf;      /* teal-400   — chem gradient partner */
  --math-300:      #f472b6;      /* pink-400   — Math */
  --math-secondary:#c084fc;      /* purple-400 — math gradient partner */

  /* ---- Foreground (white at the alphas the source actually uses) ---- */
  --fg-strong:  rgba(255,255,255,0.97);  /* hero copy */
  --fg-1:       rgba(255,255,255,0.92);  /* stat values */
  --fg-2:       rgba(255,255,255,0.76);  /* body copy */
  --fg-3:       rgba(255,255,255,0.66);  /* secondary body */
  --fg-muted:   rgba(255,255,255,0.46);  /* eyebrows / labels */
  --fg-faint:   rgba(255,255,255,0.42);  /* dimmest labels */

  /* ---- Glass surfaces (white tint over the dark canvas) ---- */
  --surface-1:  rgba(255,255,255,0.028); /* default card fill */
  --surface-2:  rgba(255,255,255,0.04);  /* raised card / link tile */
  --surface-3:  rgba(255,255,255,0.05);  /* hover fill */
  --surface-4:  rgba(255,255,255,0.075); /* active / hero panel top */
  --surface-modal: rgba(10,16,28,0.94);  /* solid-ish modal body */

  /* ---- Glass borders ---- */
  --border-faint:  rgba(255,255,255,0.08);
  --border-1:      rgba(255,255,255,0.10);
  --border-2:      rgba(255,255,255,0.16); /* hover border */
  --border-strong: rgba(255,255,255,0.22); /* active / emphasis */

  /* ---- Semantic aliases ---- */
  --bg-page:        var(--slate-950);
  --text-display:   var(--fg-strong);
  --text-body:      var(--fg-2);
  --text-label:     var(--fg-muted);
  --surface-card:   var(--surface-1);
  --surface-raised: var(--surface-2);
  --accent:         var(--ai-300);        /* default brand accent = AI cyan */
}