/* ============================================================
   CSS Design System – Sg Tech Pro Solutions
   variables.css – All design tokens
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --clr-purple-50:  #faf5ff;
  --clr-purple-100: #f3e8ff;
  --clr-purple-200: #e9d5ff;
  --clr-purple-300: #d8b4fe;
  --clr-purple-400: #c084fc;
  --clr-purple-500: #a855f7;
  --clr-purple-600: #9333ea;
  --clr-purple-700: #7c3aed;
  --clr-purple-800: #6d28d9;
  --clr-purple-900: #4c1d95;
  --clr-purple-950: #2e1065;

  /* ── Semantic Color Tokens – Light Mode (default) ── */
  --color-primary:         #7c3aed;
  --color-primary-hover:   #6d28d9;
  --color-primary-light:   #a78bfa;
  --color-primary-glow:    rgba(124, 58, 237, 0.25);
  --color-accent:          #a855f7;
  --color-accent-alt:      #ec4899;
  --color-gradient-start:  #7c3aed;
  --color-gradient-end:    #a855f7;

  --color-bg:              #f9fafb;
  --color-bg-secondary:    #ffffff;
  --color-bg-tertiary:     #f3f4f6;
  --color-bg-glass:        rgba(255, 255, 255, 0.8);
  --color-bg-glass-border: rgba(124, 58, 237, 0.2);

  --color-text:            #1f2937;
  --color-text-secondary:  #4b5563;
  --color-text-muted:      #9ca3af;
  --color-text-inverse:    #ffffff;

  --color-border:          #e5e7eb;
  --color-border-focus:    #7c3aed;

  --color-success:         #059669;
  --color-warning:         #d97706;
  --color-error:           #dc2626;
  --color-info:            #2563eb;

  /* ── Navigation ── */
  --color-nav-bg:          rgba(255, 255, 255, 0.95);
  --color-nav-text:        #1f2937;
  --color-nav-border:      rgba(124, 58, 237, 0.1);

  /* ── Card ── */
  --color-card-bg:         #ffffff;
  --color-card-shadow:     rgba(0, 0, 0, 0.08);
  --color-card-hover-shadow: rgba(124, 58, 237, 0.2);

  /* ── Hero ── */
  --color-hero-bg:         #0f0a1e;
  --color-hero-text:       #ffffff;

  /* ── Footer ── */
  --color-footer-bg:       #0f0a1e;
  --color-footer-text:     #d1d5db;
  --color-footer-heading:  #ffffff;

  /* ── Typography ── */
  --font-sans:             'Inter', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display:          'Outfit', 'Inter', sans-serif;
  --font-mono:             'JetBrains Mono', 'Fira Code', monospace;

  /* ── Font Sizes (fluid, 8px rhythm) ── */
  --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 */
  --text-7xl:   4.5rem;     /* 72px */

  /* ── Spacing (8px grid) ── */
  --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-3xl:  32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.16);
  --shadow-purple: 0 8px 32px rgba(124, 58, 237, 0.3);
  --shadow-purple-lg: 0 16px 48px rgba(124, 58, 237, 0.4);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index scale ── */
  --z-below:    -1;
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-nav:      500;
  --z-modal:    900;
  --z-toast:    1000;

  /* ── Container ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}

/* ── Dark Mode ────────────────────────────────────────── */
[data-theme="dark"] {
  --color-primary:         #a78bfa;
  --color-primary-hover:   #c084fc;
  --color-primary-light:   #7c3aed;
  --color-primary-glow:    rgba(167, 139, 250, 0.3);
  --color-accent:          #c084fc;
  --color-gradient-start:  #7c3aed;
  --color-gradient-end:    #c084fc;

  --color-bg:              #0a0514;
  --color-bg-secondary:    #12082a;
  --color-bg-tertiary:     #1a0f36;
  --color-bg-glass:        rgba(18, 8, 42, 0.85);
  --color-bg-glass-border: rgba(167, 139, 250, 0.2);

  --color-text:            #f3f4f6;
  --color-text-secondary:  #d1d5db;
  --color-text-muted:      #9ca3af;
  --color-text-inverse:    #0a0514;

  --color-border:          rgba(167, 139, 250, 0.15);
  --color-border-focus:    #a78bfa;

  --color-nav-bg:          rgba(10, 5, 20, 0.95);
  --color-nav-text:        #f3f4f6;
  --color-nav-border:      rgba(167, 139, 250, 0.15);

  --color-card-bg:         #12082a;
  --color-card-shadow:     rgba(0, 0, 0, 0.3);
  --color-card-hover-shadow: rgba(167, 139, 250, 0.25);

  --color-footer-bg:       #060310;
  --color-footer-text:     #9ca3af;
  --color-footer-heading:  #f3f4f6;

  --shadow-purple: 0 8px 32px rgba(167, 139, 250, 0.25);
  --shadow-purple-lg: 0 16px 48px rgba(167, 139, 250, 0.35);
}