/* Hallmark · v2.0.0 · theme: carbon-daylight (by request) · genre: modern-minimal · job: enquire */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 · weakest: R, removed all eyebrows, pill badges, top bars, and fake telemetry to let Carbon typography and 2x grid breathe */

/* Fonts are loaded by a <link rel="stylesheet"> in each page's <head> so the
   browser can fetch them in parallel. Do not reintroduce a CSS import rule here
   (enforced by tests/guardrails.test.cjs). */

:root {
  /* IBM Carbon Design System — White & Gray 10 Theme Tokens */
  --cds-bg: #ffffff;
  --cds-bg-subtle: #f4f4f4;
  --cds-layer-01: #f4f4f4;
  --cds-layer-02: #ffffff;
  --cds-layer-hover: #e8e8e8;

  /* Text Tokens */
  --cds-text-primary: #161616;
  --cds-text-secondary: #525252;
  --cds-text-muted: #6f6f6f;
  --cds-text-on-color: #ffffff;

  /* Interactive & Brand Tokens (IBM Blue 60) */
  --cds-interactive: #0f62fe;
  --cds-interactive-hover: #0353e9;
  --cds-interactive-active: #002d9c;
  --cds-interactive-subtle: #edf5ff;
  --cds-focus: #0f62fe;

  /* Structural Hairline Borders */
  --cds-border-subtle: #e0e0e0;
  --cds-border-strong: #8d8d8d;

  /* Status Tokens */
  --cds-support-error: #da1e28;
  --cds-support-success: #198038;

  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Typography */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Motion */
  --cds-ease: cubic-bezier(0.2, 0, 0.38, 0.9);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  background-color: var(--cds-bg);
  color: var(--cds-text-primary);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--cds-bg);
  color: var(--cds-text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
  caret-color: var(--cds-interactive);
}

::selection {
  background-color: var(--cds-interactive-subtle);
  color: var(--cds-interactive-active);
}

:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

/* ==========================================================================
   Carbon Typography (Clean, Restrained, Sentence-Case)
   Higher specificity (body ...) ensures Tailwind Play CDN runtime Preflight
   does not reset h1/h2/h3 back to 16px inherit.
   ========================================================================== */

body h1,
body h2,
body h3,
body h4 {
  font-family: var(--font-sans);
  color: var(--cds-text-primary);
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
}

body h1:not([class*="text-"]) {
  font-size: clamp(2.25rem, 3.8vw, 3.25rem);
  line-height: 1.15;
  font-weight: 300;
  max-width: 44rem;
}

body h2:not([class*="text-"]) {
  font-size: clamp(1.625rem, 2.5vw, 2.125rem);
  line-height: 1.22;
  font-weight: 400;
  max-width: 44rem;
}

body h3:not([class*="text-"]) {
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 600;
}

body h4:not([class*="text-"]) {
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 600;
}

body p:not([class*="text-"]) {
  color: var(--cds-text-secondary);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 65ch;
  text-wrap: pretty;
}

body .cds-lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--cds-text-secondary);
  max-width: 60ch;
}

code, pre {
  font-family: var(--font-mono);
}

/* ==========================================================================
   Carbon 2x Container & Section Rhythm
   ========================================================================== */

.cds-container {
  width: 100%;
  max-width: 86rem; /* 1376px capped and centered */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

@media (min-width: 64rem) {
  .cds-container {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
  }
}

.cds-section {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  background-color: var(--cds-bg);
  border-bottom: 1px solid var(--cds-border-subtle);
}

.cds-section--subtle {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  background-color: var(--cds-bg-subtle);
  border-bottom: 1px solid var(--cds-border-subtle);
}

/* ==========================================================================
   Carbon Buttons (One Primary Recipe, One Secondary Outlined Recipe)
   ========================================================================== */

.cds-btn-primary,
.btn-primary,
.btn-pill-blue,
.btn--shine {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  min-height: 3rem; /* 48px */
  padding: 0.75rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--cds-text-on-color);
  background-color: var(--cds-interactive);
  border: 1px solid var(--cds-interactive);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms var(--cds-ease), border-color 120ms var(--cds-ease);
}

.cds-btn-primary:hover,
.btn-primary:hover,
.btn-pill-blue:hover,
.btn--shine:hover {
  background-color: var(--cds-interactive-hover);
  border-color: var(--cds-interactive-hover);
  color: var(--cds-text-on-color);
}

.cds-btn-primary:active,
.btn-primary:active,
.btn-pill-blue:active,
.btn--shine:active {
  background-color: var(--cds-interactive-active);
  border-color: var(--cds-interactive-active);
}

.cds-btn-secondary,
.btn-secondary,
.btn-pill-white {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--cds-interactive);
  background-color: var(--cds-bg);
  border: 1px solid var(--cds-interactive);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms var(--cds-ease), color 120ms var(--cds-ease);
}

.cds-btn-secondary:hover,
.btn-secondary:hover,
.btn-pill-white:hover {
  background-color: var(--cds-interactive-subtle);
  color: var(--cds-interactive-hover);
}

.cds-btn-secondary:active,
.btn-secondary:active,
.btn-pill-white:active {
  background-color: var(--cds-layer-hover);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}