/* ==========================================================================
   DESIGN TOKENS — DIGIFORGE CONSULTING SG (SINGAPORE B2B ENTERPRISE AGENCY)
   High-precision engineering palette: Deep Slate, Crisp Ice, Cobalt, International Amber
   ========================================================================== */

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

:root {
  /* ── Backgrounds ──────────────────────────────── */
  --bg-base:        #ffffff;
  --bg-surface:     #f8fafc;
  --bg-subtle:      #f1f5f9;
  --bg-card:        #ffffff;
  --bg-dark:        #090d16;
  --bg-dark-card:   #111827;

  /* ── Brand Colors (Singapore Enterprise) ───────── */
  --brand-primary:  #0b1329; /* Deep Maritime Navy */
  --brand-navy-light: #152244;
  --brand-secondary:#1d4ed8; /* High-Performance Cobalt */
  --brand-accent:   #2563eb;
  --accent-action:  #ea580c; /* High-Conversion Signal Amber */
  --accent-hover:   #c2410c; 
  --success-green:  #15803d;
  --success-bg:     #ecfdf5;

  /* ── Ink / Typography ─────────────────────────── */
  --ink-900: #020617; /* Near Black */
  --ink-800: #0f172a; /* Slate Dark */
  --ink-600: #334155; /* Body Primary */
  --ink-500: #475569; /* Body Secondary */
  --ink-400: #64748b; /* Muted */
  --ink-300: #94a3b8; /* Border / Placeholder */
  --text-inverse: #ffffff;

  /* ── Borders & Structural Grid ────────────────── */
  --border-light:  #f1f5f9;
  --border-fine:   #e2e8f0;
  --border-medium: #cbd5e1;
  --border-dark:   #1e293b;
  --border-brand:  rgba(29, 78, 216, 0.25);

  /* ── Typography Fonts ─────────────────────────── */
  --font-sans:     'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:  'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* ── Layout Dimensions ────────────────────────── */
  --max-w:         1200px;
  --max-w-wide:    1280px;
  --max-w-narrow:  920px;
  --max-w-text:    680px;

  /* ── Spacing Scale ────────────────────────────── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3.5rem;
  --space-2xl: 5.5rem;
  --space-3xl: 7.5rem;

  /* ── Radii ────────────────────────────────────── */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 9999px;

  /* ── Shadows & Elevation ──────────────────────── */
  --shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm:     0 2px 4px 0 rgba(11, 19, 41, 0.05);
  --shadow-md:     0 6px 16px -2px rgba(11, 19, 41, 0.08);
  --shadow-lg:     0 14px 28px -4px rgba(11, 19, 41, 0.12);
  --shadow-card:   0 1px 3px rgba(0,0,0,0.06), 0 6px 20px rgba(0,0,0,0.03);

  /* ── Transitions ──────────────────────────────── */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    180ms;
  --dur-normal:  300ms;
}