/*
 * Brevily theme for @tundralibs/ui 0.1.x. Load AFTER ui.css.
 * Fonts: self-hosted variable WOFF2 in ../fonts (Latin subset). Behaviours: theme/brevily.js (copy feedback, count-up).
 * Unlayered, so it beats every layered base rule; both dark blocks carry identical values.
 */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --color-primary: #15202b;
  --color-primary-strong: #0a1118;
  --color-primary-contrast: #ffffff;
  --color-accent: #0a7369;
  --color-accent-strong: #08625a;
  --color-accent-contrast: #ffffff;
  --color-accent-inverse: #5ed6c6;
  --color-secondary: #52606b;
  --color-secondary-strong: #3b4751;
  --color-secondary-contrast: #ffffff;
  --color-brand-teal: #0a7369;
  --color-brand-teal-contrast: #ffffff;
  --color-brand-coral: #f0643c;
  --color-brand-coral-contrast: #1c0d06;
  --color-brand-sun: #f6b93b;
  --color-brand-sun-contrast: #1f1604;
  --color-success: #177a4a;
  --color-success-contrast: #ffffff;
  --color-warning: #9a6200;
  --color-warning-contrast: #ffffff;
  --color-danger: #c0342b;
  --color-danger-contrast: #ffffff;
  --color-info: #2560b0;
  --color-info-contrast: #ffffff;
  --color-success-soft: #e2f4e9;
  --color-success-soft-text: #115a38;
  --color-warning-soft: #fcf1db;
  --color-warning-soft-text: #6b4400;
  --color-danger-soft: #fce8e5;
  --color-danger-soft-text: #8a241e;
  --color-info-soft: #e6eefb;
  --color-info-soft-text: #1b4787;
  --color-canvas: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f7f9f8;
  --color-surface-sunken: #f1f4f3;
  --color-surface-inverse: #15202b;
  --color-overlay: rgb(21 32 43 / 0.5);
  --color-border-subtle: #edf1f0;
  --color-border: #dfe6e5;
  --color-border-strong: #c6d0cf;
  --color-border-control: #7c8a89;
  --color-media-scrim: rgb(0 0 0 / 0.6);
  --color-on-media: #ffffff;
  --color-text: #15202b;
  --color-text-muted: #4b5863;
  --color-text-subtle: #5c6a74;
  --color-text-inverse: #ffffff;
  --color-disabled: #eef2f1;
  --color-disabled-text: #5c6a74;
  --brv-series-1: #0d9488;
  --brv-series-2: #b7791f;
  --apx-series-1: #0d9488;
  --apx-series-2: #e4572e;
  --apx-series-3: #3574e3;
  --apx-series-4: #b7791f;
  --apx-series-5: #8b5cf6;
  --apx-series-6: #d9336f;
  --ring-color: var(--color-accent);
  --apx-accent: var(--color-accent);
  --font-family-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-family-base: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 6rem;
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 11px;
  --radius-full: 9999px;
  --control-height-sm: 28px;
  --control-height-md: 34px;
  --control-height-lg: 42px;
  --border-width: 1px;
  --border-width-thick: 2px;
  --ring-width: 2px;
  --ring-offset: 2px;
  --font-size-2xs: 0.6875rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1.0625rem;
  --font-size-xl: 1.1875rem;
  --font-size-2xl: 1.375rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 3.25rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.65;
  --letter-spacing-tight: -0.015em;
  --letter-spacing-tighter: -0.025em;
  --letter-spacing-caps: 0.07em;
  --brv-display: clamp(2.5rem, 5.6vw, 4.25rem);
  --brv-display-sm: clamp(1.75rem, 3.2vw, 2.25rem);
  --brv-measure: 34rem;
  --shadow-color: 21 32 43;
  --shadow-sm: 0 1px 2px rgb(21 32 43 / 0.05);
  --shadow-md: 0 1px 2px rgb(21 32 43 / 0.04), 0 6px 16px -4px rgb(21 32 43 / 0.1);
  --shadow-lg: 0 2px 4px rgb(21 32 43 / 0.04), 0 16px 32px -8px rgb(21 32 43 / 0.14);
  --shadow-xl: 0 4px 8px rgb(21 32 43 / 0.05), 0 28px 64px -12px rgb(21 32 43 / 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #eef3f2;
    --color-primary-strong: #ffffff;
    --color-primary-contrast: #0d1418;
    --color-accent: #4fd1c0;
    --color-accent-strong: #7fe0d3;
    --color-accent-contrast: #05231f;
    --color-accent-inverse: #0a7369;
    --color-secondary: #9aa8af;
    --color-secondary-strong: #b9c4c9;
    --color-secondary-contrast: #0d1418;
    --color-brand-coral: #ff8a65;
    --color-brand-sun: #f7c35f;
    --color-success: #4cc387;
    --color-success-contrast: #0d1418;
    --color-warning: #e3ae4c;
    --color-warning-contrast: #0d1418;
    --color-danger: #f27d71;
    --color-danger-contrast: #0d1418;
    --color-info: #6fa8f2;
    --color-info-contrast: #0d1418;
    --color-success-soft: #11301f;
    --color-success-soft-text: #8fdcb0;
    --color-warning-soft: #33270e;
    --color-warning-soft-text: #ebc47e;
    --color-danger-soft: #3a1a17;
    --color-danger-soft-text: #f6aca3;
    --color-info-soft: #142640;
    --color-info-soft-text: #a6c7f5;
    --color-canvas: #0c1216;
    --color-surface: #0f171c;
    --color-surface-alt: #151e24;
    --color-surface-sunken: #18222a;
    --color-surface-inverse: #eef3f2;
    --color-overlay: rgb(0 0 0 / 0.6);
    --color-border-subtle: #18222a;
    --color-border: #23303a;
    --color-border-strong: #33434d;
    --color-border-control: #64747e;
    --color-text: #eef3f2;
    --color-text-muted: #a9b6bc;
    --color-text-subtle: #8e9ba2;
    --color-text-inverse: #0d1418;
    --color-disabled: #18222a;
    --color-disabled-text: #8e9ba2;
    --brv-series-1: #17a094;
    --brv-series-2: #bd8730;
    --apx-series-1: #2dd4bf;
    --apx-series-2: #ff8a65;
    --apx-series-3: #6fa8f2;
    --apx-series-4: #f2c14e;
    --apx-series-5: #a78bfa;
    --apx-series-6: #f472b6;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px -4px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 16px 32px -8px rgb(0 0 0 / 0.6);
    --shadow-xl: 0 4px 8px rgb(0 0 0 / 0.35), 0 28px 64px -12px rgb(0 0 0 / 0.7);
    --shadow-color: 0 0 0;
  }
}

