/*
 * Semantic CSS preview
 * --------------------
 * Opt-in URL: ?semantic-css=1
 *
 * This file is intentionally isolated from the production stylesheet.
 * Primitive tokens contain raw values; component rules consume semantic
 * aliases so visual decisions can be changed without hunting literals.
 */

:root[data-semantic-css="preview"] {
  /* Primitive colour scale */
  --ds-navy-950: #101944;
  --ds-navy-900: #17296d;
  --ds-navy-800: #1e2d78;
  --ds-navy-700: #293b83;
  --ds-purple-700: #5f2696;
  --ds-purple-600: #7127aa;
  --ds-blue-500: #2c98d3;
  --ds-red-600: #d9273b;
  --ds-green-700: #176c3a;
  --ds-white: #ffffff;
  --ds-slate-950: #111827;
  --ds-slate-900: #172035;
  --ds-slate-800: #263044;
  --ds-slate-700: #3f4a5e;
  --ds-slate-600: #596579;
  --ds-slate-500: #69758a;
  --ds-slate-400: #98a2b3;
  --ds-slate-300: #cfd6e1;
  --ds-slate-200: #e1e6ed;
  --ds-slate-100: #edf1f5;
  --ds-slate-50: #f7f9fb;

  /* Semantic colour roles */
  --ds-color-brand-primary: var(--ds-navy-800);
  --ds-color-brand-strong: var(--ds-navy-950);
  --ds-color-brand-secondary: var(--ds-purple-600);
  --ds-color-accent: var(--ds-blue-500);
  --ds-color-danger: var(--ds-red-600);
  --ds-color-success: var(--ds-green-700);
  --ds-color-text-primary: var(--ds-slate-900);
  --ds-color-text-secondary: var(--ds-slate-700);
  --ds-color-text-muted: var(--ds-slate-500);
  --ds-color-text-inverse: var(--ds-white);
  --ds-color-surface-page: var(--ds-white);
  --ds-color-surface-subtle: var(--ds-slate-50);
  --ds-color-surface-muted: var(--ds-slate-100);
  --ds-color-surface-raised: var(--ds-white);
  --ds-color-border-subtle: var(--ds-slate-200);
  --ds-color-border-strong: var(--ds-slate-300);
  --ds-color-action-primary: var(--ds-navy-800);
  --ds-color-action-primary-hover: var(--ds-navy-950);
  --ds-color-focus: var(--ds-blue-500);
  --ds-gradient-brand: linear-gradient(
    112deg,
    var(--ds-navy-900) 0%,
    var(--ds-navy-800) 44%,
    var(--ds-purple-600) 100%
  );
  --ds-gradient-page: linear-gradient(
    180deg,
    var(--ds-slate-50) 0,
    var(--ds-white) 32rem
  );

  /* Spacing scale */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;

  /* Shape and elevation */
  --ds-radius-control: 0.375rem;
  --ds-radius-panel: 0.5rem;
  --ds-radius-card: 0.625rem;
  --ds-radius-round: 999px;
  --ds-shadow-xs: 0 1px 2px rgba(16, 25, 68, 0.05);
  --ds-shadow-sm: 0 6px 18px rgba(16, 25, 68, 0.07);
  --ds-shadow-md: 0 16px 36px rgba(16, 25, 68, 0.1);
  --ds-shadow-focus: 0 0 0 3px rgba(44, 152, 211, 0.24);

  /* Typography and motion */
  --ds-font-sans: var(--font-family-base);
  --ds-leading-body: 1.6;
  --ds-leading-heading: 1.12;
  --ds-tracking-heading: -0.025em;
  --ds-duration-fast: 160ms;
  --ds-duration-base: 220ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Compatibility bridge for existing theme variables */
  --brand: var(--ds-color-brand-primary);
  --brand-dark: var(--ds-color-brand-strong);
  --cyan: var(--ds-color-brand-secondary);
  --red: var(--ds-color-danger);
  --ink: var(--ds-color-text-primary);
  --ink-soft: var(--ds-color-text-secondary);
  --muted: var(--ds-color-text-muted);
  --line: var(--ds-color-border-subtle);
  --line-strong: var(--ds-color-border-strong);
  --paper: var(--ds-color-surface-page);
  --soft: var(--ds-color-surface-subtle);
  --soft-2: var(--ds-color-surface-muted);
  --hv2-navy: var(--ds-color-brand-primary);
  --hv2-purple: var(--ds-color-brand-secondary);
  --detail-navy: var(--ds-color-brand-primary);
  --detail-purple: var(--ds-color-brand-secondary);
  --detail-line: var(--ds-color-border-subtle);
  --detail-surface: var(--ds-color-surface-subtle);
  --detail-shadow: var(--ds-shadow-sm);
}

