/* NexDerm design tokens — source: nexderm_claude_website_spec/assets/css/tokens.css
   Extended for interface states. Palette is locked; no color outside these values. */

:root {
  /* Approved palette */
  --nd-teal: #173c46;
  --nd-white: #ffffff;
  --nd-charcoal: #252525;
  --nd-silver: #d7dade;
  --nd-slate: #61696f;
  --nd-ink: #040707;
  --nd-gold: #d4af36;

  /* Derived tints of approved colors (alpha only — no new hues) */
  --nd-teal-deep: rgba(4, 7, 7, 0.25); /* ink overlay for hover on teal */
  --nd-rule: 1px solid rgba(37, 37, 37, 0.18);
  --nd-rule-on-dark: 1px solid rgba(255, 255, 255, 0.22);
  --nd-shadow-quiet: 0 12px 40px rgba(4, 7, 7, 0.08);

  /* Typography */
  --nd-font-editorial: "Newsreader", Georgia, serif;
  --nd-font-interface: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --nd-text-display-xl: clamp(3rem, 7vw, 6.5rem);
  --nd-text-display: clamp(2.5rem, 5vw, 5rem);
  --nd-text-h1: clamp(2.3rem, 4.5vw, 4.25rem);
  --nd-text-h2: clamp(1.9rem, 3.5vw, 3.25rem);
  --nd-text-h3: clamp(1.45rem, 2vw, 2rem);
  --nd-text-body-lg: clamp(1.125rem, 1.4vw, 1.35rem);
  --nd-text-body: 1.0625rem;
  --nd-text-small: 0.875rem;
  --nd-text-label: 0.8125rem;

  /* Layout */
  --nd-content: 42.5rem;   /* 680px long-form */
  --nd-wide: 77.5rem;      /* 1240px primary */
  --nd-media-wide: 90rem;  /* 1440px media */
  --nd-gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Shape */
  --nd-radius-small: 3px;
  --nd-radius-medium: 6px;

  /* Rhythm */
  --nd-section-compact: clamp(3rem, 5vw, 4.5rem);
  --nd-section-standard: clamp(4.5rem, 6vw, 6rem);
  --nd-section-editorial: clamp(6rem, 8vw, 8rem);
  --nd-grid-gap: clamp(1.5rem, 3vw, 3.5rem);

  /* Motion */
  --nd-transition-fast: 160ms ease;
  --nd-transition-standard: 240ms ease;
}