/* =========================================
   RESET
========================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

img,
svg {
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}


/* =========================================
   ROOT
========================================= */

:root {

  /* -------------------------
     COLORS
  ------------------------- */

  --color-primary: #1f5eff;
  --color-primary-hover: #174edb;

  --color-text: #111827;
  --color-text-soft: #4b5563;
  --color-text-muted: #6b7280;

  --color-white: #ffffff;
  --color-black: #000000;

  --color-bg: #ffffff;
  --color-bg-soft: #f6f8fb;
  --color-bg-dark: #0d1726;

  --color-border: #e5e7eb;
  --color-border-dark: #d1d5db;

  --color-primary: #1f5eff;
  --color-primary-hover: #174edb;

  /* Dark background accent */
  --color-primary-light: #6fa0ff;

  --bg-0: #05070c;
  --bg-1: #0a0f18;
  --bg-2: #0e1522;
  --panel: #0f1520;
  --panel-border: #1c2432;
  --line: #1a212e;
  --text-hi: #f1f5fb;
  --text-mid: #b3bccb;
  --text-low: #8590a3;
  --cyan: #3fd0ff;
  --cyan-2: #2a9fe0;
  --cyan-dim: #1c4a63;
  --green: #34d399;
  --amber: #f5b942;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --transition-fast: 0.2s ease;


  /* -------------------------
     TYPOGRAPHY
  ------------------------- */

  --font-primary: "Inter", sans-serif;

  --font-weight-100: 100;
  --font-weight-200: 200;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;
  --font-weight-900: 900;


  /* -------------------------
     FONT SIZES
  ------------------------- */

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;


  /* -------------------------
     SPACING
  ------------------------- */

--space-1: 0.25rem;  /* 4px */
--space-2: 0.5rem;   /* 8px */
--space-3: 0.75rem;  /* 12px */
--space-4: 1rem;     /* 16px */
--space-5: 1.5rem;   /* 24px */
--space-6: 2rem;     /* 32px */
--space-7: 3rem;     /* 48px */
--space-8: 4rem;     /* 64px */
--space-9: 5rem;     /* 80px */
--space-10: 6rem;    /* 96px */


  /* -------------------------
     LAYOUT
  ------------------------- */

  --container-width: 72rem;
  --container-padding: 1.25rem;

  --section-padding: 6rem;


  /* -------------------------
     BORDERS / RADIUS
  ------------------------- */

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-full: 999rem;


  /* -------------------------
     SHADOWS
  ------------------------- */

  --shadow-sm: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);

  --shadow-md:
    0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);

  --shadow-lg:
    0 1rem 3rem rgba(0, 0, 0, 0.12);


  /* -------------------------
     TRANSITIONS
  ------------------------- */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}


/* =========================================
   BASE
========================================= */

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-weight-400);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}


/* =========================================
   GLOBAL TYPOGRAPHY
========================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text);
  font-weight: var(--font-weight-700);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 3.4375rem);
}

h2 {
  font-size: clamp(2.25rem, 4vw, 3rem);
}

h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

h4 {
  font-size: 1.25rem;
}

p {
  color: var(--color-text-soft);
}


/* =========================================
   GLOBAL CONTAINER
========================================= */

.container {
  width: min(100% - (var(--container-padding) * 2), var(--container-width));
  margin-inline: auto;
}


/* =========================================
   GLOBAL SECTION
========================================= */

.section {
  padding-block: var(--section-padding);
}


/* =========================================
   RESPONSIVE GLOBAL SETTINGS
========================================= */

@media (min-width: 48rem) {

  :root {
    --container-padding: 2rem;
  }

}

@media (min-width: 64rem) {

  :root {
    --container-padding: 2.5rem;
  }

}

@media (max-width: 47.99rem) {

  :root {
    --section-padding: 4.5rem;
  }

}

@media (max-width: 30rem) {

  :root {
    --container-padding: 1rem;
    --section-padding: 4rem;
  }

}