/* Foundations */
html[data-semantic-css="preview"] {
  background: var(--ds-color-surface-page);
}

html[data-semantic-css="preview"] body {
  background: var(--ds-color-surface-page);
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-sans);
  line-height: var(--ds-leading-body);
}

html[data-semantic-css="preview"] :focus-visible {
  outline: 2px solid var(--ds-color-focus);
  outline-offset: 3px;
}

html[data-semantic-css="preview"] ::selection {
  background: var(--ds-color-brand-primary);
  color: var(--ds-color-text-inverse);
}

/* Header and primary actions */
html[data-semantic-css="preview"] .site-header--classic {
  border-bottom: 1px solid var(--ds-color-border-subtle);
  background: var(--ds-color-surface-raised);
  box-shadow: var(--ds-shadow-xs);
}

html[data-semantic-css="preview"] .classic-primary-nav::before,
html[data-semantic-css="preview"] .classic-primary-nav::after {
  background: var(--ds-color-border-subtle);
}

html[data-semantic-css="preview"] .classic-primary-nav a {
  color: var(--ds-color-text-secondary);
  transition:
    color var(--ds-duration-fast) var(--ds-ease-standard),
    background-color var(--ds-duration-fast) var(--ds-ease-standard);
}

html[data-semantic-css="preview"] .classic-primary-nav a:hover {
  color: var(--ds-color-action-primary);
}

html[data-semantic-css="preview"] .classic-nav-actions {
  overflow: hidden;
  border-color: var(--ds-color-border-strong);
  border-radius: var(--ds-radius-control);
  background: var(--ds-color-surface-raised);
}

html[data-semantic-css="preview"] .classic-nav-action,
html[data-semantic-css="preview"] .classic-nav-language,
html[data-semantic-css="preview"] .classic-nav-search {
  border-color: var(--ds-color-border-subtle);
  color: var(--ds-color-text-primary);
}

html[data-semantic-css="preview"] .classic-nav-action:hover,
html[data-semantic-css="preview"] .classic-nav-language:hover,
html[data-semantic-css="preview"] .classic-nav-search:hover {
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-action-primary);
}

html[data-semantic-css="preview"] .btn,
html[data-semantic-css="preview"] .not-found-home-link {
  min-height: 44px;
  border-radius: var(--ds-radius-control);
  transition:
    color var(--ds-duration-fast) var(--ds-ease-standard),
    border-color var(--ds-duration-fast) var(--ds-ease-standard),
    background-color var(--ds-duration-fast) var(--ds-ease-standard),
    box-shadow var(--ds-duration-fast) var(--ds-ease-standard);
}

html[data-semantic-css="preview"] .btn--primary,
html[data-semantic-css="preview"] .not-found-home-link {
  border-color: var(--ds-color-action-primary);
  background: var(--ds-color-action-primary);
  color: var(--ds-color-text-inverse);
}

html[data-semantic-css="preview"] .btn--primary:hover,
html[data-semantic-css="preview"] .not-found-home-link:hover {
  border-color: var(--ds-color-action-primary-hover);
  background: var(--ds-color-action-primary-hover);
}

/* Inner-page masthead */
html[data-semantic-css="preview"] .page-head {
  background-color: var(--ds-color-brand-primary);
  background-image: var(--ds-gradient-brand);
}

html[data-semantic-css="preview"] .page-head h1 {
  color: var(--ds-color-text-inverse);
  font-weight: 820;
  line-height: var(--ds-leading-heading);
  letter-spacing: var(--ds-tracking-heading);
}

html[data-semantic-css="preview"] .page-head__notch path {
  fill: var(--ds-color-surface-page);
}

/* Homepage discovery and content rhythm */
html[data-semantic-css="preview"] .hv2-search {
  overflow: hidden;
  border: 1px solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-panel);
  background: var(--ds-color-surface-raised);
  box-shadow: var(--ds-shadow-xs);
}

html[data-semantic-css="preview"] .hv2-feature-grid {
  gap: var(--ds-space-4);
}

html[data-semantic-css="preview"] .hv2-category-list,
html[data-semantic-css="preview"] .hv2-hero-slider {
  overflow: hidden;
  border: 1px solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-card);
  background: var(--ds-color-surface-raised);
}

html[data-semantic-css="preview"] .hv2-hero-slider {
  box-shadow: var(--ds-shadow-sm);
}

html[data-semantic-css="preview"] .hv2-section {
  background: var(--ds-color-surface-page);
}

html[data-semantic-css="preview"] .hv2-section:nth-of-type(even) {
  background: var(--ds-color-surface-subtle);
}

