/* ==========================================================================
   DATAWEBKIT GLOBAL DESIGN SYSTEM
   Tokens, Scale, Shapes, Effects, & Layout Engine
   Communicates: Premium, Technology, Trust, Professionalism, Modern Agency
   ========================================================================== */

:root {
  /* -------------------------------------------------------------
     1. GLOBAL COLORS
     ------------------------------------------------------------- */
  /* Brand Core */
  --dwk-color-primary: #7c3aed;             /* Electric Violet */
  --dwk-color-primary-hover: #9333ea;       /* Vivid Purple */
  --dwk-color-primary-subtle: rgba(124, 58, 237, 0.12);
  --dwk-color-primary-glow: rgba(124, 58, 237, 0.35);

  --dwk-color-secondary: #6366f1;           /* Deep Indigo */
  --dwk-color-secondary-hover: #4f46e5;
  --dwk-color-secondary-subtle: rgba(99, 102, 241, 0.12);

  --dwk-color-accent: #38bdf8;              /* Sky Cyan */
  --dwk-color-accent-hover: #0ea5e9;
  --dwk-color-accent-subtle: rgba(56, 189, 248, 0.12);

  /* Backgrounds & Canvas */
  --dwk-color-bg: #090713;                  /* Deep Obsidian Core */
  --dwk-color-bg-alt: #0d0b1a;              /* Secondary Section BG */
  --dwk-color-bg-tertiary: #131024;

  /* Surfaces & Glass */
  --dwk-color-surface: #12101f;             /* Primary Card Surface */
  --dwk-color-surface-hover: #18142a;
  --dwk-color-surface-elevated: #1a162e;    /* Dropdowns / Modals */
  --dwk-color-surface-glass: rgba(12, 10, 20, 0.92);

  /* Text Hierarchy */
  --dwk-color-text: #f9fafb;                /* High-Contrast White */
  --dwk-color-text-secondary: rgba(249, 250, 251, 0.78);
  --dwk-color-text-muted: rgba(249, 250, 251, 0.52);
  --dwk-color-text-subtle: rgba(249, 250, 251, 0.32);
  --dwk-color-text-inverse: #090713;

  /* Borders & Dividers */
  --dwk-color-border: rgba(255, 255, 255, 0.08);
  --dwk-color-border-hover: rgba(255, 255, 255, 0.16);
  --dwk-color-border-active: rgba(168, 85, 247, 0.45);

  /* Feedback States */
  --dwk-color-success: #10b981;             /* Emerald */
  --dwk-color-success-subtle: rgba(16, 185, 129, 0.14);
  --dwk-color-warning: #f59e0b;             /* Amber */
  --dwk-color-warning-subtle: rgba(245, 158, 11, 0.14);
  --dwk-color-error: #ef4444;               /* Crimson */
  --dwk-color-error-subtle: rgba(239, 68, 68, 0.14);

  /* -------------------------------------------------------------
     2. GLOBAL TYPOGRAPHY
     ------------------------------------------------------------- */
  --dwk-font-heading: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dwk-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dwk-font-nav: var(--dwk-font-heading);
  --dwk-font-button: var(--dwk-font-heading);
  --dwk-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Weights */
  --dwk-font-weight-regular: 400;
  --dwk-font-weight-medium: 500;
  --dwk-font-weight-semibold: 600;
  --dwk-font-weight-bold: 700;
  --dwk-font-weight-extrabold: 800;

  /* Sizes */
  --dwk-text-xs: 0.75rem;      /* 12px */
  --dwk-text-sm: 0.875rem;     /* 14px */
  --dwk-text-base: 1rem;       /* 16px */
  --dwk-text-lg: 1.125rem;     /* 18px */
  --dwk-text-xl: 1.25rem;      /* 20px */
  --dwk-text-2xl: 1.5rem;      /* 24px */
  --dwk-text-3xl: 1.875rem;    /* 30px */
  --dwk-text-4xl: 2.25rem;     /* 36px */
  --dwk-text-5xl: 3rem;        /* 48px */
  --dwk-text-6xl: 3.75rem;     /* 60px */

  /* Line Heights */
  --dwk-leading-none: 1;
  --dwk-leading-tight: 1.2;
  --dwk-leading-snug: 1.375;
  --dwk-leading-normal: 1.5;
  --dwk-leading-relaxed: 1.65;
  --dwk-leading-loose: 1.8;

  /* Letter Spacing */
  --dwk-tracking-tighter: -0.04em;
  --dwk-tracking-tight: -0.02em;
  --dwk-tracking-normal: 0em;
  --dwk-tracking-wide: 0.025em;
  --dwk-tracking-wider: 0.05em;
  --dwk-tracking-widest: 0.1em;

  /* -------------------------------------------------------------
     3. GLOBAL SPACING
     ------------------------------------------------------------- */
  /* Section Spacing */
  --dwk-spacing-section-sm: 3.5rem;   /* 56px */
  --dwk-spacing-section-md: 5.5rem;   /* 88px */
  --dwk-spacing-section-lg: 7.5rem;   /* 120px */

  /* Container Spacing */
  --dwk-spacing-container-x: 1.5rem;  /* 24px */
  --dwk-spacing-container-y: 2rem;    /* 32px */

  /* Card Spacing */
  --dwk-spacing-card-sm: 1.25rem;     /* 20px */
  --dwk-spacing-card-md: 1.75rem;     /* 28px */
  --dwk-spacing-card-lg: 2.5rem;      /* 40px */

  /* Grid Gaps */
  --dwk-gap-sm: 1rem;                 /* 16px */
  --dwk-gap-md: 1.5rem;               /* 24px */
  --dwk-gap-lg: 2rem;                 /* 32px */
  --dwk-gap-xl: 3rem;                 /* 48px */

  /* Form Spacing */
  --dwk-spacing-form-gap: 1.25rem;    /* 20px */
  --dwk-spacing-input-y: 0.75rem;     /* 12px */
  --dwk-spacing-input-x: 1rem;        /* 16px */

  /* -------------------------------------------------------------
     4. GLOBAL SHAPE
     ------------------------------------------------------------- */
  --dwk-radius-xs: 4px;
  --dwk-radius-sm: 8px;
  --dwk-radius-md: 12px;
  --dwk-radius-lg: 16px;
  --dwk-radius-xl: 24px;
  --dwk-radius-full: 9999px;

  --dwk-radius-button: var(--dwk-radius-md);
  --dwk-radius-card: var(--dwk-radius-lg);
  --dwk-radius-input: var(--dwk-radius-md);
  --dwk-radius-badge: var(--dwk-radius-full);

  /* -------------------------------------------------------------
     5. GLOBAL EFFECTS & SHADOWS
     ------------------------------------------------------------- */
  --dwk-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --dwk-shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
  --dwk-shadow-card: 0 14px 35px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--dwk-color-border);
  --dwk-shadow-card-hover: 0 22px 50px -12px rgba(0, 0, 0, 0.9), 0 0 24px -4px var(--dwk-color-primary-glow), 0 0 0 1px rgba(255, 255, 255, 0.16);
  --dwk-shadow-dropdown: 0 25px 60px -15px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.1);
  --dwk-shadow-glow: 0 0 30px var(--dwk-color-primary-glow);

  /* Motion & Easing */
  --dwk-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --dwk-duration-fast: 150ms;
  --dwk-duration-normal: 220ms;
  --dwk-duration-slow: 350ms;
  --dwk-transition-base: all var(--dwk-duration-normal) var(--dwk-ease-standard);

  /* Focus Ring */
  --dwk-focus-ring: 0 0 0 3px var(--dwk-color-border-active);

  /* -------------------------------------------------------------
     6. GLOBAL LAYOUT WIDTHS
     ------------------------------------------------------------- */
  --dwk-width-narrow: 768px;
  --dwk-width-container: 1152px;      /* max-w-6xl */
  --dwk-width-wide: 1280px;           /* max-w-7xl */
  --dwk-width-full: 100%;
}

