/* ============================================================
   SoftNex — Design Tokens (Professional Corporate Theme)
   Solid light interface, blue primary, dark navy accents
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --brand-50: #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-800: #1e40af;

  /* ---- Accents ---- */
  --accent-1: #2563eb;
  --accent-2: #0ea5e9;
  --accent-1-soft: #dbeafe;
  --accent-2-soft: #e0f2fe;
  --orange: #f97316;
  --orange-soft: #ffedd5;

  /* ---- Text ---- */
  --ink: #0f172a;
  --ink-2: #1e293b;
  --text-1: #1e293b;
  --text-2: #475569;
  --text-3: #64748b;
  --faint-3: #94a3b8;

  /* ---- Surfaces ---- */
  --bg: #ffffff;
  --bg-alt: #f8fafc;
  --bg-soft: #f1f5f9;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  /* Glass tokens kept for class compatibility — now solid surfaces */
  --glass-bg: #ffffff;
  --glass-bg-strong: #f8fafc;
  --glass-border: #e2e8f0;
  --glass-border-strong: #cbd5e1;
  --glass-blur: 0px;

  /* ---- Semantic ---- */
  --success: #16a34a;
  --success-soft: #dcfce7;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --warning: #d97706;
  --warning-soft: #fef3c7;
  --info: #0284c7;
  --info-soft: #e0f2fe;

  /* ---- Gradients (professional blue) ---- */
  --grad: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  --grad-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);
  --grad-text: #2563eb;

  /* ---- Typography ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --fs-h1: clamp(2rem, 4.4vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.4rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.5rem);
  --fs-h4: clamp(1.05rem, 1.5vw, 1.2rem);
  --fs-body: clamp(0.9rem, 1.2vw, 1.05rem);
  --fs-small: clamp(0.78rem, 1vw, 0.875rem);
  --lh-tight: 1.2;
  --lh-body: 1.65;

  /* ---- Spacing (4px base scale) ---- */
  --sp-1: clamp(4px, 0.5vw, 8px);
  --sp-2: clamp(8px, 1vw, 16px);
  --sp-3: clamp(12px, 1.6vw, 24px);
  --sp-4: clamp(16px, 2.4vw, 32px);
  --sp-5: clamp(24px, 3.5vw, 48px);
  --sp-6: clamp(32px, 5vw, 64px);
  --sp-7: clamp(48px, 7vw, 96px);
  --sp-8: clamp(64px, 9vw, 128px);
  --section-pad: clamp(64px, 8vw, 104px);

  /* ---- Radii ---- */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 20px 56px rgba(15, 23, 42, 0.08);
  --shadow-glow: 0 8px 24px rgba(37, 99, 235, 0.22);
  --shadow-cyan-glow: 0 8px 24px rgba(14, 165, 233, 0.18);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.2s;
  --t: 0.3s;
  --t-slow: 0.6s;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1320px;
  --header-h: 74px;
  --topbar-h: 40px;
}