/* ============================================
   🧱 BASE STYLES
   ============================================ */

@import 'tailwindcss';
@plugin "tailwindcss-animate";

@custom-variant dark (&:is(.dark *));
@custom-variant mobile (@media (max-width: 767px));

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Roboto', sans-serif;
  }

  html {
    font-size: var(--font-size);
  }

  h1 {
    font-size: var(--text-h1);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.2;
  }

  h2 {
    font-size: var(--text-h2);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
  }

  h3 {
    font-size: var(--text-h3);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
  }

  h4 {
    font-size: var(--text-h4);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
  }

  p {
    font-size: var(--text-p);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
  }

  label {
    font-size: var(--text-label);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
  }

  button {
    font-size: var(--text-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
  }

  input {
    font-size: var(--text-small);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
  }
}

@layer utilities {
  /* Global mobile content padding utility class.
     Add class="content-area" to any wrapper to receive the mobile padding.
     Change --mobile-content-padding in tokens.css to adjust globally. */
  @media (max-width: 767px) {
    .content-area {
      padding-left: var(--mobile-content-padding);
      padding-right: var(--mobile-content-padding);
    }
  }
}