html[data-semantic-css="preview"] .hv2-section-head::before {
  color: var(--ds-color-surface-muted);
}

html[data-semantic-css="preview"] .hv2-product-track,
html[data-semantic-css="preview"] .hv2-news-track {
  gap: var(--ds-space-4);
  border: 0;
}

/* V2 preserves the original card surfaces, radii, borders and elevation. */
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .hv2-product-card,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .hv2-member-grid a,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .hv2-career-card,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .hv2-news-card {
  overflow: hidden;
  border: 1px solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-card);
  background: var(--ds-color-surface-raised);
  box-shadow: var(--ds-shadow-xs);
  transition:
    border-color var(--ds-duration-base) var(--ds-ease-standard),
    box-shadow var(--ds-duration-base) var(--ds-ease-standard),
    transform var(--ds-duration-base) var(--ds-ease-standard);
}

html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .hv2-product-card:hover,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .hv2-member-grid a:hover,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .hv2-career-card:hover,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .hv2-news-card:hover {
  border-color: var(--ds-color-border-strong);
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-3px);
}

html[data-semantic-css="preview"] .hv2-slider-button {
  border-radius: var(--ds-radius-control);
  background: var(--ds-color-action-primary);
  box-shadow: var(--ds-shadow-sm);
}

html[data-semantic-css="preview"] .hv2-slider-button:hover {
  background: var(--ds-color-brand-secondary);
}

html[data-semantic-css="preview"] .hv2-metrics,
html[data-semantic-css="preview"] .hv2-career-intro,
html[data-semantic-css="preview"] .site-footer--classic {
  background-color: var(--ds-color-brand-primary);
  background-image: var(--ds-gradient-brand);
}

html[data-semantic-css="preview"] .hv2-metrics__grid a {
  border-radius: var(--ds-radius-panel);
  box-shadow: var(--ds-shadow-sm);
}

/* Archive shell, filters, toolbars and cards */
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .page-view > .section,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .page-view .news-story-section,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .page-view .event-story-section,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .page-view .startup-section,
html[data-semantic-css="preview"] .contact-page__section {
  background: var(--ds-gradient-page);
}

html[data-semantic-css="preview"] .archive-shell .filter-panel,
html[data-semantic-css="preview"] .about-sidebar--catalog,
html[data-semantic-css="preview"] .support-sidebar {
  overflow: hidden;
  border: 1px solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-panel) !important;
  background: var(--ds-color-surface-raised);
  box-shadow: var(--ds-shadow-xs);
}

html[data-semantic-css="preview"] .archive-catalog-sidebar__head,
html[data-semantic-css="preview"] .archive-agenda-sidebar__head {
  border-color: var(--ds-color-border-subtle);
  background: var(--ds-color-surface-muted);
  color: var(--ds-color-brand-primary);
}

html[data-semantic-css="preview"] .filter-panel--catalog .filter-group--catalog,
html[data-semantic-css="preview"] .about-sidebar--catalog .about-nav {
  background: var(--ds-color-surface-subtle);
}

html[data-semantic-css="preview"] .filter-panel--catalog .filter-link,
html[data-semantic-css="preview"] .filter-panel--agenda .filter-link,
html[data-semantic-css="preview"] .about-sidebar--catalog .about-nav a {
  border-color: var(--ds-color-border-subtle);
  color: var(--ds-color-text-secondary);
}

html[data-semantic-css="preview"] .filter-panel--catalog .filter-link:hover,
html[data-semantic-css="preview"] .filter-panel--catalog .filter-link.is-active,
html[data-semantic-css="preview"] .filter-panel--agenda .filter-link:hover,
html[data-semantic-css="preview"] .filter-panel--agenda .filter-link.is-active,
html[data-semantic-css="preview"] .about-sidebar--catalog .about-nav a:hover,
html[data-semantic-css="preview"] .about-sidebar--catalog .about-nav a.is-active {
  color: var(--ds-color-action-primary);
}

html[data-semantic-css="preview"] .filter-panel--catalog .filter-link.is-active::before,
html[data-semantic-css="preview"] .filter-panel--agenda .filter-link.is-active::before,
html[data-semantic-css="preview"] .about-sidebar--catalog .about-nav a.is-active::before {
  background: var(--ds-color-action-primary);
}

html[data-semantic-css="preview"] .archive-toolbar {
  overflow: hidden;
  border: 1px solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-panel) !important;
  background: var(--ds-color-surface-raised);
  box-shadow: var(--ds-shadow-xs);
}

