/* ==========================================================================
   sastelaptops.com - Brand Design Tokens & System
   Color Palette: White + Light Navy Blue Premium Identity
   ========================================================================== */

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

:root {
  /* Brand Core Palette - High-Contrast Enterprise eCommerce */
  --sl-primary: #1D4ED8;            /* Vibrant Royal Tech Blue (Contrast 5.85:1 on white) */
  --sl-primary-hover: #1E40AF;      /* Deep Royal Blue */
  --sl-primary-light: #3B82F6;      /* Vivid Accent Blue */
  --sl-primary-subtle: #EFF6FF;     /* Clean Soft Tint */
  --sl-secondary: #0284C7;          /* Vivid Cyan / Ocean Blue */
  --sl-secondary-hover: #0369A1;
  --sl-deep-navy: #0B192C;          /* Midnight Navy (Contrast 17.2:1 on white) */
  --sl-deep-navy-hover: #060D17;
  --sl-navy-surface: #1E293B;
  --sl-pale-blue: #F8FAFC;          /* Crisp slate-tinted canvas */
  --sl-soft-blue: #EFF6FF;          /* Sky-tinted light fill */
  --sl-white: #FFFFFF;

  /* Header Contrast Sky Blue Theme Tokens */
  --sl-header-bg: #E0F2FE;          /* High-Contrast Sky Blue (Sky 100) */
  --sl-header-bg-gradient: linear-gradient(180deg, #E0F2FE 0%, #D8EEFE 100%);
  --sl-header-border: #BAE6FD;      /* Sky Blue Accent Border (Sky 200) */
  --sl-subnav-bg: #F0F9FF;          /* Soft Sky Navigation Tint (Sky 50) */
  --sl-subnav-border: #7DD3FC;      /* Distinct Subnav Accent Divider (Sky 300) */

  /* Typography & High Contrast */
  --sl-text-main: #0F172A;          /* Deep Slate / Midnight - Maximum crispness */
  --sl-text-primary: #0F172A;       /* Alias for text-main */
  --sl-text-secondary: #334155;     /* Medium-dark slate - WCAG AA compliant 6.5:1 */
  --sl-text-muted: #334155;         /* Medium-dark slate - WCAG AA compliant 6.5:1 */
  --sl-text-light: #64748B;         /* Secondary slate helper */
  --sl-border: #CBD5E1;             /* Defined, crisp borders */
  --sl-border-subtle: #E2E8F0;      /* Subtle dividers */
  --sl-border-focus: #1D4ED8;

  /* State Alerts */
  --sl-success: #15803D;            /* Rich Emerald Green (Contrast 6.1:1) */
  --sl-success-bg: #DCFCE7;
  --sl-success-border: #86EFAC;
  --sl-warning: #B45309;            /* Rich Amber Gold */
  --sl-warning-bg: #FEF3C7;
  --sl-warning-border: #FCD34D;
  --sl-danger: #B91C1C;             /* Rich Crimson */
  --sl-danger-bg: #FEE2E2;
  --sl-danger-border: #FCA5A5;
  --sl-info: #1D4ED8;
  --sl-info-bg: #EFF6FF;
  --sl-info-border: #BFDBFE;

  /* Flash & Urgency Accent */
  --sl-flash: #EA580C;
  --sl-flash-bg: #FFF7ED;
  --sl-flash-border: #FED7AA;

  /* Typography Fonts */
  --sl-font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sl-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Elevations & High Contrast Shadows */
  --sl-shadow-xs: 0 1px 2px rgba(11, 25, 44, 0.05);
  --sl-shadow-sm: 0 2px 5px rgba(11, 25, 44, 0.07), 0 1px 2px rgba(11, 25, 44, 0.04);
  --sl-shadow-md: 0 8px 20px rgba(11, 25, 44, 0.09), 0 3px 6px rgba(11, 25, 44, 0.05);
  --sl-shadow-lg: 0 16px 36px rgba(11, 25, 44, 0.12), 0 6px 12px rgba(11, 25, 44, 0.06);

  /* Radii */
  --sl-radius-sm: 6px;
  --sl-radius-md: 10px;
  --sl-radius-lg: 14px;
  --sl-radius-xl: 20px;
  --sl-radius-pill: 9999px;

  /* Spacing */
  --sl-space-1: 0.25rem;
  --sl-space-2: 0.5rem;
  --sl-space-3: 0.75rem;
  --sl-space-4: 1rem;
  --sl-space-6: 1.5rem;
  --sl-space-8: 2rem;
  --sl-space-12: 3rem;

  /* Transitions */
  --sl-transition-fast: 150ms ease;
  --sl-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: var(--sl-font-body);
  color: var(--sl-text-main);
  background-color: var(--sl-pale-blue);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sl-font-heading);
  color: var(--sl-deep-navy);
  font-weight: 700;
  line-height: 1.25;
}

a {
  color: var(--sl-primary);
  text-decoration: none;
  transition: color var(--sl-transition-fast);
}

a:hover {
  color: var(--sl-primary-hover);
}

img, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}