@layer components {
  .c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: none;
    border-radius: var(--radius-2);
    font-family: var(--font-body);
    font-size: var(--font-size-3);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
  }

  .c-button--primary {
    background-color: var(--color-primary);
    color: var(--color-background);
  }

  .c-button--primary:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-background);
  }

  .c-button--secondary {
    background-color: var(--color-secondary);
    color: var(--color-text);
  }

  .c-button--tertiary {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
  }

  .c-tile {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    padding: var(--space-5);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .c-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-3);
  }

  .c-tile__icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-primary);
    margin: 0 auto var(--space-3);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
  }

  .c-tile h3 {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-5);
  }

  .c-module {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    padding: var(--space-5);
    text-align: center;
  }

  .c-timer__display {
    font-size: var(--font-size-7);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
    font-family: monospace;
  }

  .c-breath__circle {
    width: 100px;
    height: 100px;
    border: 3px solid var(--color-primary);
    border-radius: var(--radius-round);
    margin: 0 auto var(--space-3);
    transition: transform 4s ease-in-out;
  }

  .c-breath__circle.breathing {
    transform: scale(1.3);
  }

  .c-notes textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    background-color: var(--color-background);
    color: var(--color-text);
    resize: vertical;
    margin-bottom: var(--space-3);
  }

  .c-step {
    text-align: center;
    position: relative;
  }

  .c-step__number {
    width: 60px;
    height: 60px;
    background-color: var(--color-primary);
    color: var(--color-background);
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-6);
    font-weight: 700;
    margin: 0 auto var(--space-3);
  }

  .c-newsletter-form {
    display: flex;
    gap: var(--space-2);
    max-width: 400px;
    margin: var(--space-4) auto 0;
  }

  .c-newsletter-form input[type="email"] {
    flex: 1;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    background-color: var(--color-background);
    color: var(--color-text);
  }

  .c-mobile-menu {
    border: none;
    background: none;
    padding: 0;
    max-width: 100vw;
    max-height: 100vh;
  }

  .c-mobile-menu::backdrop {
    background-color: oklch(0% 0 0 / 0.5);
  }

  .c-mobile-menu__content {
    background-color: var(--color-surface);
    padding: var(--space-5);
    border-radius: var(--radius-3);
    position: relative;
    max-width: 300px;
    margin: var(--space-5) auto;
  }

  .c-mobile-menu__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: none;
    border: none;
    font-size: var(--font-size-5);
    cursor: pointer;
    color: var(--color-text);
  }

  .c-mobile-menu nav ul {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0;
  }

  .c-mobile-menu nav li {
    margin-bottom: var(--space-3);
  }

  .c-mobile-menu nav a {
    display: block;
    padding: var(--space-3);
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-2);
    transition: background-color 0.2s ease;
  }

  .c-mobile-menu nav a:hover {
    background-color: var(--color-border);
  }
}