/*
 * Brulea Tech design system v1 -- candidate local/LAB only.
 * It is activated exclusively by explicit data attributes injected by the
 * preview/build pipeline. Blog and client cases are not present in its route
 * registry, so this file cannot select them accidentally.
 */

html[data-brulea-design-system="v1"] {
  --br-ds-paper: #fff;
  --br-ds-paper-soft: #f7f4ee;
  --br-ds-paper-warm: #fbf4ed;
  --br-ds-ink: #171a22;
  --br-ds-muted: #716f69;
  --br-ds-line: #e5dfd7;
  --br-ds-accent: #d67527;
  --br-ds-accent-dark: #ad571d;
  --br-ds-font-display: "Hanken Grotesk", Arial, Helvetica, sans-serif;
  --br-ds-font-text: "Hanken Grotesk", Arial, Helvetica, sans-serif;
  --br-ds-font-data: "Courier New", monospace;
  --br-ds-wrap: min(1400px, calc(100vw - clamp(40px, 8vw, 120px)));
  --br-ds-section-space: clamp(72px, 8vw, 124px);
  --br-ds-radius: 22px;
  --br-ds-shadow: 0 24px 68px rgba(38, 30, 23, .09);
  color: var(--br-ds-ink);
  background: var(--br-ds-paper);
}

html[data-brulea-design-system="v1"][data-brulea-accent="sand"] {
  --br-ds-accent: #a56f48;
  --br-ds-accent-dark: #7d4f31;
  --br-ds-paper-warm: #f6f0e9;
}
html[data-brulea-design-system="v1"][data-brulea-accent="graphite"] {
  --br-ds-accent: #484d49;
  --br-ds-accent-dark: #282c29;
  --br-ds-paper-warm: #f1f2ef;
}
html[data-brulea-design-system="v1"][data-brulea-accent="sage"] {
  --br-ds-accent: #697968;
  --br-ds-accent-dark: #485647;
  --br-ds-paper-warm: #f1f4ef;
}

html[data-brulea-design-system="v1"][data-brulea-typography="editorial"] {
  --br-ds-font-display: Georgia, "Times New Roman", serif;
}
html[data-brulea-design-system="v1"][data-brulea-typography="modern"],
html[data-brulea-design-system="v1"][data-brulea-typography="technical"] {
  --br-ds-font-display: "Hanken Grotesk", Arial, Helvetica, sans-serif;
}

html[data-brulea-design-system="v1"] body {
  color: var(--br-ds-ink);
  background: var(--br-ds-paper);
  font-family: var(--br-ds-font-text);
  -webkit-font-smoothing: antialiased;
}

/* Breadcrumb: one component, one namespace, no page-specific copy. */
html[data-brulea-design-system="v1"] .br-ds-breadcrumb {
  width: var(--br-ds-wrap);
  min-height: 48px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--br-ds-line);
  color: var(--br-ds-muted);
  font: 700 11px/1.35 var(--br-ds-font-text);
  letter-spacing: .025em;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