html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .news-archive-card,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .catalog-archive-card,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .catalog-card,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .member-card,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .startup-program-card {
  overflow: hidden;
  border-color: var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-card) !important;
  background: var(--ds-color-surface-raised);
  box-shadow: var(--ds-shadow-xs);
  transition:
    border-color var(--ds-duration-base) var(--ds-ease-standard),
    box-shadow var(--ds-duration-base) var(--ds-ease-standard),
    transform var(--ds-duration-base) var(--ds-ease-standard);
}

html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .news-archive-card:hover,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .catalog-archive-card:hover,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .catalog-card:hover,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .member-card:hover,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .startup-program-card:hover {
  border-color: var(--ds-color-border-strong);
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-3px);
}

html[data-semantic-css="preview"] .news-archive-card__action,
html[data-semantic-css="preview"] .catalog-card__action,
html[data-semantic-css="preview"] .member-card__footer {
  border-radius: var(--ds-radius-control) !important;
  background: var(--ds-color-action-primary) !important;
  color: var(--ds-color-text-inverse) !important;
}

/* Detail, FAQ, contact and utility pages */
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .product-detail-hero,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .member-profile-hero,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .detail-card,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .company-sidebar-card,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .member-profile-card,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .news-story-cover,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .news-story-content,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .news-story-related,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .event-story-meta,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .startup-nav,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .startup-content,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .content-panel,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .info-panel,
html[data-semantic-css="preview"]:not([data-semantic-refinement="clean"]) .membership-conditions-card {
  overflow: hidden;
  border-color: var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-card) !important;
  background: var(--ds-color-surface-raised);
  box-shadow: var(--ds-shadow-sm);
}

html[data-semantic-css="preview"] .contact-details,
html[data-semantic-css="preview"] .contact-map,
html[data-semantic-css="preview"] .contact-form-card {
  overflow: hidden;
  border-color: var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-sm);
}

html[data-semantic-css="preview"] .contact-details {
  background-color: var(--ds-color-brand-primary);
  background-image: var(--ds-gradient-brand);
}

html[data-semantic-css="preview"] .faq-list {
  border-color: var(--ds-color-border-strong);
}

html[data-semantic-css="preview"] .faq-item,
html[data-semantic-css="preview"] .faq-item:hover,
html[data-semantic-css="preview"] .faq-item[open] {
  border-color: var(--ds-color-border-subtle);
}

html[data-semantic-css="preview"] .faq-item__toggle,
html[data-semantic-css="preview"] .faq-item[open] .faq-item__toggle,
html[data-semantic-css="preview"] .faq-contact-card > a {
  color: var(--ds-color-action-primary);
}

html[data-semantic-css="preview"] .not-found-layout {
  border-color: var(--ds-color-border-strong);
}

html[data-semantic-css="preview"] .not-found-code::before {
  background: linear-gradient(
    90deg,
    var(--ds-color-accent) 0 62%,
    var(--ds-color-danger) 62%
  );
}

html[data-semantic-css="preview"] .new-footer-signup {
  border-color: var(--ds-color-border-subtle);
  background: var(--ds-color-surface-muted);
}

html[data-semantic-css="preview"] .new-footer-signup__join,
html[data-semantic-css="preview"] .new-footer-signup__copy {
  border-color: var(--ds-color-border-strong);
}

html[data-semantic-css="preview"] .new-footer-signup__form input {
  border-radius: var(--ds-radius-control) 0 0 var(--ds-radius-control);
}

html[data-semantic-css="preview"] .new-footer-signup__form button {
  border-radius: 0 var(--ds-radius-control) var(--ds-radius-control) 0;
  background: var(--ds-color-action-primary);
}

/* Responsive adaptations remain token-driven. */
@media (max-width: 860px) {
  :root[data-semantic-css="preview"] {
    --ds-radius-panel: 0.375rem;
    --ds-radius-card: 0.5rem;
  }

  html[data-semantic-css="preview"] .archive-page .filter-panel,
  html[data-semantic-css="preview"] .archive-page .filter-panel--catalog,
  html[data-semantic-css="preview"] .archive-page .filter-panel--agenda {
    margin-bottom: var(--ds-space-8);
  }
}

@media (max-width: 620px) {
  html[data-semantic-css="preview"] .hv2-feature-grid {
    gap: var(--ds-space-3);
  }

  html[data-semantic-css="preview"] .hv2-product-track,
  html[data-semantic-css="preview"] .hv2-news-track {
    gap: var(--ds-space-3);
  }

  html[data-semantic-css="preview"] .contact-details,
  html[data-semantic-css="preview"] .contact-map,
  html[data-semantic-css="preview"] .contact-form-card {
    border-radius: var(--ds-radius-panel);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-semantic-css="preview"] *,
  html[data-semantic-css="preview"] *::before,
  html[data-semantic-css="preview"] *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}