/* =========================================================
   main.css — Design tokens, reset, typography, layout
   nicspire.ch
   ========================================================= */

/* ─── COLOUR TOKENS ─────────────────────────────────────── */
:root {
  /* Dark backgrounds */
  --color-midnight:        #0D2137;
  --color-steel:           #153352;
  --color-steel-mid:       #112D4A;

  /* Aliases */
  --color-navy:            #0D2137;
  --color-navy-mid:        #112D4A;

  /* Borders on dark backgrounds */
  --color-navy-border:        rgba(34, 211, 238, 0.18);
  --color-navy-border-bright: rgba(34, 211, 238, 0.38);

  /* Accent — Arctic Cyan */
  --color-cyan:            #22D3EE;
  --color-cyan-hover:      #1ABFCF;
  --color-cyan-dim:        rgba(34, 211, 238, 0.10);
  --color-cyan-border:     rgba(34, 211, 238, 0.18);

  /* Highlight palette */
  --color-teal:            #2DD4BF;
  --color-signal-blue:     #4FACFE;
  --color-champagne:       #D4B896;

  /* Light sections */
  --color-bg-page:         #FFFFFF;
  --color-bg-light:        #F3F7FB;
  --color-border-light:    #DDE6F0;

  /* Text — on light backgrounds */
  --color-text-primary:    #0D2137;
  --color-text-secondary:  #4A6070;
  --color-text-muted:      #8EA0B8;

  /* Text — on dark backgrounds */
  --color-on-dark-primary:    #FFFFFF;
  --color-on-dark-secondary:  rgba(255, 255, 255, 0.68);
  --color-on-dark-muted:      rgba(255, 255, 255, 0.35);
  --color-on-dark-ghost:      rgba(255, 255, 255, 0.06);
}

/* ─── TYPOGRAPHY TOKENS ─────────────────────────────────── */
:root {
  --font-primary: 'Trebuchet MS', 'Gill Sans MT', 'Century Gothic', sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;

  --weight-display: 800;
  --weight-heading: 700;
  --weight-regular: 400;
  --weight-light:   200;
  --weight-medium:  700;

  --leading-tight: 1.25;
  --leading-base:  1.75;
  --leading-loose: 1.8;
}

/* ─── SPACING & LAYOUT TOKENS ───────────────────────────── */
:root {
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;

  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 20px;

  --max-width:   1140px;
  --page-gutter: 40px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-base);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  margin: 0;
}

h2, h3, h4 {
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

a { color: inherit; }

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

/* ─── LAYOUT ────────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

@media (max-width: 768px) {
  :root { --page-gutter: 20px; }
}