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

/* ==========================================================================
   SPEEDNET TECHNOLOGIES — DESIGN TOKEN SYSTEM
   Professional, trustworthy, premium ISP identity
   ========================================================================== */

:root {
  /* ── PRIMARY BRAND COLORS ───────────────────────────────────────────────── */
  --color-primary:        #1D4ED8;   /* deep professional blue */
  --color-primary-dark:   #1e40af;   /* darker for hover */
  --color-primary-light:  #eff6ff;   /* very light blue bg */
  --color-primary-mid:    #dbeafe;   /* light blue tint */
  --color-accent:         #0891B2;   /* electric/cyan blue */
  --color-accent-light:   #e0f7fa;   /* cyan tint */

  /* ── NEUTRAL SCALE ──────────────────────────────────────────────────────── */
  --color-navy:           #0f172a;
  --color-navy-mid:       #1e293b;
  --color-text:           #0f172a;   /* primary text */
  --color-text-body:      #374151;   /* body text */
  --color-text-muted:     #6b7280;   /* secondary text */
  --color-text-light:     #9ca3af;   /* placeholder/caption */

  /* ── BACKGROUNDS & SURFACES ─────────────────────────────────────────────── */
  --color-bg:             #ffffff;
  --color-bg-alt:         #f8fafc;
  --color-surface:        #ffffff;
  --color-surface-alt:    #f1f5f9;
  --color-surface-raised: #ffffff;

  /* ── BORDERS ─────────────────────────────────────────────────────────────── */
  --color-border:         #e2e8f0;
  --color-border-light:   #f1f5f9;
  --color-border-focus:   #1D4ED8;

  /* ── STATUS ──────────────────────────────────────────────────────────────── */
  --color-success:        #059669;
  --color-success-bg:     #ecfdf5;
  --color-success-border: #a7f3d0;
  --color-warning:        #d97706;
  --color-danger:         #dc2626;
  --color-danger-bg:      #fef2f2;
  --color-danger-border:  #fecaca;

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Outfit', 'Inter', sans-serif;

  /* ── SHADOWS ─────────────────────────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm:   0 1px 3px 0 rgba(0,0,0,0.07), 0 1px 2px -1px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-blue: 0 4px 14px 0 rgba(29,78,216,0.22);
  --shadow-card: 0 0 0 1px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 0 0 1px rgba(29,78,216,0.15), 0 8px 30px rgba(0,0,0,0.10);

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

  /* ── TRANSITIONS ─────────────────────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-smooth: 0.4s cubic-bezier(0.16,1,0.3,1);

  /* ── LAYOUT ──────────────────────────────────────────────────────────────── */
  --container-width:        1200px;
  --container-width-narrow: 960px;
  --header-height:          72px;

  /* ── SPACING SCALE ───────────────────────────────────────────────────────── */
  --space-section: 88px;
  --space-section-sm: 56px;
}