/* ============================================================
   ESTUDIO MARTINI — Base
   Variables · Reset · Typography · Utilities
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

/* ─── Design Tokens ─────────────────────────────────────── */
:root {
  /* Colors */
  --color-white:      #ffffff;
  --color-off-white:  #f9f9f9;
  --color-gray-100:   #f0f0ee;
  --color-gray-200:   #e4e4e0;
  --color-gray-400:   #9a9a96;
  --color-gray-600:   #5a5a56;
  --color-gray-800:   #2e2e2c;
  --color-dark:       #1a1a1a;
  --color-black:      #0d0d0c;

  /* Typography */
  --font-serif:  'Playfair Display', Georgia, serif;
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-4xl:  3.5rem;
  --text-5xl:  4.5rem;

  /* Spacing (4pt base) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(var(--space-6), 5vw, var(--space-16));

  /* Motion */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      150ms;
  --dur-base:      250ms;
  --dur-slow:      400ms;
  --dur-page:      600ms;

  /* Borders */
  --border-thin: 1px solid var(--color-gray-200);

  /* Z-index scale */
  --z-base:    0;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
}

/* ─── 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(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-dark);
  background-color: var(--color-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select  { font: inherit; }
p, h1, h2, h3, h4, h5, h6        { overflow-wrap: break-word; }
ul, ol                            { list-style: none; }
a                                 { color: inherit; text-decoration: none; }
button                            { cursor: pointer; background: none; border: none; }

/* ─── Global Typography ─────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-dark);
}

h1 { font-size: clamp(var(--text-3xl), 5vw,   var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl),  2.5vw, var(--text-3xl)); }
h4 { font-size: clamp(var(--text-lg),  2vw,   var(--text-2xl)); }

p {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--color-gray-600);
  line-height: 1.8;
}

/* ─── Utilities ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

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

/* ─── Reveal animations (Intersection Observer) ─────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  var(--dur-page) var(--ease-out),
    transform var(--dur-page) var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 80ms;  }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
.reveal-delay-5 { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}