/* ============================================================
   WispIT Design Tokens
   Generated by ui-ux-pro-max | Stack: HTML + Tailwind CDN
   Brand: IT Services & AI System Integrations | Cape Town, SA
   ============================================================ */

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

:root {

  /* ── Colors: Backgrounds ────────────────────────────────── */
  --bg-base:        #090E1A;   /* page canvas — near-black navy   */
  --bg-surface:     #0F172A;   /* card / section surface           */
  --bg-elevated:    #1E293B;   /* elevated card, dropdown, modal   */
  --bg-overlay:     rgba(9, 14, 26, 0.85); /* backdrop overlay    */

  /* ── Colors: Brand Accent ───────────────────────────────── */
  --accent:         #06B6D4;   /* cyan-500 — primary CTA / links   */
  --accent-dim:     #0891B2;   /* cyan-600 — hover state           */
  --accent-glow:    rgba(6, 182, 212, 0.18); /* glow halo          */
  --accent-alt:     #3B82F6;   /* blue-500 — secondary accent      */

  /* ── Colors: Text ──────────────────────────────────────── */
  --text-primary:   #F1F5F9;   /* slate-100 — headings, body       */
  --text-secondary: #94A3B8;   /* slate-400 — captions, meta       */
  --text-muted:     #475569;   /* slate-600 — placeholder, tags    */
  --text-inverse:   #090E1A;   /* for use on accent bg buttons     */

  /* ── Colors: Borders ───────────────────────────────────── */
  --border-subtle:  #1E293B;   /* subtle dividers                  */
  --border-default: #334155;   /* card borders, inputs             */
  --border-accent:  rgba(6, 182, 212, 0.35); /* accent ring        */

  /* ── Colors: Semantic ──────────────────────────────────── */
  --success:        #22C55E;   /* green-500                        */
  --warning:        #F59E0B;   /* amber-500                        */
  --error:          #EF4444;   /* red-500                          */

  /* ── Typography ────────────────────────────────────────── */
  --font-heading:   'Poppins', system-ui, sans-serif;
  --font-body:      'Inter', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:        0.75rem;   /* 12px */
  --text-sm:        0.875rem;  /* 14px */
  --text-base:      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 */

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.05em;
  --tracking-wider: 0.08em;

  /* ── Spacing Scale ──────────────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

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

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-accent: 0 0 20px rgba(6, 182, 212, 0.25);
  --shadow-glow:   0 0 40px rgba(6, 182, 212, 0.15), 0 0 80px rgba(6, 182, 212, 0.08);

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ─────────────────────────────────────────────── */
  --max-w-content: 1200px;
  --max-w-text:    680px;
  --nav-height:    72px;

  /* ── Z-index Scale ──────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-dropdown: 20;
  --z-sticky:  30;
  --z-overlay: 40;
  --z-modal:   50;
}

/* ── Base Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover { color: var(--accent-dim); }

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}