:root[data-theme="dark"] {
  --color-primary: #eef3f2;
  --color-primary-strong: #ffffff;
  --color-primary-contrast: #0d1418;
  --color-accent: #4fd1c0;
  --color-accent-strong: #7fe0d3;
  --color-accent-contrast: #05231f;
  --color-accent-inverse: #0a7369;
  --color-secondary: #9aa8af;
  --color-secondary-strong: #b9c4c9;
  --color-secondary-contrast: #0d1418;
  --color-brand-coral: #ff8a65;
  --color-brand-sun: #f7c35f;
  --color-success: #4cc387;
  --color-success-contrast: #0d1418;
  --color-warning: #e3ae4c;
  --color-warning-contrast: #0d1418;
  --color-danger: #f27d71;
  --color-danger-contrast: #0d1418;
  --color-info: #6fa8f2;
  --color-info-contrast: #0d1418;
  --color-success-soft: #11301f;
  --color-success-soft-text: #8fdcb0;
  --color-warning-soft: #33270e;
  --color-warning-soft-text: #ebc47e;
  --color-danger-soft: #3a1a17;
  --color-danger-soft-text: #f6aca3;
  --color-info-soft: #142640;
  --color-info-soft-text: #a6c7f5;
  --color-canvas: #0c1216;
  --color-surface: #0f171c;
  --color-surface-alt: #151e24;
  --color-surface-sunken: #18222a;
  --color-surface-inverse: #eef3f2;
  --color-overlay: rgb(0 0 0 / 0.6);
  --color-border-subtle: #18222a;
  --color-border: #23303a;
  --color-border-strong: #33434d;
  --color-border-control: #64747e;
  --color-text: #eef3f2;
  --color-text-muted: #a9b6bc;
  --color-text-subtle: #8e9ba2;
  --color-text-inverse: #0d1418;
  --color-disabled: #18222a;
  --color-disabled-text: #8e9ba2;
  --brv-series-1: #17a094;
  --brv-series-2: #bd8730;
  --apx-series-1: #2dd4bf;
  --apx-series-2: #ff8a65;
  --apx-series-3: #6fa8f2;
  --apx-series-4: #f2c14e;
  --apx-series-5: #a78bfa;
  --apx-series-6: #f472b6;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px -4px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 16px 32px -8px rgb(0 0 0 / 0.6);
  --shadow-xl: 0 4px 8px rgb(0 0 0 / 0.35), 0 28px 64px -12px rgb(0 0 0 / 0.7);
  --shadow-color: 0 0 0;
}

