/* ============================================================
   GASPERY LIMITED — Design System v2
   main.css — Tokens, Reset, Base Typography
   POLISHED REDESIGN
   ============================================================ */

/* ─── Custom Properties ─────────────────────────────────── */
:root {
  /* ── Colours ── */
  --c-bg:             #FAFAF8;
  --c-bg-alt:         #F2F0EC;
  --c-bg-surface:     #EDEBE5;

  --c-text:           #0D0D0D;
  --c-text-2:         #1A1A1A;
  --c-text-3:         #4A4A4A;
  --c-text-muted:     #8A8A8A;

  --c-border:         #E4E2DC;
  --c-border-dark:    #C8C5BC;

  /* Purple system — substantially more present */
  --c-purple:         #321A4A;
  --c-purple-mid:     #4A2870;
  --c-purple-deep:    #1A0D28;
  --c-purple-pale:    #EDE8F5;
  --c-purple-tint:    rgba(50,26,74,0.06);
  --c-purple-surface: rgba(50,26,74,0.12);
  --c-purple-border:  rgba(50,26,74,0.25);
  --c-purple-rule:    rgba(50,26,74,0.2);
  --c-purple-overlay: rgba(50,26,74,0.72);

  /* Dark section palette */
  --c-dark-bg:        #0D0D0D;
  --c-dark-surface:   rgba(250,250,248,0.04);
  --c-dark-border:    rgba(250,250,248,0.08);
  --c-dark-text:      rgba(250,250,248,0.85);
  --c-dark-muted:     rgba(250,250,248,0.35);

  /* ── Typography ── */
  --f-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;

  /* ── Font Sizes ── */
  --fs-10: 0.625rem;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-36: 2.25rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;
  --fs-72: 4.5rem;
  --fs-80: 5rem;
  --fs-96: 6rem;
  --fs-120: 7.5rem;

  /* ── Spacing ── */
  --sp-4:   0.25rem;
  --sp-6:   0.375rem;
  --sp-8:   0.5rem;
  --sp-10:  0.625rem;
  --sp-12:  0.75rem;
  --sp-16:  1rem;
  --sp-20:  1.25rem;
  --sp-24:  1.5rem;
  --sp-28:  1.75rem;
  --sp-32:  2rem;
  --sp-40:  2.5rem;
  --sp-48:  3rem;
  --sp-56:  3.5rem;
  --sp-64:  4rem;
  --sp-72:  4.5rem;
  --sp-80:  5rem;
  --sp-96:  6rem;
  --sp-120: 7.5rem;
  --sp-160: 10rem;

  /* ── Layout ── */
  --grid-max:    1300px;
  --grid-gutter: clamp(1rem, 3vw, 1.5rem);

  /* ── Transitions ── */
  --t-fast:   160ms ease;
  --t-base:   260ms ease;
  --t-slow:   420ms ease;
  --t-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --t-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Shadows ── */
  --shadow-sm:     0 1px 3px rgba(13,13,13,0.06), 0 1px 2px rgba(13,13,13,0.04);
  --shadow-md:     0 4px 16px rgba(13,13,13,0.08), 0 2px 6px rgba(13,13,13,0.04);
  --shadow-lg:     0 12px 40px rgba(13,13,13,0.12), 0 4px 12px rgba(13,13,13,0.06);
  --shadow-purple: 0 8px 32px rgba(50,26,74,0.25);

  /* ── Border radius ── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* ── Z-index ── */
  --z-loader: 900;
  --z-header: 800;
  --z-mobile: 700;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--f-sans);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.75;
  color: var(--c-text);
  background-color: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.menu-open,
body.loader-active {
  overflow: hidden;
}

/* ── Specific element resets ── */
img, picture, video, canvas {
  display: block;
  max-width: 100%;
}

/* SVG: do NOT apply max-width:100% globally — causes arrow bug */
svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; background: none; border: none; }

/* ─── Base Typography ────────────────────────────────────── */
.text-display {
  font-size: clamp(var(--fs-64), 8vw, var(--fs-120));
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.92;
}

.text-hero {
  font-size: clamp(var(--fs-40), 5.5vw, var(--fs-80));
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.text-heading {
  font-size: clamp(var(--fs-32), 4vw, var(--fs-56));
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.text-subheading {
  font-size: clamp(var(--fs-22), 2.5vw, var(--fs-32));
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.text-body {
  font-size: clamp(var(--fs-15), 1.2vw, var(--fs-17));
  line-height: 1.75;
  color: var(--c-text-3);
}

.text-body-sm {
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--c-text-3);
}

.text-label {
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.text-mono {
  font-family: var(--f-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
}

/* ─── Focus & Selection ──────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--c-purple);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--c-purple);
  color: #fff;
}

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--c-bg-alt); }
::-webkit-scrollbar-thumb { background: var(--c-border-dark); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-purple); }

/* ─── Screen reader only ─────────────────────────────────── */
.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;
}