/* ====================================================
   NAITIK PORTFOLIO — DESIGN TOKENS
   Single source of truth for all design decisions
   ==================================================== */

:root {
  /* ─── Colors ─── */
  --clr-bg:           #ffffff;
  --clr-bg-soft:      #f4f4f4;
  --clr-bg-card:      #fafafa;
  --clr-bg-warm:      #fdfbf7;

  /* Naitik Red — from hero image + moviesposter animation */
  --clr-red:          #f40c3f;
  --clr-red-dim:      rgba(244, 12, 63, 0.12);
  --clr-red-glow:     rgba(244, 12, 63, 0.25);

  /* Text */
  --clr-text:         #111111;
  --clr-text-muted:   #555555;
  --clr-text-dim:     #333333;
  --clr-white:        #ffffff;

  /* Borders */
  --clr-border:       #e0e0e0;
  --clr-border-soft:  rgba(0,0,0,0.06);

  /* ─── Typography ─── */
  --font-display:  'Montserrat', sans-serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'Space Mono', monospace;

  /* Type scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   3rem;
  --text-4xl:   clamp(2.5rem, 6vw, 4.5rem);
  --text-hero:  clamp(4.5rem, 14vw, 13rem);

  /* ─── Spacing ─── */
  --sp-1:   4px;   --sp-2:   8px;   --sp-3:  12px;
  --sp-4:  16px;   --sp-5:  20px;   --sp-6:  24px;
  --sp-8:  32px;   --sp-10: 40px;   --sp-12: 48px;
  --sp-16: 64px;   --sp-20: 80px;   --sp-24: 96px;
  --sp-32: 128px;

  /* Section padding */
  --section-py: clamp(80px, 12vh, 140px);

  /* Container */
  --container-max:  1200px;
  --container-px:   clamp(24px, 5vw, 80px);

  /* ─── Border Radius ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.16);
  --shadow-red:  0 0 40px rgba(244, 12, 63, 0.2);

  /* ─── Animation ─── */
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:      150ms;
  --dur-base:      300ms;
  --dur-slow:      600ms;
  --dur-slower:    900ms;
  --dur-cinematic: 1200ms;
}