/* Neuwo Web UI Library (@neuwo/web-ui-library--demo) foundation: design tokens, typography, page surface, navigation, Markdown. */
:root {
  /* Brand colours */
  --color-blue: oklch(66.623% 0.1177 217.10);
  --color-blue-light: oklch(77.31% 0.13351 211.702);
  --color-blue-dark: oklch(58.216% 0.1005 212.646);
  --color-green: oklch(77.183% 0.1766 131.692);
  --color-green-dark: oklch(64.020% 0.1502 131.396);
  --color-red: oklch(62.83% 0.2089 25.21);

  /* Neutral */
  --color-white: oklch(96.826% 0.0069 247.896);
  --color-grey-50: oklch(20.768% 0.0398 265.755);
  --color-grey-100: oklch(23.157% 0.0398 262.510);
  --color-grey-200: oklch(27.950% 0.0368 260.031);
  --color-grey-300: oklch(37.170% 0.0392 257.287);
  --color-grey-400: oklch(71.067% 0.0351 256.788);
  --color-grey-500: oklch(55.439% 0.0407 257.417);
  --color-grey-600: oklch(86.898% 0.0198 252.894);
  --color-grey-700: oklch(92.876% 0.0126 255.508);
  --color-grey-800: oklch(96.826% 0.0069 247.896);
  --color-grey-900: oklch(98.415% 0.0034 247.858);

  /* Semantic surfaces */
  --color-body-bg: oklch(16.140% 0.0289 266.826);
  --color-surface-solid: oklch(18.020% 0.0325 266.625);
  --color-header-solid-bg: oklch(16.140% 0.0289 266.826 / 0.95);

  /* Text */
  --color-text: oklch(86.898% 0.0198 252.894);
  --color-text-muted: oklch(71.067% 0.0351 256.788);
  --color-heading: oklch(96.826% 0.0069 247.896);

  /* Blur scale (shared by backdrop-filter and filter) */
  --blur-sm: 0.25rem;
  --blur-md: 0.5rem;
  --blur-lg: 0.75rem;
  --blur-xl: 1rem;

  /* Glass */
  --glass-bg: oklch(20.768% 0.0398 265.755 / 0.6);
  --glass-bg-light: oklch(20.768% 0.0398 265.755 / 0.4);
  --glass-border: oklch(71.067% 0.0351 256.788 / 0.12);
  --glass-border-hover: oklch(71.067% 0.0351 256.788 / 0.22);
  --glass-blur: var(--blur-xl);

  /* Disabled state */
  --opacity-disabled: 0.4;

  /* Brand tints (transparent overlays of the brand colours).
     Suffix is the percentage of the brand colour mixed with transparent. */
  --tint-blue-5:   color-mix(in srgb, var(--color-blue) 5%, transparent);
  --tint-blue-8:   color-mix(in srgb, var(--color-blue) 8%, transparent);
  --tint-blue-10:  color-mix(in srgb, var(--color-blue) 10%, transparent);
  --tint-blue-12:  color-mix(in srgb, var(--color-blue) 12%, transparent);
  --tint-blue-15:  color-mix(in srgb, var(--color-blue) 15%, transparent);
  --tint-blue-20:  color-mix(in srgb, var(--color-blue) 20%, transparent);
  --tint-blue-25:  color-mix(in srgb, var(--color-blue) 25%, transparent);
  --tint-blue-30:  color-mix(in srgb, var(--color-blue) 30%, transparent);
  --tint-green-5:  color-mix(in srgb, var(--color-green) 5%, transparent);
  --tint-green-8:  color-mix(in srgb, var(--color-green) 8%, transparent);
  --tint-green-10: color-mix(in srgb, var(--color-green) 10%, transparent);
  --tint-green-12: color-mix(in srgb, var(--color-green) 12%, transparent);
  --tint-green-15: color-mix(in srgb, var(--color-green) 15%, transparent);
  --tint-green-20: color-mix(in srgb, var(--color-green) 20%, transparent);
  --tint-green-25: color-mix(in srgb, var(--color-green) 25%, transparent);
  --tint-green-30: color-mix(in srgb, var(--color-green) 30%, transparent);
  --tint-red-20:   color-mix(in srgb, var(--color-red) 20%, transparent);

  /* Gradients */
  --gradient-accent: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-blue) 90%, var(--color-grey-200)) 0 10%,
    color-mix(in srgb, var(--color-green) 90%, var(--color-grey-200)) 90% 100%
  );
  /* Pair with `background-size: 200% 100%` and `animation: shimmer ...` for the looping accent. */
  --gradient-accent-shimmer: linear-gradient(
    90deg,
    var(--color-blue) 0%,
    var(--color-green) 35%,
    var(--color-green) 50%,
    var(--color-blue) 100%
  );

  /* Grid lines */
  --color-grid-line: oklch(71.067% 0.0351 256.788 / 0.08);
  --color-grid-line-light: oklch(71.067% 0.0351 256.788 / 0.06);

  /* Shimmer */
  --color-shimmer: oklch(100% 0 none / 0.25);

  /* Partners */
  --partner-logo-filter: grayscale(100%) brightness(0.8) invert(1);
  --partner-logo-hover-filter: none;
  --partner-logo-opacity: 0.5;
  --partner-logo-hover-opacity: 0.85;
  --partner-item-bg: oklch(26.48% 0.01276 243.42);

  /* Benefits card */
  --benefits-card-bg: oklch(20.768% 0.0398 265.755 / 0.6);

  /* Hero blob opacities */
  --hero-blob-blue-1: 0.18;
  --hero-blob-green-1: 0.15;
  --hero-blob-blue-2: 0.12;
  --hero-blob-green-2: 0.1;

  /* Background gradient opacities */
  --bg-blue-1: 0.1;
  --bg-green-1: 0.07;
  --bg-blue-2: 0.06;
  --bg-green-2: 0.05;

  /* Hero signal colours */
  --signal-trail-r: 10;
  --signal-trail-g: 165;
  --signal-trail-b: 195;
  --signal-trail-multiplier: 0.4;
  --signal-dot: oklch(66.623% 0.1177 217.10 / 0.5);

  /* Typography */
  --font-text: 'Noto Sans', 'Noto Sans Fallback', system-ui, -apple-system, sans-serif;
  --font-heading: 'Outfit', 'Outfit Fallback', sans-serif;
  /* Code. The brand ships no monospace face, so this is a system stack: the
     platform's own UI mono first, then the developer faces most likely present. */
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Consolas, monospace;
  --font-size-2xs: 0.625rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-size-8xl: 5.5rem;

  /* Font weight */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line height (Neuwo heading and body roles) */
  --line-height-display: 1.05;
  --line-height-heading: 1.2;
  --line-height-subheading: 1.3;
  --line-height-body: 1.6;

  /* Letter spacing. Hero-section titles only */
  --letter-spacing-display: -0.04em;
  --letter-spacing-display-secondary: -0.03em;

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

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 0.0625rem 0.125rem oklch(0% 0 none / 0.3);
  --shadow-md: 0 0.25rem 0.375rem oklch(0% 0 none / 0.35);
  --shadow-lg: 0 0.625rem 0.9375rem oklch(0% 0 none / 0.4);
  --shadow-xl: 0 1.25rem 1.5625rem oklch(0% 0 none / 0.45);
  --shadow-glow: 0 0 1.5rem oklch(66.623% 0.1177 217.10 / 0.35);
  --shadow-focus: 0 0 0 2px var(--color-body-bg), 0 0 0 4px var(--color-blue);
  --shadow-danger: 0 0 0 3px var(--tint-red-20);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --easing-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-emphasis: 600ms var(--easing-emphasis);

  /* Z-index */
  --z-background: -1;
  --z-content: 1;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* Neuwo typography for native elements. Opt-in: link or import this file.
   Bare tags map to design-system type roles: h1 Display, h2 Section,
   h3/h4 Subsection, p Body, a inline prose link. h5/h6 step the Subsection
   recipe down the scale (no design-system role below xl). */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
}

