@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  
  html { scrollbar-gutter: stable; }

  body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3 {
    margin: 0;
    line-height: var(--leading-tight);
    font-weight: var(--weight-heavy);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  h1 { font-size: var(--text-xl); }
  h2 { font-size: var(--text-lg); }
  h3 { font-size: var(--text-md); letter-spacing: var(--tracking-normal); font-weight: var(--weight-bold); }

  p { margin: 0; max-width: var(--measure); }

  
  button, input, select, textarea { font-family: inherit; }

  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

  
  turbo-cable-stream-source { display: none; }

  kbd {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    border: var(--line-w) solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 0.15em 0.45em;
    color: var(--ink-muted);
  }

  
  :where(a, button, input, select, textarea, summary, [tabindex]) {
    outline: 2.5px solid transparent;
    outline-offset: 0;
    transition: var(--responds);
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
  }

  .label,
  .field label,
  .menu__label,
  .notification-day__label,
  .property__label,
  .rowaction__label,
  .timeline__heading,
  .palette__group,
  .insight__label,
  .comment__action,
  .status,
  .role {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .card,
  .changelog__entry,
  .comment,
  .insight,
  .plan,
  .palette,
  .menu[popover],
  .menu--stacked .menu__frame,
  .flash {
    background: var(--surface);
    border: var(--line-w) solid var(--line);
    border-radius: var(--radius-lg);
  }

  .palette,
  .menu[popover],
  .menu--stacked .menu__frame,
  .flash { box-shadow: var(--shadow-card); }

  .task__ref,
  .task-detail__ref,
  .insight-row__ref,
  .changelog__date {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    color: var(--ink-faint);
  }

  
  @keyframes fade-in { from { opacity: 0; } }

  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}