/* EmptyState (Figma Frame 10): a first week must read as normal, not broken. A pale card,
   a quiet ring where content will be, a title and one line saying what will appear. */
@layer components {
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space-half);
    padding: calc(var(--block-space) * 2.5) var(--inline-space-double);
    text-align: center;
    color: var(--color-subtle);
    font-size: var(--text-small);
    background: color-mix(in srgb, var(--color-border) 25%, var(--color-bg-raised));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    &::before {
      content: "";
      inline-size: 1.5rem;
      aspect-ratio: 1;
      margin-block-end: var(--block-space-half);
      border: 2px solid var(--color-border-strong);
      border-radius: 50%;
    }

    & p { margin: 0; }
  }

  .empty-state__title { font-size: var(--text-normal); font-weight: 700; color: var(--color-text); }
}