/* Brevily partials: prefixed, unlayered, tokens only. */
.brv-wordmark {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: var(--font-size-xl);
  letter-spacing: -0.03em;
  color: var(--color-text);
  line-height: 1;
}
.brv-link {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}
a.brv-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.brv-shorten {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}
.brv-shorten:focus-within {
  border-color: var(--color-accent);
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: var(--ring-offset);
}
.brv-shorten__icon {
  display: inline-flex;
  padding-inline: var(--space-2);
  color: var(--color-text-subtle);
}
.brv-shorten__input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--control-height-lg);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--font-size-lg);
  color: var(--color-text);
}
.brv-shorten__input::placeholder {
  color: var(--color-text-subtle);
}
.brv-shorten__input:focus {
  outline: none;
}
.brv-links {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.brv-link-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.brv-link-row + .brv-link-row {
  border-top: var(--border-width) solid var(--color-border-subtle);
}
.brv-link-row:hover {
  background: var(--color-surface-alt);
}
.brv-link-row__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-accent);
}
.brv-link-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.brv-link-row__dest {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brv-link-row__clicks {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.brv-link-row__count {
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.brv-link-row__label {
  font-size: var(--font-size-2xs);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}
@media screen and (max-width:575px) {
  .brv-link-row {
    grid-template-columns: auto minmax(0,1fr) auto;
  }
  .brv-link-row__clicks {
    display: none;
  }
}

/* Logo (inline SVG). Tile and dot keep brand values; letters follow the theme. */
.brv-mark__tile {
  fill: var(--color-brand-teal);
}
.brv-mark__stem,
.brv-mark__bowl {
  fill: none;
  stroke: var(--color-brand-teal-contrast);
}
.brv-mark__dot {
  fill: var(--color-brand-sun);
}
.brv-logo__letters {
  fill: var(--color-text);
}
.brv-logo__tittle {
  fill: var(--color-accent);
}
.brv-logo,
.brv-mark {
  display: block;
  overflow: visible;
}

/* Motion: quick, springy at the end, never in the way. */
:root {
  --brv-ease-out: cubic-bezier(.22,1,.36,1);
  --brv-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --brv-dur-quick: 140ms;
  --brv-dur-base: 260ms;
  --brv-dur-slow: 560ms;
}
@keyframes brv-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes brv-pop {
  0% {
    opacity: 0;
    transform: scale(.4);
  }
  60% {
    opacity: 1;
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes brv-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes brv-ping {
  from {
    outline: var(--ring-width) solid var(--color-accent);
    outline-offset: 0;
  }
  to {
    outline: var(--ring-width) solid transparent;
    outline-offset: 12px;
  }
}
@keyframes brv-snap {
  0%,
  100% {
    transform: rotate(0);
  }
  45% {
    transform: rotate(-28deg);
  }
}
@keyframes brv-nudge {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translateX(3px);
  }
}
.brv-mark__dot,
.brv-logo__tittle {
  transform-box: fill-box;
  transform-origin: center;
}
.brv-mark--intro .brv-mark__stem,
.brv-logo--intro .brv-mark__stem {
  stroke-dasharray: 1;
  animation: brv-draw var(--brv-dur-slow) var(--brv-ease-out) both;
}
.brv-mark--intro .brv-mark__bowl,
.brv-logo--intro .brv-mark__bowl {
  stroke-dasharray: 1;
  animation: brv-draw var(--brv-dur-slow) var(--brv-ease-out) 200ms both;
}
.brv-mark--intro .brv-mark__dot,
.brv-logo--intro .brv-mark__dot {
  animation: brv-pop 460ms var(--brv-ease-spring) 620ms both;
}
.brv-logo--intro .brv-logo__word {
  animation: brv-rise var(--brv-dur-slow) var(--brv-ease-out) 320ms both;
}
.brv-logo--intro .brv-logo__tittle {
  animation: brv-pop 460ms var(--brv-ease-spring) 820ms both;
}
a:hover > .brv-logo .brv-mark__dot,
a:hover > .brv-mark .brv-mark__dot {
  animation: brv-pop 460ms var(--brv-ease-spring);
}
.brv-reveal {
  animation: brv-rise var(--brv-dur-base) var(--brv-ease-out) both;
}
.brv-shorten--done {
  animation: brv-ping 720ms var(--brv-ease-out);
}
.brv-shorten .btn--accent:hover svg {
  animation: brv-nudge 480ms var(--brv-ease-out);
}
.brv-links--enter .brv-link-row {
  animation: brv-rise var(--brv-dur-base) var(--brv-ease-out) both;
}
.brv-links--enter .brv-link-row:nth-child(2) {
  animation-delay: 50ms;
}
.brv-links--enter .brv-link-row:nth-child(3) {
  animation-delay: 100ms;
}
.brv-links--enter .brv-link-row:nth-child(4) {
  animation-delay: 150ms;
}
.brv-links--enter .brv-link-row:nth-child(n+5) {
  animation-delay: 200ms;
}
.brv-link-row:hover .brv-link-row__tile svg {
  animation: brv-snap 480ms var(--brv-ease-spring);
}
.brv-copy__idle,
.brv-copy__done {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.brv-copy__done {
  display: none;
}
.brv-copy.is-copied .brv-copy__idle {
  display: none;
}
.brv-copy.is-copied .brv-copy__done {
  display: inline-flex;
  color: var(--color-success);
  animation: brv-pop 360ms var(--brv-ease-spring);
}
.brv-link-row__dest[data-cell="dest"] {
  display: block;
  max-width: 280px;
}
[data-brv-countup] {
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion:reduce) {
  .brv-mark--intro *,
  .brv-logo--intro *,
  .brv-reveal,
  .brv-shorten--done,
  .brv-links--enter .brv-link-row,
  .brv-copy.is-copied .brv-copy__done,
  .brv-link-row:hover .brv-link-row__tile svg,
  a:hover > .brv-logo *,
  a:hover > .brv-mark *,
  .brv-shorten .btn--accent:hover svg {
    animation: none;
  }
}