/* -------------------------------------------------------------
   7. REDUCED MOTION SAFEGUARD
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dwk-duration-fast: 0.01ms !important;
    --dwk-duration-normal: 0.01ms !important;
    --dwk-duration-slow: 0.01ms !important;
    --dwk-transition-base: none !important;
  }
}

/* -------------------------------------------------------------
   8. CORE ATOMIC DESIGN UTILITIES
   ------------------------------------------------------------- */
body {
  background-color: var(--dwk-color-bg);
  color: var(--dwk-color-text);
  font-family: var(--dwk-font-body);
  line-height: var(--dwk-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dwk-container {
  width: 100%;
  max-width: var(--dwk-width-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--dwk-spacing-container-x);
  padding-right: var(--dwk-spacing-container-x);
  box-sizing: border-box;
}

.dwk-container-narrow {
  width: 100%;
  max-width: var(--dwk-width-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--dwk-spacing-container-x);
  padding-right: var(--dwk-spacing-container-x);
}

.dwk-container-wide {
  width: 100%;
  max-width: var(--dwk-width-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--dwk-spacing-container-x);
  padding-right: var(--dwk-spacing-container-x);
}

.dwk-headline {
  font-family: var(--dwk-font-heading);
  font-weight: var(--dwk-font-weight-bold);
  letter-spacing: var(--dwk-tracking-tight);
  color: var(--dwk-color-text);
}

.dwk-card {
  position: relative;
  background: var(--dwk-color-surface);
  border: 1px solid var(--dwk-color-border);
  border-radius: var(--dwk-radius-card);
  padding: var(--dwk-spacing-card-md);
  box-shadow: var(--dwk-shadow-card);
  transition: var(--dwk-transition-base);
}

.dwk-card:hover {
  transform: translateY(-2px);
  background-color: var(--dwk-color-surface-hover);
  border-color: var(--dwk-color-border-hover);
  box-shadow: var(--dwk-shadow-card-hover);
}

.dwk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--dwk-radius-badge);
  font-family: var(--dwk-font-heading);
  font-size: var(--dwk-text-xs);
  font-weight: var(--dwk-font-weight-semibold);
  letter-spacing: var(--dwk-tracking-wide);
}

.dwk-badge-purple { background: var(--dwk-color-primary-subtle); color: #c4b5fd; border: 1px solid rgba(124, 58, 237, 0.3); }
.dwk-badge-emerald { background: var(--dwk-color-success-subtle); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.3); }
.dwk-badge-blue { background: var(--dwk-color-accent-subtle); color: #93c5fd; border: 1px solid rgba(56, 189, 248, 0.3); }
.dwk-badge-amber { background: var(--dwk-color-warning-subtle); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.3); }