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

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

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

/* Explicit utilities (not content-scanned arbitrary values) for the Button/Switch
   theme-scoped tokens. Content-based JIT detection can miss these class names when
   xertica-ui's source is consumed through a bundler alias that resolves outside the
   host project's scanned directories (e.g. this repo's own templates/ dev server),
   so they're declared directly to guarantee the utility always ships. */
@utility border-button-stroke {
  border-width: var(--button-stroke-width);
  border-color: var(--button-stroke-color);
}

@utility font-button-weight {
  font-weight: var(--button-font-weight);
}

@utility bg-button-primary {
  background-color: var(--button-primary-bg);

  &:hover {
    filter: brightness(0.95);
  }
}

@utility text-button-primary {
  color: var(--button-primary-foreground);
}

@utility bg-button-secondary {
  background-color: var(--button-secondary-bg);

  &:hover {
    filter: brightness(0.95);
  }
}

@utility text-button-secondary {
  color: var(--button-secondary-foreground);
}

@utility border-input-stroke {
  border-color: var(--input-border);
}

@utility border-outline-stroke {
  border-color: var(--outline-border);
}

@layer base {
  :root {
    color-scheme: light;
  }

  :root.dark {
    color-scheme: dark;
  }

  * {
    @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);
    }
  }
}