/* ==========================================================================
   Breakpoints (CSS does not support variables in @media)
   ========================================================================== */

/*
   Mobile-first breakpoint system:

   sm:  640px   — Large phones (landscape)
   md:  768px   — Tablets
   lg:  1024px  — Laptops / small desktops
   xl:  1280px  — Desktops

   Usage:
   @media (min-width: 768px)  { ... }  — tablet+
   @media (min-width: 1024px) { ... }  — desktop+
   @media (min-width: 1280px) { ... }  — wide+
*/

/* ==========================================================================
   Colors
   ========================================================================== */

:root {
  /* Gray (H:225 S:90% L:24%) */
  --gray-03: hsla(225, 90%, 24%, 0.03);
  --gray-05: hsla(225, 80%, 24%, 0.05);
  --gray-06: hsla(225, 70%, 24%, 0.06);
  --gray-08: hsla(225, 60%, 24%, 0.08);
  --gray-10: hsla(225, 60%, 24%, 0.1);
  --gray-12: hsla(225, 60%, 24%, 0.12);
  --gray-15: hsla(225, 40%, 24%, 0.15);
  --gray-20: hsla(225, 40%, 24%, 0.2);
  --gray-25: hsla(225, 40%, 24%, 0.25);
  --gray-30: hsla(225, 21%, 24%, 0.3);
  --gray-40: hsla(225, 21%, 24%, 0.4);
  --gray-50: hsla(225, 21%, 24%, 0.5);
  --gray-60: hsla(225, 21%, 24%, 0.6);
  --gray-70: hsla(225, 21%, 24%, 0.7);
  --gray-80: hsla(225, 21%, 24%, 0.8);
  --gray-90: hsla(225, 21%, 24%, 0.9);
  --gray-100: hsl(225, 21%, 24%);

  /* White (H:0 S:0% L:100%) */
  --white-05: hsla(0, 0%, 100%, 0.05);
  --white-10: hsla(0, 0%, 100%, 0.1);
  --white-15: hsla(0, 0%, 100%, 0.15);
  --white-20: hsla(0, 0%, 100%, 0.2);
  --white-25: hsla(0, 0%, 100%, 0.25);
  --white-30: hsla(0, 0%, 100%, 0.3);
  --white-40: hsla(0, 0%, 100%, 0.4);
  --white-50: hsla(0, 0%, 100%, 0.5);
  --white-60: hsla(0, 0%, 100%, 0.6);
  --white-70: hsla(0, 0%, 100%, 0.7);
  --white-80: hsla(0, 0%, 100%, 0.8);
  --white-85: hsla(0, 0%, 100%, 0.85);
  --white-90: hsla(0, 0%, 100%, 0.9);
  --white-100: hsl(0, 0%, 100%);

  /* Blue (H:229 S:83% L:60%) */
  --blue-03: hsla(229, 83%, 60%, 0.03);
  --blue-05: hsla(229, 83%, 60%, 0.05);
  --blue-10: hsla(229, 83%, 60%, 0.1);
  --blue-15: hsla(229, 83%, 60%, 0.15);
  --blue-20: hsla(229, 83%, 60%, 0.2);
  --blue-25: hsla(229, 83%, 60%, 0.25);
  --blue-30: hsla(229, 83%, 60%, 0.3);
  --blue-40: hsla(229, 83%, 60%, 0.4);
  --blue-50: hsla(229, 83%, 60%, 0.5);
  --blue-60: hsla(229, 83%, 60%, 0.6);
  --blue-70: hsla(229, 83%, 60%, 0.7);
  --blue-80: hsla(229, 83%, 60%, 0.8);
  --blue-90: hsla(229, 83%, 60%, 0.9);
  --blue-100: hsl(229, 83%, 60%);

  /* Violet (H:266 S:100% L:56%) */
  --violet-03: hsla(266, 100%, 56%, 0.03);
  --violet-05: hsla(266, 100%, 56%, 0.05);
  --violet-10: hsla(266, 100%, 56%, 0.1);
  --violet-15: hsla(266, 100%, 56%, 0.15);
  --violet-20: hsla(266, 100%, 56%, 0.2);
  --violet-25: hsla(266, 100%, 56%, 0.25);
  --violet-30: hsla(266, 100%, 56%, 0.3);
  --violet-40: hsla(266, 100%, 56%, 0.4);
  --violet-50: hsla(266, 100%, 56%, 0.5);
  --violet-60: hsla(266, 100%, 56%, 0.6);
  --violet-70: hsla(266, 100%, 56%, 0.7);
  --violet-80: hsla(266, 100%, 56%, 0.8);
  --violet-90: hsla(266, 100%, 56%, 0.9);
  --violet-100: hsl(266, 100%, 36%);

  /* Cyan (H:190 S:100% L:50%) */
  --cyan-03: hsla(190, 100%, 50%, 0.03);
  --cyan-05: hsla(190, 100%, 50%, 0.05);
  --cyan-10: hsla(190, 100%, 50%, 0.1);
  --cyan-15: hsla(190, 100%, 50%, 0.15);
  --cyan-20: hsla(190, 100%, 50%, 0.2);
  --cyan-25: hsla(190, 100%, 50%, 0.25);
  --cyan-30: hsla(190, 100%, 50%, 0.3);
  --cyan-40: hsla(190, 100%, 50%, 0.4);
  --cyan-50: hsla(190, 100%, 50%, 0.5);
  --cyan-60: hsla(190, 100%, 50%, 0.6);
  --cyan-70: hsla(190, 100%, 50%, 0.7);
  --cyan-80: hsla(190, 100%, 50%, 0.8);
  --cyan-90: hsla(190, 100%, 50%, 0.9);
  --cyan-100: hsl(190, 100%, 50%);

  /* Pink (H:334 S:80% L:53%) */
  --pink-03: hsla(334, 100%, 53%, 0.03);
  --pink-05: hsla(334, 100%, 53%, 0.05);
  --pink-10: hsla(334, 100%, 53%, 0.1);
  --pink-15: hsla(334, 80%, 53%, 0.15);
  --pink-20: hsla(334, 80%, 53%, 0.2);
  --pink-25: hsla(334, 80%, 53%, 0.25);
  --pink-30: hsla(334, 80%, 53%, 0.3);
  --pink-40: hsla(334, 80%, 53%, 0.4);
  --pink-50: hsla(334, 80%, 53%, 0.5);
  --pink-60: hsla(334, 80%, 53%, 0.6);
  --pink-70: hsla(334, 80%, 53%, 0.7);
  --pink-80: hsla(334, 80%, 53%, 0.8);
  --pink-90: hsla(334, 80%, 53%, 0.9);
  --pink-100: hsl(334, 80%, 53%);

  /* Orange (H:16 S:100% L:60%) */
  --orange-03: hsla(16, 100%, 60%, 0.03);
  --orange-05: hsla(16, 100%, 60%, 0.05);
  --orange-10: hsla(16, 100%, 60%, 0.1);
  --orange-15: hsla(16, 100%, 60%, 0.15);
  --orange-20: hsla(16, 100%, 60%, 0.2);
  --orange-25: hsla(16, 100%, 60%, 0.25);
  --orange-30: hsla(16, 100%, 60%, 0.3);
  --orange-40: hsla(16, 100%, 60%, 0.4);
  --orange-50: hsla(16, 100%, 60%, 0.5);
  --orange-60: hsla(16, 100%, 60%, 0.6);
  --orange-70: hsla(16, 100%, 60%, 0.7);
  --orange-80: hsla(16, 100%, 60%, 0.8);
  --orange-90: hsla(16, 100%, 60%, 0.9);
  --orange-100: hsl(16, 100%, 60%);

  /* Green (H:117 S:69% L:50%) */
  --green-03: hsla(117, 69%, 50%, 0.03);
  --green-05: hsla(117, 69%, 50%, 0.05);
  --green-10: hsla(117, 69%, 50%, 0.1);
  --green-15: hsla(117, 69%, 50%, 0.15);
  --green-20: hsla(117, 69%, 50%, 0.2);
  --green-25: hsla(117, 69%, 50%, 0.25);
  --green-30: hsla(117, 59%, 50%, 0.3);
  --green-40: hsla(117, 59%, 50%, 0.4);
  --green-50: hsla(117, 59%, 50%, 0.5);
  --green-60: hsla(117, 59%, 50%, 0.6);
  --green-70: hsla(117, 49%, 50%, 0.7);
  --green-80: hsla(117, 49%, 50%, 0.8);
  --green-90: hsla(117, 49%, 50%, 0.9);
  --green-100: hsl(117, 49%, 50%);

  /* Warning (H:40 S:100% L:50%) */
  --warning-10: hsla(40, 100%, 50%, 0.1);
  --warning-15: hsla(40, 100%, 50%, 0.15);

  /* macOS buttons */
  --macos-close: #ff5f57;
  --macos-minimize: #febc2e;
  --macos-maximize: #28c840;

  /* Brand colors */
  --brand-aws: #ff9900;
  --brand-azure: #0078d4;
  --brand-google: #4285f4;
  --brand-purple: #8b5cf6;
  --color-warning: #ffaa00;

  /* ==========================================================================
   Gradients
   ========================================================================== */

  /* Section gradients */
  --gradient-section-down: linear-gradient(
    180deg,
    var(--gray-03) 0%,
    var(--white-100) 100%
  );
  --gradient-section-up: linear-gradient(
    180deg,
    var(--white-100) 0%,
    var(--gray-03) 100%
  );

  /* Accent gradients */
  --gradient-accent: linear-gradient(
    135deg,
    var(--blue-100),
    var(--violet-100)
  );
  --gradient-accent-h: linear-gradient(
    90deg,
    var(--blue-100),
    var(--violet-100)
  );

  /* Cards */
  --gradient-card-accent: linear-gradient(
    135deg,
    var(--blue-05) 0%,
    var(--cyan-05) 100%
  );

  /* Orbs/glow */
  --gradient-orb-blue: radial-gradient(
    circle,
    var(--blue-100) 0%,
    transparent 70%
  );
  --gradient-orb-violet: radial-gradient(
    circle,
    var(--violet-100) 0%,
    transparent 70%
  );
  --gradient-orb-pink: radial-gradient(
    circle,
    var(--pink-100) 0%,
    transparent 70%
  );

  /* ==========================================================================
   Shadows
   ========================================================================== */

  --shadow-sm: 0 1px 2px var(--gray-10);
  --shadow-md: 0 4px 12px var(--gray-15);
  --shadow-lg: 0 10px 40px var(--gray-20);
  --shadow-xl: 0 20px 60px var(--gray-25);
  --shadow-glow-blue: 0 0 30px var(--blue-25);
  --shadow-glow-blue-lg: 0 0 60px var(--blue-30);
  --shadow-glow-violet: 0 0 30px var(--violet-25);
  --shadow-glow-pink: 0 0 30px var(--pink-25);

  /* ==========================================================================
   Typography
   ========================================================================== */

  /* Fonts */
  --font-sans: 'Onest', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Font sizes */
  --text-2xs: 0.75rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.25rem;
  --text-3xl: 1.5rem;
  --text-4xl: 1.5rem;
  --text-5xl: 2rem;
  --text-6xl: 2rem;
  --text-7xl: 2.5rem;
  --text-8xl: 3.5rem;
  --text-9xl: 4.5rem;

  /* Responsive headings */
  --text-hero: clamp(3rem, 8vw, 5.5rem);
  --text-section: clamp(2rem, 5vw, 3.5rem);
  --text-display: clamp(2.5rem, 6vw, 3.5rem);
  --text-display-sm: 3.5rem;

  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line height */
  --leading-xs: 1.05;
  --leading-sm: 1.3;
  --leading-md: 1.5;
  --leading-lg: 1.6;
  --leading-xl: 1.8;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 3.5rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 5.5rem;
  --space-13: 6rem;
  --space-14: 6.5rem;
  --space-15: 7rem;
  --space-16: 8rem;
  --space-17: 9rem;
  --space-18: 10rem;
  --space-19: 11rem;
  --space-20: 12rem;

  /* Letter spacing */
  --letter-spacing-tighter: -3px;
  --letter-spacing-tight: -2px;
  --letter-spacing-snug: -1px;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.5px;
  --letter-spacing-wider: 1px;
  --letter-spacing-widest: 3px;

  /* ==========================================================================
   Layout
   ========================================================================== */

  /* Containers */
  --container-sm: 600px;
  --container-md: 900px;
  --container-lg: 1100px;
  --container-xl: 1200px;
  --content-max-width: 1300px;

  /* Z-index */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal: 200;
  --z-tooltip: 300;

  /* ==========================================================================
   Spacing & Animations
   ========================================================================== */

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

  /* Animations */
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.4s;
  --duration-slower: 0.8s;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--white-100);
  color: var(--gray-100);
  overflow-x: hidden;
  line-height: var(--leading-lg);
}