/* ============================================================
   DESIGN SYSTEM — Impactive
   All brand colors, typography, and spacing live here.
   ============================================================ */

:root {
  /* --- Dark palette (navy) --- */
  --navy:    #080E1C;
  --navy2:   #0D1528;
  --navy3:   #111D35;
  --navy4:   #162040;

  /* --- Accent colours --- */
  --teal:    #0FB99E;
  --teal2:   #0A9080;
  --purple:  #7B5EA7;
  --purpled: #5B3F8A;

  /* --- Light surfaces --- */
  --surface:  #F4F6FA;
  --surface2: #EBEEF6;
  --lb:       #DDE3EF;   /* light border */
  --lb2:      #C4CEDF;   /* darker light border */
  --white:    #FFFFFF;

  /* --- Text on light backgrounds --- */
  --lt:  #0C1829;   /* primary dark text */
  --lbo: #374D68;   /* secondary dark text */
  --lm:  #687894;   /* muted / caption */

  /* --- Text on dark backgrounds --- */
  --ink:  #E8EDF5;   /* primary light text */
  --ink2: #B0BDD4;   /* muted light text */
  --ink3: #6B7A96;   /* very muted light text */

  /* --- Semantic aliases (used by components) --- */
  --color-primary:       var(--teal);
  --color-primary-dark:  var(--teal2);
  --color-accent:        var(--purple);
  --color-accent-dark:   var(--purpled);
  --color-bg-dark:       var(--navy);
  --color-text:          var(--lt);
  --color-text-muted:    var(--lm);
  --color-border:        var(--lb);
  --color-surface:       var(--surface);

  /* --- Key gradient --- */
  --grad: linear-gradient(90deg, var(--purpled), var(--teal2));
  --grad-135: linear-gradient(135deg, var(--purpled), var(--teal2));

  /* --- Typography --- */
  --serif: 'DM Serif Display', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;
  --mono:  'JetBrains Mono', monospace;

  /* Legacy aliases */
  --font-sans:   var(--sans);
  --font-serif:  var(--serif);
  --font-mono:   var(--mono);

  /* --- Type scale --- */
  --text-xs:   0.6875rem;  /* 11px */
  --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 */

  --weight-light:  300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;

  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-base:  1.625;
  --lh-loose: 1.75;

  /* Legacy aliases */
  --line-height-tight: var(--lh-tight);
  --line-height-base:  var(--lh-base);

  /* --- Spacing (8-point grid) --- */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */

  /* Legacy aliases */
  --space-2:  var(--sp-2);
  --space-4:  var(--sp-4);
  --space-6:  var(--sp-6);
  --space-8:  var(--sp-8);
  --space-16: var(--sp-16);

  /* --- Layout --- */
  --max-w:       1120px;
  --max-w-wide:  1280px;
  --max-w-prose: 740px;

  /* Legacy aliases */
  --max-width-default: var(--max-w);
  --max-width-wide:    var(--max-w-wide);
  --max-width-content: var(--max-w-prose);

  /* --- Radii --- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* Legacy aliases */
  --radius-sm:   var(--r-sm);
  --radius-md:   var(--r-md);
  --radius-lg:   var(--r-xl);
  --radius-xl:   var(--r-2xl);
  --radius-full: var(--r-full);
  --border-color: var(--lb);

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 12px 32px -4px rgb(0 0 0 / 0.12), 0 4px 8px -4px rgb(0 0 0 / 0.06);

  /* --- Transitions --- */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --transition-fast: var(--t-fast);
  --transition-base: var(--t-base);
}

/* ============================================================
   CSS RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--lh-base);
  color: var(--lt);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--teal);
  text-decoration: none;
  transition: color var(--t-fast);
}

a:hover { color: var(--teal2); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: var(--weight-normal);
  line-height: var(--lh-tight);
  color: var(--lt);
}

p { max-width: 70ch; }

ul, ol { padding-left: var(--sp-6); }

button {
  cursor: pointer;
  font-family: inherit;
}

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

/* ============================================================
   UTILITIES
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-8);
}

@media (max-width: 960px) {
  .container { padding-inline: var(--sp-5); }
}

/* ============================================================
   GLOBAL CHROME
   ============================================================ */
::selection { background: rgba(91,63,138,0.14); color: var(--lt); }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--lb2); border-radius: 4px; }