@import "./tailwind-config.css" reference;


@layer components {
  /*
   * TYPOGRAPHY STYLES - Pure typography properties only
   * No colors, no layout - just font, size, weight, line-height
   */

  /*
    Cheatsheets:
      - Font-size:
        2xs: 10px;
        xs: 12px;
        sm: 14px;
        md: 16px;
        lg: 20px;
        xl: 24px;
        2xl: 32px;
        3xl: 40px;
        4xl: 48px;
        5xl: 56px;
        6xl: 64px;
        7xl: 72px;

      - Font-weight:
        regular: 400;
        medium: 500;
        semibold: 600;
  */

  /* Body text variants */
  .text-body-regular {
    @apply font-body text-sm font-regular leading-[150%];
  }

  .text-body-regular-xs {
    @apply font-body text-xs font-regular leading-[150%];
  }

  .text-body-regular-lg {
    @apply text-neutrals-900 font-body text-lg font-regular leading-[140%];
  }

  .text-body-strong-xs {
    @apply font-body text-xs font-semibold leading-[140%];
  }

  .text-body-strong-sm {
    @apply font-body text-sm font-semibold leading-[140%];
  }

  .text-body-regular-line-small {
    @apply font-body text-sm font-regular underline underline-offset-auto leading-[140%]
  }

  .text-subheading {
    @apply font-body text-xl font-regular leading-[30px];
  }

  /* Header variants */
  .text-header-xxl {
    @apply font-heading font-regular text-3xl leading-[120%]
  }

  .text-header-base {
    @apply font-heading font-medium leading-[120%];
  }

  .text-header-sm {
    @apply font-heading text-lg font-medium leading-[120%];
  }

  .text-header-medium-sm {
    @apply font-heading text-lg font-medium leading-[120%];
  }

  .text-header-xl {
    @apply font-heading text-xl font-medium leading-[120%];
  }

  .text-header-md {
    @apply font-heading text-md font-medium leading-[120%];
  }

  .text-header-regular-md {
    @apply font-heading text-xl font-regular leading-[120%];
  }

  .text-header-lg {
    @apply font-heading text-2xl font-medium leading-[120%];
  }

  .text-section-header {
    @apply font-heading text-lg font-medium leading-[28.8px];
  }

  /* Special typography */
  .text-overline {
    @apply font-body text-2xs font-medium leading-[160%] tracking-widest uppercase;
  }

  /*
   * SEMANTIC COLOR UTILITIES - Only colors
   * These can be mixed with any typography class above
   */
  .text-primary {
    @apply text-neutrals-900;
  }

  .text-secondary-gray {
    @apply text-neutrals-700;
  }

  .text-muted {
    @apply text-neutrals-600;
  }

  .text-on-dark {
    @apply text-white-transp-1000;
  }

  .text-on-dark-secondary {
    @apply text-white-transp-900;
  }

  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-magenta-600 to-laranja-600 hover:bg-gradient-to-l active:bg-gradient-to-r
  }
}

/*
 * OPTIONAL: Preset combinations for common patterns
 * Only create these if you use the same combination 5+ times
 */
/* @layer components {
  .text-movie-title {
    @apply text-header-sm text-on-dark;
  }

  .text-movie-meta {
    @apply text-overline text-on-dark-secondary;
  }

  .text-cinema-info {
    @apply text-body-regular text-secondary;
  }
} */