/* HYS master design system (DESIGN.md v26 Liquid Glass) applied to the marketing site.
   Loads after hys-tokens.css (generated) and home.css / seo.css. Colour, radius, motion and shadow values
   come only from tokens: no raw hex or rgb literal belongs in this file (validate:themes enforces it). */

html.dark { color-scheme: dark; }
html.light { color-scheme: light; }

body {
  font-family: var(--sans);
  background-color: var(--bg-page);
  background-image:
    radial-gradient(1100px 620px at 12% -8%, var(--accent-pale), transparent 62%),
    radial-gradient(900px 520px at 100% 4%, var(--review-pale), transparent 58%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
}

/* Serif display stays the editorial accent (DESIGN.md --serif) */
h1, h2, .hero-title, .cta-title, .section-title { font-family: var(--serif); }

/* Glass surfaces: nav rail, cards, panels, tables, disclosures */
#navbar, .site-header {
  background: var(--rail);
  border-bottom-color: var(--glass-border);
  box-shadow: inset 0 -1px 0 var(--glass-top);
}
.expertise-card--boxed, .expertise-card--featured, .expertise-card--disclosure, .proof-card,
.proof-disclosure, .proof-library-details, .case-study-card, .case-study-card-compact,
.showcase-card, .stream-card, .stream-card--expertise, .testimonial-card, .card-boxed,
.insight-card, .comparison-matrix-wrap, .services-table, .about-highlights,
.contact-intro, .contact-form-panel, .lead-form-panel {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--ambient-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.contact-intro { background: var(--glass-elevated); }
.contact-form-panel { background: var(--glass); }

/* A boxed card keeps its pill inside the glass: the unboxed list rows this class came from had no side padding
   (Simon 20 Oct 26: the pills in Additional delivery work sat flush against the box edge). */
.expertise-card--disclosure,
.proof-disclosure.expertise-card--disclosure { padding-left: var(--space-8); padding-right: var(--space-8); }
.expertise-card--disclosure { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.proof-library-list { gap: var(--space-4) var(--space-6); }

/* Interactive cards lift to the elevated glass on hover/focus */
.case-study-card:hover, .stream-card:hover, .stream-card--expertise:hover, .showcase-card:hover,
.proof-disclosure:hover, .proof-library-details:hover, .insight-card:hover {
  background: var(--glass-elevated);
  border-color: var(--accent);
  box-shadow: var(--ambient-shadow), var(--active-ring);
}

/* Control contract: pill-shaped, glass, visible focus ring */
.nav-cta, .btn-primary, .btn-secondary, .button, .button-secondary, .stream-cta, button.btn-primary, button.btn-secondary,
.lead-form button[type="submit"] {
  border-radius: var(--control-radius);
}
/* Filled action buttons: the gradient runs under the whole button with no ring. A translucent border over the gradient
   plus the inset top highlight drew a pale line along the top edge (Simon 20 Oct 26, "Contact Simon"). */
.nav-cta, .btn-primary, .button, button.btn-primary,
.nav-cta:hover, .btn-primary:hover, .button:hover, .nav-cta.active {
  border-color: transparent;
  background-origin: border-box;
  background-clip: border-box;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--accent-2) 28%, transparent);
}
.nav-cta:hover, .btn-primary:hover, .button:hover, .nav-cta.active { box-shadow: var(--active-ring); }

.btn-secondary, .button-secondary {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  box-shadow: var(--control-shadow);
  color: var(--ink);
}
.btn-secondary:hover, .button-secondary:hover {
  border-color: var(--accent);
  box-shadow: var(--active-ring);
  color: var(--ink);
}
.lead-form input, .lead-form textarea, .lead-form select {
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  color: var(--ink);
}
.lead-form input:focus, .lead-form textarea:focus, .lead-form select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: var(--active-ring);
}
:focus-visible { outline: none; box-shadow: var(--active-ring); border-radius: var(--radius-sm); }
.stream-badge, .proof-tag, .tag, .pill, .badge { border-radius: var(--radius-pill); }

/* Tables */
.comparison-matrix-table th, .services-table th { background: var(--well); color: var(--ink); }
.comparison-matrix-table td, .services-table td { border-color: var(--line-2); color: var(--ink-2); }

/* Motion scale: one duration and ease for interactive state changes */
a, button, .nav-cta, .btn-primary, .btn-secondary, .button, .button-secondary, .stream-cta,
.case-study-card, .stream-card, .stream-card--expertise, .showcase-card, .proof-disclosure, .proof-library-details {
  transition-duration: var(--motion-base);
  transition-timing-function: var(--motion-ease);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Print stays on the light ink-on-paper palette whatever the screen theme */
@media print {
  html.dark, html.light {
    --bg: var(--palette-white); --bg-page: var(--palette-white); --card: var(--palette-white);
    --well: var(--palette-ice-100); --line: var(--palette-mist-200); --line-2: var(--palette-mist-200);
    --ink: var(--palette-navy-900); --ink-2: var(--palette-slate-700); --mute: var(--palette-slate-500);
    --accent: var(--palette-blue-700); --accent-2: var(--palette-blue-700);
    --glass: var(--palette-white); --glass-elevated: var(--palette-white);
  }
  body { background-image: none; }
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
}