/* ============================================================================
   SAI GUDLA — DESIGN SYSTEM
   Professional portfolio · Light-first · Navy ink · Azure brand accent
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Brand palette */
  --blue-50:  #eff8ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #0694d7;
  --blue-600: #0578b3;
  --blue-700: #0a6090;
  --blue-800: #0c4a6e;
  --blue-900: #0c3550;

  --cyan-400: #22d3ee;
  --cyan-500: #04b0cd;
  --cyan-600: #0891a8;

  --navy:      #1e293b;
  --navy-deep: #0f172a;
  --navy-soft: #334155;

  --slate-0:   #ffffff;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  --success: #059669;
  --warning: #d97706;
  --danger:  #dc2626;

  /* Semantic — light */
  --bg:           #fafbfc;
  --bg-subtle:    #f4f6f9;
  --bg-elevated:  #ffffff;
  --surface:      #ffffff;
  --surface-glass:rgba(255, 255, 255, 0.88);

  --fg:   #0f172a;
  --fg-2: #475569;
  --fg-3: #64748b;

  --border:        #e8edf2;
  --border-strong: #d1dae4;

  --brand:        var(--navy-deep);
  --brand-vivid:  var(--blue-500);
  --brand-muted:  var(--blue-100);
  --accent:       var(--cyan-500);
  --link:         var(--blue-500);

  --brand-gradient: linear-gradient(135deg, var(--cyan-500) 0%, var(--blue-500) 100%);
  --brand-gradient-soft: linear-gradient(180deg, rgba(4, 176, 205, 0.06) 0%, rgba(6, 148, 215, 0.02) 100%);

  --hero-glow-1: rgba(6, 148, 215, 0.07);
  --hero-glow-2: rgba(4, 176, 205, 0.05);
  --grid-dot: rgba(15, 23, 42, 0.04);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-extrabold:800;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  56px;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide:  0.06em;
  --tracking-mono:  0.1em;

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

  /* Radii */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full:9999px;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 16px rgba(15, 23, 42, 0.07);
  --shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.09);
  --shadow-xl:  0 24px 48px rgba(15, 23, 42, 0.12);
  --shadow-glow:0 8px 24px rgba(6, 148, 215, 0.22);
  --ring-focus: 0 0 0 3px rgba(6, 148, 215, 0.28);

  /* Motion */
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;
  --dur-slower: 600ms;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --maxw-content: 1080px;
  --maxw-wide:    1200px;
  --nav-height:   72px;
}

[data-theme="dark"] {
  --bg:           #0a0e17;
  --bg-subtle:    #0f1520;
  --bg-elevated:  #141b28;
  --surface:      #161e2e;
  --surface-glass:rgba(10, 14, 23, 0.92);

  --fg:   #f1f5f9;
  --fg-2: #94a3b8;
  --fg-3: #64748b;

  --border:        #1e2a3d;
  --border-strong: #2a3a52;

  --brand:        #f1f5f9;
  --brand-vivid:  #38bdf8;
  --brand-muted:  rgba(56, 189, 248, 0.12);
  --accent:       #22d3ee;
  --link:         #38bdf8;

  --hero-glow-1: rgba(56, 189, 248, 0.08);
  --hero-glow-2: rgba(34, 211, 238, 0.06);
  --grid-dot: rgba(148, 163, 184, 0.06);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow:0 8px 24px rgba(6, 148, 215, 0.35);
}