/* ============================================================
   D2D STUDIO — TOKENS + RESET
   Design system variables. Change values here, not in components.
   ============================================================ */

/* ---- Modern reset ---- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

h1, h2, h3, h4 { font-weight: inherit; text-wrap: balance; }

p { text-wrap: pretty; }

:root {
  /* ---- Color ---- */
  --bg:         #0D0D0D;
  --surface:    #171717;
  --surface-2:  #1F1F1F;
  --text:       #FFFFFF;
  --text-muted: #A0A0A0;
  --gold:       #C8A96A;
  --gold-soft:  #E3CFA3;
  --hairline:   rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.16);
  --scrim: linear-gradient(
              180deg,
              rgba(13,13,13,0) 0%,
              rgba(13,13,13,.35) 45%,
              rgba(13,13,13,.85) 85%,
              rgba(13,13,13,.97) 100%);

  /* ---- Type ---- */
  --font-display: "Cormorant Garamond", "Canela", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  --fs-hero:  clamp(3.25rem, 9vw, 9rem);
  --fs-h1:    clamp(2.5rem, 6vw, 5.5rem);
  --fs-h2:    clamp(2rem, 4.5vw, 3.75rem);
  --fs-h3:    clamp(1.5rem, 3vw, 2.25rem);
  --fs-lead:  clamp(1.125rem, 1.6vw, 1.5rem);
  --fs-body:  clamp(1rem, 1.05vw, 1.125rem);
  --fs-label: 0.8125rem;

  --leading-tight: 1.04;
  --leading-snug:  1.2;
  --leading-body:  1.65;
  --tracking-label: 0.24em;

  /* ---- Spacing ---- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-6: 3rem;
  --s-8: 5rem;
  --s-12: 8rem;
  --s-16: 12rem;

  --section-y: clamp(6rem, 12vw, 12rem);
  --gutter:    clamp(1.25rem, 5vw, 6rem);
  --maxw:      1440px;
  --maxw-text: 62ch;

  /* ---- Motion ---- */
  --e-lux:   cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:  0.4s;
  --d-base:  0.7s;
  --d-slow:  1.1s;

  /* ---- Layers ---- */
  --z-cursor: 9999;
  --z-nav:    1000;
  --z-menu:   1100;
  --z-progress: 1200;
}