/* ============================================================
   DESIGN TOKENS — Aayush Srivastava Portfolio
   All visual values live here. Never hardcode elsewhere.
   ============================================================ */

:root {
  /* --- Color: Dark Theme (default) --- */
  --bg-primary:    #0a0a0f;
  --bg-surface:    #111118;
  --bg-elevated:   #18181f;
  --bg-subtle:     #1e1e28;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-muted:  rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text-primary:  #f0f0f5;
  --text-secondary:#9898aa;
  --text-tertiary: #787890;
  --text-inverse:  #0a0a0f;

  --accent:        #7c3aed;
  --accent-light:  #9d5ff5;
  --accent-subtle: rgba(124, 58, 237, 0.12);
  --accent-glow:   rgba(124, 58, 237, 0.25);

  --green:         #10b981;
  --green-subtle:  rgba(16, 185, 129, 0.12);

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.6);
  --shadow-accent: 0 0 40px var(--accent-glow);

  /* --- Typography --- */
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Type scale (1.25 major third) */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  2rem;      /* 32px */
  --text-4xl:  2.75rem;   /* 44px */
  --text-5xl:  3.75rem;   /* 60px */
  --text-6xl:  5rem;      /* 80px */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.75;

  --tracking-tight: -0.04em;
  --tracking-snug:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.05em;
  --tracking-wider: 0.1em;

  /* --- Spacing (8px base unit) --- */
  --space-1:   0.25rem;  /* 4px  */
  --space-2:   0.5rem;   /* 8px  */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */
  --space-32:  8rem;     /* 128px */

  /* --- Layout --- */
  --container:      1120px;
  --container-narrow: 720px;
  --nav-height:     64px;

  /* --- Radii --- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;
  --duration-slower: 600ms;
}

/* --- Light Theme Overrides --- */
[data-theme="light"] {
  --bg-primary:    #fafafa;
  --bg-surface:    #ffffff;
  --bg-elevated:   #f4f4f8;
  --bg-subtle:     #ededf5;

  --border-subtle: rgba(0, 0, 0, 0.05);
  --border-muted:  rgba(0, 0, 0, 0.09);
  --border-strong: rgba(0, 0, 0, 0.14);

  --text-primary:  #0a0a0f;
  --text-secondary:#4a4a5e;
  --text-tertiary: #9898aa;
  --text-inverse:  #fafafa;

  --accent:        #6d28d9;
  --accent-light:  #7c3aed;
  --accent-subtle: rgba(109, 40, 217, 0.08);
  --accent-glow:   rgba(109, 40, 217, 0.15);

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.10);
}