/* ============================================================
   main.css — Custom Properties, Reset, Typography, Utilities
   Sérgio Trindade Archviz — v2 LIGHT THEME
   ============================================================
   DEFAULT = light bg (#f5f3ef) + dark text (#111110)
   Hero panel overrides locally to dark via CSS context.
   Change entire palette: edit :root only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Quicksand:wght@300;400;500&display=swap');

:root {

  /* ── Light palette (site default) ── */
  --color-bg:           #f5f3ef;
  --color-bg-alt:       #edeae4;
  --color-surface:      #e8e4dd;
  --color-border:       rgba(17, 16, 14, 0.10);
  --color-text:         #111110;
  --color-text-muted:   #7a756e;
  --color-text-dim:     #c0bbb2;
  --color-accent:       #8b6a42;
  --color-accent-dim:   rgba(139, 106, 66, 0.12);

  /* ── Dark palette (hero section only) ── */
  --hero-bg:            #0e0e0e;
  --hero-text:          #f0ede8;
  --hero-text-muted:    rgba(240, 237, 232, 0.55);
  --hero-overlay:       rgba(10, 9, 8, 0.30);

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'Quicksand', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Fluid font scale ── */
  --text-xs:      clamp(0.625rem, 0.85vw,  0.75rem);
  --text-sm:      clamp(0.75rem,  1.0vw,   0.875rem);
  --text-base:    clamp(0.875rem, 1.1vw,   1rem);
  --text-md:      clamp(1rem,     1.3vw,   1.125rem);
  --text-lg:      clamp(1.125rem, 1.8vw,   1.5rem);
  --text-xl:      clamp(1.5rem,   2.5vw,   2.25rem);
  --text-2xl:     clamp(2rem,     4vw,     3.75rem);
  --text-3xl:     clamp(3rem,     6vw,     6rem);
  --text-display: clamp(4.5rem,   9vw,     11rem);

  /* ── Type details ── */
  --tracking-tight:   -0.025em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.20em;
  --leading-none:      1;
  --leading-tight:     1.08;
  --leading-snug:      1.2;
  --leading-normal:    1.5;
  --leading-relaxed:   1.72;

  /* ── Spacing ── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  3.5rem;
  --space-xl:  6rem;
  --space-2xl: 10rem;

  /* ── Layout ── */
  --nav-h: 4.5rem;

  /* ── Easing ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Duration ── */
  --dur-fast:   180ms;
  --dur-normal: 400ms;
  --dur-slow:   800ms;
  --dur-slower: 1400ms;

  /* ── Z-index ── */
  --z-base:      1;
  --z-raised:    10;
  --z-nav:       90;
  --z-cursor:    95;
  --z-preloader: 100;
}

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

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

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: auto;
}

@media (hover: none) { body { cursor: auto; } }

img, video  { display: block; max-width: 100%; height: auto; }
a           { color: inherit; text-decoration: none; }
button      { background: none; border: none; cursor: auto; font: inherit; color: inherit; padding: 0; }
ul, ol      { list-style: none; }
input, textarea { font: inherit; border: none; outline: none; background: none; }
::-webkit-scrollbar { width: 0; background: transparent; }

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--leading-tight);
  
}
p { font-family: var(--font-body); line-height: var(--leading-relaxed); }

/* ─── UTILITY ───────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.rule { width: 100%; height: 1px; background: var(--color-border); }

/* V11 — restore native browser cursor */
html, body, a, button, input, textarea, select, .explore-hint, [role="button"] {
  cursor: auto !important;
}


/* V20.1 overrides: index project preview typography */
.pc-right h2,
.pc-right p,
.project-preview-location,
.project-preview-year {
  
}

.pc-right p {
  font-weight: 300 !important;
}

.pc-right h2 {
  font-weight: 500 !important;
}


/* V20.5 Typography */
h1, h2, h3, .hero-title, .project-title {
  font-family: 'Cal Sans', sans-serif;
}

body, p, span, a, .menu, .small-text {
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
}

/* Accessibility: respect users who request less motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .preloader,
  .page-overlay,
  .page-bg-loader {
    display: none !important;
  }

  .h-container,
  .h-track {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
  }

  .h-track {
    display: block !important;
    width: 100% !important;
    transform: none !important;
  }

  .h-panel {
    width: 100% !important;
    min-height: 100vh;
  }
}