/* ============================================================
   LinkWrks — Design Tokens v3
   Professional Redesign — Refined, purposeful palette
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Brand Core ────────────────────────────────────────── */
  --clr-emerald-50:  #ecfdf5;
  --clr-emerald-100: #d1fae5;
  --clr-emerald-200: #a7f3d0;
  --clr-emerald-300: #6ee7b7;
  --clr-emerald-400: #34d399;
  --clr-emerald-500: #10b981;
  --clr-emerald-600: #059669;
  --clr-emerald-700: #047857;

  --clr-cyan-400: #22d3ee;
  --clr-cyan-500: #06b6d4;

  /* ─── Neutrals (warm-tinted slate) ─────────────────────── */
  --clr-slate-50:  #f8fafc;
  --clr-slate-100: #f1f5f9;
  --clr-slate-200: #e2e8f0;
  --clr-slate-300: #cbd5e1;
  --clr-slate-400: #94a3b8;
  --clr-slate-500: #64748b;
  --clr-slate-600: #475569;
  --clr-slate-700: #334155;
  --clr-slate-800: #1e293b;
  --clr-slate-900: #0f172a;
  --clr-slate-950: #020617;

  /* ─── Semantic Surfaces ────────────────────────────────── */
  --clr-bg:           #030712;
  --clr-surface:      #0a101e;
  --clr-surface-2:    #111827;
  --clr-surface-3:    #1a2332;
  --clr-surface-glass: rgba(10,16,30,0.72);

  /* ─── Borders ──────────────────────────────────────────── */
  --clr-border:       rgba(255,255,255,0.05);
  --clr-border-mid:   rgba(255,255,255,0.08);
  --clr-border-soft:  rgba(255,255,255,0.03);
  --clr-border-brand: rgba(16,185,129,0.15);

  /* ─── Text ─────────────────────────────────────────────── */
  --clr-text:         #f1f5f9;
  --clr-text-2:       #e2e8f0;
  --clr-text-muted:   #94a3b8;
  --clr-text-subtle:  #475569;

  /* ─── Functional ───────────────────────────────────────── */
  --clr-primary:      var(--clr-emerald-500);
  --clr-primary-hover:var(--clr-emerald-400);
  --clr-accent:       var(--clr-cyan-400);

  /* ─── Typography ───────────────────────────────────────── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;      /* 12px */
  --text-sm:   0.8125rem;    /* 13px */
  --text-base: 0.9375rem;    /* 15px */
  --text-md:   1rem;         /* 16px */
  --text-lg:   1.125rem;     /* 18px */
  --text-xl:   1.25rem;      /* 20px */
  --text-2xl:  1.5rem;       /* 24px */
  --text-3xl:  1.875rem;     /* 30px */
  --text-4xl:  2.25rem;      /* 36px */
  --text-5xl:  3rem;         /* 48px */
  --text-6xl:  3.75rem;      /* 60px */
  --text-7xl:  4.5rem;       /* 72px */

  --fw-light:    300;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;
  --fw-black:    900;

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;
  --ls-tight:   -0.025em;
  --ls-tighter: -0.04em;

  /* ─── Spacing Scale ────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  1.75rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

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

  /* ─── Shadows ──────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.5);
  --shadow-xl:   0 20px 60px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 40px rgba(16,185,129,0.12);
  --shadow-glow-sm: 0 0 20px rgba(16,185,129,0.08);

  /* ─── Motion ───────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
  --dur-slower:  600ms;

  /* ─── Layout ───────────────────────────────────────────── */
  --max-w-site:  1200px;
  --max-w-prose: 720px;
  --nav-height:  72px;
}