/* Valmeer landing — design tokens.
   Locked to Valmeer Dark per prd/_foundations/valmeer-ui-principles.md.
   Type scale and spacing follow a 4px base; sizes are fluid via clamp(). */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-400-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Surfaces */
  --bg: #121212;
  --bg-deep: #0e0e0e;
  --surface: #1e1e1e;
  --surface-raised: #252525;
  --surface-warm: #1a1816;

  /* Borders */
  --border: #2c2c2c;
  --border-subtle: #252525;
  --border-strong: #383634;

  /* Text */
  --text: #e1e1e1;
  --text-secondary: #a0a0a0;
  --text-tertiary: #808080;
  --text-disabled: #5a5a5a;
  --on-primary: #1c1b19;

  /* Brand */
  --primary: #c4a882;
  --primary-hover: #d4bc9a;
  --primary-muted: rgba(196, 168, 130, 0.12);
  --primary-faint: rgba(196, 168, 130, 0.06);

  /* Semantic — restrained, warm */
  --secondary: #8a9a8e;
  --accent: #b07a6b;
  --accent-muted: rgba(176, 122, 107, 0.12);
  --success: #7a9a82;
  --warning: #b8a06a;
  --danger: #b07a6b;

  /* Focus */
  --focus-ring: rgba(196, 168, 130, 0.25);

  /* Atmosphere */
  --grid-line: rgba(255, 255, 255, 0.025);
  --grid-line-strong: rgba(255, 255, 255, 0.04);
  --noise-opacity: 0.025;
  --logo-watermark: rgba(196, 168, 130, 0.05);

  /* Typography */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI Variable", sans-serif;
  --font-serif: "Lora", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
  --font-ui: "Poppins", system-ui, -apple-system, "Segoe UI Variable", sans-serif;
  --font-product: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  /* Type scale (fluid) */
  --t-caption: 0.75rem;
  --t-small: 0.875rem;
  --t-body: 1rem;
  --t-lead: clamp(1.0625rem, 0.97rem + 0.4vw, 1.25rem);
  --t-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --t-h3: clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
  --t-h2: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  --t-h1: clamp(2.75rem, 1.8rem + 4.5vw, 6.5rem);
  --t-display: clamp(3.5rem, 2.3rem + 6vw, 9rem);

  /* Weight */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  /* Spacing (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;

  /* Layout */
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --nav-height: 64px;

  /* Hero video tint */
  --hero-video-tint: color-mix(in srgb, var(--primary) 76%, var(--accent) 24%);
  --hero-video-tint-rich: color-mix(in srgb, var(--primary) 86%, var(--accent) 14%);
  --hero-video-brightness: 0.92;
  --hero-video-saturate: 0.9;
  --hero-video-contrast: 1.08;
  --hero-video-tint-hue-opacity: 0.88;
  --hero-video-tint-color-opacity: 0.22;
  --hero-native-w: 2880;
  --hero-native-h: 1248;
  --hero-aspect: calc(var(--hero-native-w) / var(--hero-native-h));
  --hero-display-w: min(calc(var(--hero-native-w) * 1px), 100vw);
  --hero-spectrum-black: #000000;
  --hero-bg-top: #000000;
  --hero-bg-mid: var(--bg-deep);
  --hero-bg-foot: var(--bg);

  /* Radii — outer chrome sharp, inner controls 6–8px */
  --r-0: 0;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
  --d-fast: 140ms;
  --d-med: 220ms;
  --d-slow: 480ms;

  /* Shadows (Valmeer rule: subtle, max 0 2px 8px) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35);
}