/*
 * variables.css
 * ─────────────────────────────────────────────────────────
 * LEARNER NOTE:
 * All design tokens live here — colors, fonts, spacing, radii.
 * Edit this one file and the whole site updates consistently.
 * This is the "single source of truth" for your design system.
 * ─────────────────────────────────────────────────────────
 */

:root {

  /* ── Color Palette ── */
  --clr-bg:         #0f0f12;      /* Page background (near-black) */
  --clr-surface:    #16161d;      /* Card / panel surfaces        */
  --clr-surface-2:  #141417;      /* Slightly lighter surface     */
  --clr-border:     rgba(255,255,255,0.07); /* Subtle borders     */

  --clr-accent:     #6c63ff;      /* Primary accent – soft violet */
  --clr-accent-2:   #00d4aa;      /* Secondary accent – cyan-mint */
  --clr-accent-glow:rgba(108,99,255,0.25); /* Glow shadow color  */

  --clr-text:       #e8e8f0;      /* Main text                    */
  --clr-text-muted: #7b7b96;      /* Dimmed / secondary text      */
  --clr-text-dim:   #4a4a62;      /* Placeholder / disabled       */

  --clr-white:      #ffffff;
  --clr-badge:      #6c63ff;      /* Badge background             */

  /* ── Typography ── */
  --font-display: 'Syne', sans-serif;   /* Headings / display */
  --font-body:    'DM Sans', sans-serif; /* Body / UI text    */

  --fs-xs:   0.72rem;
  --fs-sm:   0.85rem;
  --fs-base: 1rem;
  --fs-md:   1.1rem;
  --fs-lg:   1.35rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.2rem;

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3.5rem;

  /* ── Border Radius ── */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-card: 0 8px 32px rgba(0,0,0,0.45);
  --shadow-accent: 0 4px 24px var(--clr-accent-glow);

  /* ── Transitions ── */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Material-style ease */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Slight overshoot */
  --dur-fast:   160ms;
  --dur-base:   300ms;
  --dur-slow:   500ms;

  /* ── Layout ── */
  --sidebar-width: 240px;
  --panel-max:     800px;
  --container-max: calc(var(--sidebar-width) + var(--panel-max) + 2rem);

  /* Tech Stack Marquee */
  --marquee-speed: 80s;
  --marquee-gap: 50px;
  --marquee-logo-height: 45px;
}

/* ── Light Mode ── */
html.light-mode {
  --clr-bg:         #f5f5f9;
  --clr-surface:    #ffffff;
  --clr-surface-2:  #ebebf0;
  --clr-border:     rgba(0,0,0,0.12);

  --clr-accent:     #5a52e0;
  --clr-accent-2:   #00b894;
  --clr-accent-glow:rgba(90,82,224,0.20);

  --clr-text:       #000000;
  --clr-text-muted: #000075;
  --clr-text-dim:   #9b9b9b;

  --clr-white:      #000000;
  --clr-badge:      #ff2a00;

  --shadow-card: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-accent: 0 4px 24px var(--clr-accent-glow);
}