/*
 * Nurovelle website design tokens
 * Canonical source: NUROVELLE_HOMEPAGE_IMPLEMENTATION_BRIEF.md sections 0.6–0.9.
 * Keep component CSS semantic: components should consume these variables instead
 * of introducing new colors, gradients, type sizes, radii, or spacing values.
 */

:root {
  /* Brand surfaces */
  --color-black: #050706;
  --color-matte-black: #080b09;
  --color-gunmetal: #252b2c;
  --color-gunmetal-dark: #15191a;
  --color-deep-green: #0a1913;
  --color-emerald: #112b21;
  --color-emerald-bright: #163A26;

  /* Text */
  --color-text-light: #f5f7f4;
  --color-text-muted: #b9c3bd;
  --color-text-subtle: rgba(245, 247, 244, 0.68);
  --color-text-on-gold: #050706;

  /* Gold palette and approved gradients */
  --color-gold-deep: #926f34;
  --color-gold: #d2ac47;
  --color-gold-light: #f7ef8a;
  --gradient-gold-border: linear-gradient(135deg, #ae8625, #f7ef8a, #d2ac47, #edc967);
  --gradient-gold-title: linear-gradient(135deg, #dfbd69, #926f34);
  --gradient-gold-cta: linear-gradient(135deg, #f9f295, #e0aa3e, #faf398, #b88a44);
  --gradient-gold-text-alt: linear-gradient(135deg, #c5a059 0%, #fdf0cd 50%, #d4af37 100%);

  /* Approved website mapping, selected in visual comparison (2026-07-04). */
  --gradient-title: var(--gradient-gold-title);       /* Gold 2 */
  --gradient-frame: var(--gradient-gold-border);     /* Gold 1 */
  --gradient-action: var(--gradient-gold-cta);       /* Gold 3 */
  --gradient-divider: var(--gradient-gold-cta);      /* Gold 3 */
  --gradient-highlight: var(--gradient-gold-cta);    /* Gold 3 */

  /* Dark section gradients */
  --gradient-green-deep: linear-gradient(135deg, #0a1913 0%, #112b21 50%, #1d4234 100%);
  --gradient-green-teal: linear-gradient(180deg, #071412 0%, #163a35 100%);
  --gradient-section-black: linear-gradient(180deg, #050706 0%, #080b09 100%);

  /* Typography */
  --font-display: "Eastman Grotesque Alt", "Eastman Grotesque", "Inter", Arial, sans-serif;
  --font-technical: "Eastman Grotesque Alt", "Eastman Grotesque", "Inter", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-size-h1: clamp(4rem, 6vw, 5.5rem);
  --font-size-h2: clamp(2.75rem, 4vw, 3.75rem);
  --font-size-h3: clamp(1.125rem, 1.6vw, 1.5rem);
  --font-size-body: clamp(1.0625rem, 1.2vw, 1.1875rem);
  --font-size-label: clamp(0.75rem, 0.9vw, 0.9375rem);
  --font-size-button: clamp(0.9375rem, 1vw, 1.0625rem);
  --line-height-heading: 1.04;
  --line-height-body: 1.6;

  /* Layout and spacing */
  --container-max: 75rem;
  --page-gutter: clamp(1.125rem, 3vw, 1.5rem);
  --section-space: 7.5rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5.5rem;
  --space-10: 7.5rem;

  /* Shape, borders, depth, and motion */
  --radius-card: 1.125rem;
  --radius-control: 0.75rem;
  --radius-button: 999px;
  --control-height: 2.75rem;
  --border-subtle: 1px solid rgba(46, 139, 103, 0.28);
  --border-gold: 1px solid rgba(212, 175, 55, 0.72);
  --shadow-card: 0 1rem 2.5rem rgba(0, 0, 0, 0.34);
  --shadow-gold: 0 0 1.5rem rgba(212, 175, 55, 0.18);
  --shadow-emerald: 0 0 2rem rgba(46, 139, 103, 0.16);
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;

  /* Structural values retained from the current homepage */
  --header-height: 2.75rem;
  --sidebar-width: 14.6875rem;
}

@media (max-width: 1199px) {
  :root {
    --section-space: 5.5rem;
    --font-size-h1: clamp(3.5rem, 7vw, 4.5rem);
  }
}

@media (max-width: 899px) {
  :root {
    --font-size-h1: clamp(2.625rem, 9vw, 3.5rem);
    --font-size-h2: clamp(2.125rem, 7vw, 2.625rem);
    --font-size-h3: clamp(1.0625rem, 4vw, 1.3125rem);
    --font-size-body: clamp(1rem, 3vw, 1.125rem);
  }
}

@media (max-width: 639px) {
  :root {
    --page-gutter: 1.125rem;
    --section-space: 4rem;
    --control-height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}