/* Display */
h1 {
  font-size: var(--font-size-6xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-display);
  margin-bottom: var(--space-8);
}

/* Section */
h2 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-4);
}

@media (min-width: 48rem) {
  h2 {
    font-size: var(--font-size-5xl);
  }
}

/* Subsection */
h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-subheading);
  margin-bottom: var(--space-2);
}

h4 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-subheading);
  margin-bottom: var(--space-2);
}

h5 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-subheading);
  margin-bottom: var(--space-2);
}

h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-subheading);
  margin-bottom: var(--space-2);
}

/* Body */
p {
  font-family: var(--font-text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-body);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

/* Inline prose link. The bare element carries the treatment, and `.link` applies
   the same recipe explicitly: for an anchor sitting in a context that strips link
   styling, and for slotted content inside a component, where the shadow root
   cannot reach a nested `<a>` and the host page has to style it. */
a,
.link {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

/* Default hover: deepen the same blue. */
a:hover,
.link:hover {
  color: var(--color-blue-dark);
}

/* Opt-in hover, one class on top of `.link`: switch to the brand green instead.
   text-decoration-color follows currentColor, so the underline travels with the
   text. The class beats `a:hover` on specificity, so it needs no !important. */
.link--hover-green:hover {
  color: var(--color-green);
}

/* Eyebrow / kicker: the small uppercase label above a heading. A utility class
   (not a bare element) so consumers opt in per element. Type only, no colour,
   matching the recipe inlined in the badge. */
.eyebrow {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Neuwo page surface for native elements. Opt-in: link or import this file.
   Two independent classes, visuals only: `.body` is the page's base ink and
   paper, `.background__gradient` is the brand's ambient blob wash. Neither
   owns a box, a position or a z-index, so the consumer decides where each
   one sits and how it is stacked. */

.body {
  font-family: var(--font-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Four translucent blobs, so this reads as the brand wash only over a dark
   surface: pair it with `.body` or an equivalent background colour. The 10%
   and 5% steps are on the tint scale; 7% and 6% are not, and each occurs
   once, so they stay inline rather than growing the scale. */
.background__gradient {
  background:
    radial-gradient(ellipse 50% 40% at 20% 20%, var(--tint-blue-10) 0%, transparent 100%),
    radial-gradient(ellipse 40% 50% at 75% 15%, color-mix(in srgb, var(--color-green) 7%, transparent) 0%, transparent 100%),
    radial-gradient(ellipse 60% 35% at 50% 60%, color-mix(in srgb, var(--color-blue) 6%, transparent) 0%, transparent 100%),
    radial-gradient(ellipse 45% 45% at 80% 70%, var(--tint-green-5) 0%, transparent 100%);
}

/* Neuwo navigation links for native elements. Opt-in: link or import this file.
   Two classes, visuals only: `.nav-link` is a top-level entry and
   `.nav-link--sm` the nested one. Neither owns placement, a list reset or a
   panel surface, so the consumer decides the structure and whether sections
   collapse at all. No custom element is involved, so `<ul><li><a>` and native
   `<details>` both work, and nothing here needs !important. */

.nav-link {
  /* Drives the horizontal padding and the underline's endpoints together, so
     the bar cannot drift from the text it sits under. Retune it in one place
     (for a denser desktop bar, say) and both follow. */
  --nav-link-gutter: var(--space-4);
  display: block;
  position: relative;
  width: fit-content;
  padding: 0 var(--nav-link-gutter);
  /* A 44px tap target. */
  min-height: 2.75rem;
  line-height: 2.75rem;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--font-size-base);
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* A nested entry: compact, so it takes its height from the line rather than a
   tap target of its own. */
.nav-link--sm {
  min-height: auto;
  line-height: var(--line-height-body);
  padding: var(--space-2) var(--nav-link-gutter);
  font-size: var(--font-size-sm);
}

/* Centre-out underline. A pseudo-element rather than a gradient background,
   which the light DOM allows: the bar is laid out at its full span between the
   gutters, so it covers the text and not the padding, and grows into it from
   the middle.

   The growth is a transform, not a pair of insets meeting at 50%. `left` and
   `right` are layout properties, so animating them ran layout on every frame of
   every hover; and two insets at 50% resolve independently at sub-pixel
   precision, so on a link of fractional width the resting bar kept a hair of
   width instead of none. `scaleX(0)` composites, and is exactly nothing. */
.nav-link::after {
  content: "";
  position: absolute;
  left: var(--nav-link-gutter);
  right: var(--nav-link-gutter);
  bottom: 0.375rem;
  height: 2px;
  background: var(--color-blue);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-fast);
}

/* The compact entry has no lifted baseline to clear. */
.nav-link--sm::after {
  bottom: 0;
}

/* The class outranks `a` and `a:hover` from typography.css on specificity, so
   these are normal declarations and a consumer can still override any of them. */
.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current],
.nav-link--active {
  color: var(--color-heading);
}

/* `aria-current` is absent here on purpose: in a horizontal bar the current page
   is marked, not offered, so it takes the lifted ink without the underline.

   A vertical nav wants the opposite, and it wants the same treatment on the
   section the current page sits under. `.nav-link--active` is that opt-in: it
   holds the bar open, and it composes with `aria-current` rather than replacing
   it, so the current page keeps its semantics either way. One modifier covers
   both, because to a reader the current page and its open section look alike. */
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link--active::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .nav-link,
  .nav-link::after {
    transition: none;
  }
}

/* Neuwo Markdown surface. Opt-in: link or import this file, then put `.markdown`
   on the container a Markdown renderer writes into.

   One sheet for the whole surface, because none of it is a component: the
   elements a renderer emits, and the callout an author drops in among them.
   Splitting them would only make a consumer link two files and get their order
   right.

   The element rules are scoped rather than bare-tag on purpose. typography.css
   can style `h1`..`h6`, `p` and `a` globally because those are unambiguous, but
   a `<ul>` in a nav and a `<ul>` in an article want different treatment, so
   lists, quotes, code and tables only take the recipe inside a container that
   asked for it. `.callout` is a class, so it carries its own scope and works
   outside a rendered document as well.

   This sheet covers exactly the elements typography.css leaves alone: it never
   restates a heading or a paragraph, so the two compose without either winning.

   It owns no box. No measure, no max-width, no margin on `.markdown` itself: how
   wide the column is and where it sits are page decisions, as in
   background.css and navigation.css. */

/* --- Lists --- */

.markdown ul,
.markdown ol {
  color: var(--color-text);
  line-height: var(--line-height-body);
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.markdown li {
  margin-bottom: var(--space-2);
}

/* A nested list belongs to its parent item, so it closes flush and the gap
   above it matches the gap between siblings. */
.markdown li > ul,
.markdown li > ol {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* --- Emphasis --- */

/* Bold text is the one inline run that reads as a heading, so it takes the
   heading ink. Semibold rather than bold: the body face at 700 next to 400 is
   a wider jump than long-form copy wants. */
.markdown strong {
  color: var(--color-heading);
  font-weight: var(--font-weight-semibold);
}

/* --- Quotes and rules --- */

.markdown blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-blue);
  color: var(--color-text-muted);
  font-style: italic;
}

.markdown hr {
  margin: var(--space-8) 0;
  border: none;
  border-top: 1px solid var(--glass-border);
}

/* --- Images --- */

.markdown img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* A standalone image is its own block and takes the panel radius; an inline
   badge or icon sharing a paragraph with text does not. */
.markdown p > img:only-child {
  display: block;
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
}

/* --- Code --- */

.markdown code {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* Inline only. A sample inside `pre` already sits on the panel, and the chrome
   would double up. `anywhere` counts towards the min-content width, unlike
   `break-word`, so a long identifier in a table cell or a list item lets its box
   fit the column instead of forcing the page sideways. */
.markdown :not(pre) > code {
  padding: var(--space-1) var(--space-2);
  background: var(--color-grey-100);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}

/* Scrolls rather than wraps: wrapping mid-token would misrepresent the code. */
.markdown pre {
  margin: 0 0 var(--space-6);
  padding: var(--space-4);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  line-height: var(--line-height-body);
  overflow-x: auto;
  tab-size: 2;
}

/* A scrollable panel is reachable by keyboard, so it shows where focus landed. */
.markdown pre:focus-visible {
  border-color: var(--color-blue);
}

/* A panel wrapped for copying keeps its top-right corner clear, so a long first
   line scrolls rather than running under the control. Derived from the control's
   own size and inset, so the two cannot drift.

   This lives here, not in the component's recipe, for a reason worth knowing:
   the shadow root's `::slotted(pre)` would lose to `.markdown pre` whatever its
   specificity, because a declaration from the outer tree beats one from a shadow
   tree for slotted content. So the only place that can widen this padding is the
   document, which is this sheet. */
.markdown neuwo-copy pre {
  padding-right: calc(var(--space-8) + var(--space-3) * 2);
}

/* --- Tables --- */

/* Sized by its container, so a table wider than the column scrolls its own
   wrapper rather than the page. The wrapper is the consumer's: most Markdown
   renderers can emit one, and this sheet owns no structure. */
.markdown table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.markdown th,
.markdown td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--glass-border);
  text-align: left;
  vertical-align: top;
}

.markdown th {
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
}

/* --- Callout ---
   The tinted aside that sits in the middle of a document: a note, a tip, a
   caveat.

   Not `<neuwo-notice>`. That is a docked glass card with an entrance animation,
   for a message the visitor did not ask for. This is a static block at the full
   measure of the column, and it is part of the document.

   Not a custom element either. Nothing here needs behaviour, a Markdown renderer
   can emit the markup at build time, and body content is exactly where an
   element's upgrade shift costs most: a class paints with the first frame.

   It follows the element rules above so a callout ending in a list keeps its own
   bottom padding; the two rules tie on specificity, and the later one wins. */

.callout {
  /* Contains the children's margins, so the padding is not collapsed through
     by a leading heading or a trailing paragraph. */
  display: flow-root;
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  color: var(--color-text);
  /* The one knob, read with a fallback rather than declared: a declaration here
     would beat the value a consumer inherits in from `:root` or a wrapper. The
     modifiers below declare it, so they still win on specificity. */
  background: color-mix(in srgb, var(--callout-accent, var(--color-blue)) 8%, transparent);
  border-left: 3px solid var(--callout-accent, var(--color-blue));
  border-radius: var(--radius-md);
}

/* The block's own padding is the bottom gap; the last child's margin would
   double it. */
.callout > :last-child {
  margin-bottom: 0;
}

/* Optional label line. A span rather than a heading, so it never enters the
   document outline: a callout is an aside, not a section. */
.callout__title {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--callout-accent, var(--color-blue));
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

/* Three intents, because the brand has three semantic hues. There is
   deliberately no `warning`: no amber exists in the tokens, the frozen reference
   or the design system, and inventing one is a brand decision rather than a
   recipe decision. Until it exists, a consumer sets `--callout-accent` on its
   own class. */

.callout--info {
  --callout-accent: var(--color-blue);
}

.callout--tip {
  --callout-accent: var(--color-green);
}

.callout--danger {
  --callout-accent: var(--color-red);
}