/*
 * The Venture Dept. Design Tokens
 * Frozen after system test and Phase D audit, August 2026.
 *
 * Do not introduce new visual values in component CSS without first
 * updating this token system and DESIGN-SYSTEM.md.
 */

:root {
  /* Color */
  --color-text-primary: #111111;
  --color-text-secondary: #111111;
  --color-text-muted: #595959;
  --color-border-subtle: #DCDCDC;
  --color-surface-primary: #FFFFFF;

  /* Brand asset
   * Copy the verified live Venture Dept. asset to:
   * /assets/brand-gradient-hero.png
   * Path is relative to this stylesheet's own location, not the consuming page
   * (CSS url() resolves against the stylesheet file). If tokens.css lives in a
   * subfolder (e.g. /tokens/), use ../assets/... accordingly.
   */
  --asset-brand-gradient-hero: url('../assets/brand-gradient-hero.png');

  /* Nav logo asset
   * Approved stacked wordmark lockup, replaces the text wordmark in the header.
   * Copy the approved logo file to:
   * /assets/logo-nav.png
   * Same relative-path rule as above.
   */
  --asset-logo-nav: url('../assets/logo-nav.png');
  --logo-height-nav: 56px; /* unified — same at all breakpoints, no mobile reduction */

  /* Font family */
  --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Desktop type endpoints */
  --font-size-h1-desktop: 58px;
  --font-size-h2-desktop: 36px;
  --font-size-h3-desktop: 24px;

  /* Mobile type endpoints */
  --font-size-h1-mobile: 40px;
  --font-size-h2-mobile: 30px;
  --font-size-h3-mobile: 22px;

  /* Stable type sizes */
  --font-size-body: 16px;
  --font-size-small: 14px;

  /* Line heights */
  --line-height-h1: 1.08;
  --line-height-h2: 1.12;
  --line-height-h3: 1.20;
  --line-height-body: 1.55;
  --line-height-small: 1.40;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 88px;

  /* Named spacing relationships */
  --stack-standard: var(--space-3);
  --stack-loose: var(--space-4);

  /* Widths */
  --container-max: 1440px;
  --reading-max: 640px;

  /* Radius */
  --radius-media: 4px;
  --radius-structural: 0px;

  /* Footer */
  --footer-rule-width: 1px;
  --footer-rule-color: var(--color-border-subtle);

  /* Mobile defaults */
  --page-gutter: 16px;
  --grid-columns: 4;
  --grid-gutter: 16px;
  --section-standard-y: 56px;
  --section-compact-y: 48px;
  --hero-height: 390px;
  --hero-padding-y: 40px;
  --hero-padding-x: 20px;
  --hero-title-max: 100%;

  /* Mobile typography */
  --font-size-h1: var(--font-size-h1-mobile);
  --font-size-h2: var(--font-size-h2-mobile);
  --font-size-h3: var(--font-size-h3-mobile);
}

/* Tablet: 768px to 1023px
 * Typography interpolates between the approved mobile and desktop endpoints.
 */
@media (min-width: 768px) {
  :root {
    --page-gutter: 32px;
    --grid-columns: 8;
    --grid-gutter: 24px;

    --hero-height: 430px;
    --hero-padding-y: 56px;
    --hero-padding-x: 32px;
    --hero-title-max: 760px;

    --font-size-h1: clamp(40px, calc(7.03125vw - 14px), 58px);
    --font-size-h2: clamp(30px, calc(2.34375vw + 12px), 36px);
    --font-size-h3: clamp(22px, calc(0.78125vw + 16px), 24px);
  }
}

/* Desktop: 1024px and above */
@media (min-width: 1024px) {
  :root {
    --page-gutter: 48px;
    --grid-columns: 12;
    --grid-gutter: 32px;
    --section-standard-y: 88px;
    --section-compact-y: 56px;

    --hero-height: 470px;
    --hero-padding-y: 64px;
    --hero-padding-x: 48px;
    --hero-title-max: 900px;

    --font-size-h1: var(--font-size-h1-desktop);
    --font-size-h2: var(--font-size-h2-desktop);
    --font-size-h3: var(--font-size-h3-desktop);
  }
}

/* Recommended foundation application */
html {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-surface-primary);
}

body {
  margin: 0;
  color: var(--color-text-primary);
  background: var(--color-surface-primary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
}

.ds-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.ds-logo {
  display: block;
  height: var(--logo-height-nav);
  width: auto;
}

.ds-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

.ds-reading-width {
  max-width: var(--reading-max);
}

.ds-section-standard {
  padding-block: var(--section-standard-y);
}

.ds-section-compact {
  padding-block: var(--section-compact-y);
}

.ds-stack-standard > * + * {
  margin-top: var(--stack-standard);
}

.ds-stack-loose > * + * {
  margin-top: var(--stack-loose);
}

.ds-h1 {
  margin: 0;
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: var(--font-weight-regular);
}

.ds-h2 {
  margin: 0;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: var(--font-weight-regular);
}

.ds-h3 {
  margin: 0;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-medium);
}

.ds-body {
  margin: 0;
  max-width: var(--reading-max);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: var(--font-weight-regular);
}

.ds-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: var(--font-weight-regular);
}

.ds-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-media);
  object-fit: cover;
}

.ds-hero {
  height: var(--hero-height);
  padding-block: var(--hero-padding-y);
  background-image: var(--asset-brand-gradient-hero);
  background-size: cover;
  background-position: center;
}

/* Hero background stays full bleed. Hero content (headline, and any future
 * hero content) aligns to the same centered container edge as page content,
 * using --hero-padding-x as its inset instead of relying on the hero's own
 * padding. This keeps the hero visually flush with the nav wordmark and
 * footer content above --container-max (1440px) viewport widths, where
 * .ds-container's centering would otherwise create a growing gap against a
 * flat-padded full-bleed hero. */
.ds-hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--hero-padding-x);
}

.ds-hero .ds-h1 {
  max-width: var(--hero-title-max);
}

.ds-cta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
}

.ds-cta__text {
  text-decoration: none;
}

.ds-cta:hover .ds-cta__text,
.ds-cta:focus-visible .ds-cta__text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.ds-inline-link {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ds-footer-rule {
  width: 100%;
  height: var(--footer-rule-width);
  background: var(--footer-rule-color);
}

/* Mobile composition guardrail.
 * At mobile widths, multi-region layout components should default to stacking
 * full width rather than preserving desktop column relationships.
 */
@media (max-width: 767px) {
  .ds-mobile-stack {
    display: block;
  }

  .ds-mobile-stack > * + * {
    margin-top: var(--space-4);
  }
}