html[data-brulea-design-system="v1"] .br-ds-breadcrumb::-webkit-scrollbar { display: none; }
html[data-brulea-design-system="v1"] .br-ds-breadcrumb a {
  color: var(--br-ds-muted);
  text-decoration: none;
  transition: color .18s ease;
}
html[data-brulea-design-system="v1"] .br-ds-breadcrumb a:hover { color: var(--br-ds-accent-dark); }
html[data-brulea-design-system="v1"] .br-ds-breadcrumb [aria-current="page"] { color: var(--br-ds-ink); }
html[data-brulea-design-system="v1"] .br-ds-breadcrumb-separator { color: #b7b0a7; }

/* Shared hero grammar. Selectors are constrained by an allowed template. */
html[data-brulea-design-system="v1"][data-brulea-template] main > section:first-child h1,
html[data-brulea-design-system="v1"][data-brulea-template="content"] #Content > [class^="btc-"] > section:first-of-type h1,
html[data-brulea-design-system="v1"][data-brulea-template="contact"] main.autonomous-content article > section:first-child h1 {
  max-width: 14ch;
  margin-top: 0;
  color: var(--br-ds-ink);
  font-family: var(--br-ds-font-display) !important;
  font-size: clamp(48px, 6vw, 88px) !important;
  font-weight: 800 !important;
  letter-spacing: -.055em !important;
  line-height: .96 !important;
  text-wrap: balance;
}
html[data-brulea-design-system="v1"][data-brulea-template] main > section:first-child h1 em,
html[data-brulea-design-system="v1"][data-brulea-template="content"] #Content > [class^="btc-"] > section:first-of-type h1 em,
html[data-brulea-design-system="v1"][data-brulea-template="contact"] main.autonomous-content article > section:first-child h1 em {
  color: var(--br-ds-accent) !important;
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

html[data-brulea-design-system="v1"][data-brulea-template] main > section:first-child :is(.kicker,.eyebrow,[class*="_eyebrow_"]),
html[data-brulea-design-system="v1"][data-brulea-template="content"] #Content > [class^="btc-"] > section:first-of-type :is(.kicker,.eyebrow),
html[data-brulea-design-system="v1"][data-brulea-template="contact"] main.autonomous-content article > section:first-child [class*="_eyebrow_"] {
  width: fit-content;
  max-width: min(100%, 760px);
  margin-bottom: clamp(18px, 2vw, 28px) !important;
  padding: 11px 16px 10px 18px !important;
  border-left: 3px solid var(--br-ds-accent) !important;
  background: var(--br-ds-paper-warm) !important;
  color: var(--br-ds-accent-dark) !important;
  font: 800 11px/1.35 var(--br-ds-font-data) !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html[data-brulea-design-system="v1"][data-brulea-template] main > section:first-child :is(.hero-lead,.lead,[class*="_lead_"]),
html[data-brulea-design-system="v1"][data-brulea-template="content"] #Content > [class^="btc-"] > section:first-of-type :is(.hero-lead,.lead),
html[data-brulea-design-system="v1"][data-brulea-template="contact"] main.autonomous-content article > section:first-child > div > p {
  max-width: 63ch;
  color: var(--br-ds-muted) !important;
  font-family: var(--br-ds-font-text) !important;
  font-size: clamp(17px, 1.45vw, 21px) !important;
  line-height: 1.55 !important;
}

/* Shared action grammar, restricted to hero controls and known namespaces. */
html[data-brulea-design-system="v1"][data-brulea-template] main > section:first-child :is(
  a.button,
  a.btn,
  a.btn-capsule,
  a[class*="_primaryButton_"],
  a[class*="_secondaryButton_"]
),
html[data-brulea-design-system="v1"][data-brulea-template="content"] #Content > [class^="btc-"] > section:first-of-type :is(
  a.button,
  a.btn,
  a.btn-capsule
) {
  min-height: 52px;
  border-radius: 999px !important;
  font-family: var(--br-ds-font-text) !important;
  font-weight: 800 !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
html[data-brulea-design-system="v1"][data-brulea-template] main > section:first-child :is(
  a.button,
  a.btn,
  a.btn-capsule,
  a[class*="_primaryButton_"]
):hover,
html[data-brulea-design-system="v1"][data-brulea-template="content"] #Content > [class^="btc-"] > section:first-of-type :is(
  a.button,
  a.btn,
  a.btn-capsule
):hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(45, 30, 20, .15) !important;
}

/* Product visual: transparent masters remain transparent and unframed. */
html[data-brulea-design-system="v1"][data-brulea-template="product"] main > section:first-child :is(
  figure,
  .hero-visual,
  .hero-stage,
  [class*="_heroVisual_"]
) {
  border-color: transparent !important;
  background-color: transparent !important;
}
html[data-brulea-design-system="v1"][data-brulea-template="product"] main > section:first-child figure img {
  mix-blend-mode: normal !important;
}
html[data-brulea-design-system="v1"][data-brulea-template="product"] main > section:first-child figcaption,
html[data-brulea-design-system="v1"][data-brulea-template="product"] main > section:first-child [class*="label"] {
  color: var(--br-ds-accent-dark) !important;
  font-family: var(--br-ds-font-data) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* Contact receives the same commercial rhythm without changing its form. */
html[data-brulea-design-system="v1"][data-brulea-template="contact"] main.autonomous-content article > section:first-child {
  width: var(--br-ds-wrap);
  margin-inline: auto;
  padding-top: clamp(64px, 8vw, 118px) !important;
  padding-bottom: clamp(64px, 8vw, 112px) !important;
  background: var(--br-ds-paper) !important;
}
html[data-brulea-design-system="v1"][data-brulea-template="contact"] main.autonomous-content article > section:first-child aside {
  border: 1px solid var(--br-ds-line) !important;
  border-radius: var(--br-ds-radius) !important;
  box-shadow: var(--br-ds-shadow) !important;
}

/* Optional lab directions. The production candidate starts on balanced. */
html[data-brulea-design-system="v1"][data-brulea-hero="monumental"] main > section:first-child h1 { font-size: clamp(58px, 7.5vw, 108px) !important; }
html[data-brulea-design-system="v1"][data-brulea-hero="compact"] main > section:first-child h1 { font-size: clamp(42px, 4.6vw, 68px) !important; }
html[data-brulea-design-system="v1"][data-brulea-template="content"][data-brulea-hero="monumental"] #Content > [class^="btc-"] > section:first-of-type h1 { font-size: clamp(58px, 7.5vw, 108px) !important; }
html[data-brulea-design-system="v1"][data-brulea-template="content"][data-brulea-hero="compact"] #Content > [class^="btc-"] > section:first-of-type h1 { font-size: clamp(42px, 4.6vw, 68px) !important; }
html[data-brulea-design-system="v1"][data-brulea-compact="true"] { --br-ds-section-space: clamp(52px, 6vw, 88px); }
html[data-brulea-design-system="v1"][data-brulea-cards="soft"] { --br-ds-radius: 28px; --br-ds-shadow: 0 20px 60px rgba(38,30,23,.08); }
html[data-brulea-design-system="v1"][data-brulea-cards="dense"] { --br-ds-radius: 14px; --br-ds-section-space: clamp(48px,5vw,76px); }

@media (max-width: 720px) {
  html[data-brulea-design-system="v1"] { --br-ds-wrap: calc(100vw - 32px); }
  html[data-brulea-design-system="v1"][data-brulea-template] main > section:first-child h1,
  html[data-brulea-design-system="v1"][data-brulea-template="content"] #Content > [class^="btc-"] > section:first-of-type h1,
  html[data-brulea-design-system="v1"][data-brulea-template="contact"] main.autonomous-content article > section:first-child h1 {
    font-size: clamp(40px, 12.5vw, 62px) !important;
  }
  html[data-brulea-design-system="v1"] .br-ds-breadcrumb { min-height: 44px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-brulea-design-system="v1"] .br-ds-breadcrumb a,
  html[data-brulea-design-system="v1"][data-brulea-template] main > section:first-child a { transition: none !important; }
}