/* ============================================================
   VANTUM — Design Foundations
   Colors, Typography, Motion, Elevation tokens
   Load Google Fonts before this file:
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---- Core Surfaces ---- */
  --color-bg-base:      #14171F;  /* Charcoal Black — global document canvas */
  --color-bg-surface:   #1A1D26;  /* Deep Slate — structural sections, cards */
  --color-bg-elevated:  #20232E;  /* one step up from surface (menus, popovers) */

  /* ---- Metallic Accents ---- */
  --color-accent-rose:     #F4C2C9;  /* Premium Rose Gold — headings, active states, primary buttons */
  --color-accent-copper:   #C98A7A;  /* Copper-Pink — gradient stops, ambient drift, motion */
  --color-accent-platinum: #FFFFFF;  /* Frosted Platinum — structural white, particle cores */

  /* ---- Signature Gradients ---- */
  --gradient-metal:    linear-gradient(135deg, #F4C2C9 0%, #C98A7A 100%);   /* rose → copper, logo + CTAs */
  --gradient-wordmark: linear-gradient(180deg, #F4C2C9 0%, #C98A7A 100%);   /* vertical, wordmark fill */
  --gradient-ambient:  radial-gradient(120% 120% at 50% 0%, rgba(201,138,122,0.18) 0%, rgba(20,23,31,0) 60%);

  /* ---- Text Colors ---- */
  --fg-1:      rgba(255,255,255,0.92);   /* primary text on dark */
  --fg-2:      rgba(255,255,255,0.70);   /* body copy (spec default) */
  --fg-3:      rgba(255,255,255,0.45);   /* muted / captions / meta */
  --fg-rose:   #F4C2C9;                  /* accented text */
  --fg-on-accent: #14171F;               /* text on rose-gold fills */

  /* ---- Hairlines & Borders ---- */
  --border-faint:  1px solid rgba(244,194,201,0.08);  /* glass idle border */
  --border-soft:   1px solid rgba(255,255,255,0.08);
  --border-accent: 1px solid rgba(244,194,201,0.28);  /* glass hover / active */

  /* ---- Type Families ---- */
  --font-serif: "Playfair Display", Georgia, serif;     /* emotion / display */
  --font-sans:  "Montserrat", "Avenir Next", "Avenir", system-ui, sans-serif; /* function / UI */

  /* ---- Type Scale (display = serif; everything else = sans) ---- */
  --text-hero:   clamp(3rem, 7vw, 6.5rem);   /* Playfair 400, tracking -0.02em */
  --text-h1:     clamp(2.5rem, 5vw, 4rem);
  --text-h2:     2rem;       /* Montserrat 700, uppercase, tracking 0.15em */
  --text-h3:     1.25rem;    /* Montserrat 600, uppercase, tracking 0.15em */
  --text-body:   1rem;       /* Montserrat 400, line-height 1.6 */
  --text-small:  0.875rem;
  --text-meta:   0.75rem;    /* uppercase labels, wide tracking */

  /* ---- Tracking ---- */
  --track-hero:     -0.02em;
  --track-wordmark:  0.04em;
  --track-heading:   0.15em;
  --track-tagline:   0.28em;

  /* ---- Radii ---- */
  --radius-card:    14px;   /* service tiles / glass cards */
  --radius-button:  999px;  /* pill buttons */
  --radius-icon:    12px;   /* icon boxes */
  --radius-sm:      8px;

  /* ---- Motion Tokens ---- */
  --duration-ui:     200ms;   /* standard micro-interactions */
  --duration-button: 400ms;   /* 3D box-flip buttons */
  --duration-page:   500ms;   /* route crossfade */
  --duration-cube:   1200ms;  /* hero 3D cube rotation */
  --ease-vantum-fluid: cubic-bezier(0.25, 1, 0.5, 1);  /* universal easing */

  /* ---- Elevation (single-layer only — multi-layer box-shadow is forbidden) ---- */
  --shadow-drop:  drop-shadow(0 4px 12px rgba(201,138,122,0.15));  /* the standard */
  --shadow-glow:  drop-shadow(0 0 24px rgba(244,194,201,0.25));    /* accent glow */
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.v-hero {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-hero);
  letter-spacing: var(--track-hero);
  line-height: 1.02;
  color: var(--fg-1);
}

.v-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-h1);
  letter-spacing: var(--track-hero);
  line-height: 1.1;
  color: var(--fg-1);
}

.v-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-h2);
  text-transform: uppercase;
  letter-spacing: var(--track-heading);
  color: var(--fg-1);
}

.v-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-h3);
  text-transform: uppercase;
  letter-spacing: var(--track-heading);
  color: var(--fg-1);
}

.v-tagline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-tagline);
  color: var(--fg-2);
}

.v-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--fg-2);
}

.v-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-heading);
  color: var(--fg-3);
}

.v-wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: var(--track-wordmark);
  background: var(--gradient-wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Gradient text helper (rose → copper) */
.v-metal-text {
  background: var(--gradient-metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   GLASSMORPHISM UTILITY  (.glass / .is-glass-active)
   Idle = no backdrop-filter (GPU-cheap). Activate via
   IntersectionObserver -> add .is-glass-active when in viewport.
   ============================================================ */

.glass {
  background: rgba(26, 29, 38, 0.85);
  border: var(--border-faint);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform var(--duration-ui) var(--ease-vantum-fluid),
              border-color var(--duration-ui) var(--ease-vantum-fluid);
}

.glass.is-glass-active {
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
}

.glass:hover {
  transform: translateY(-2px) translateZ(0);
  border-color: rgba(244,194,201,0.28);
}