@use '../variables' as vars;

@layer theme, base, components, animations, utilities;

@layer base {
  // Global css variables
  //----------------------
  :root {
    // prettier-ignore
    --font-sans-serif: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    // prettier-ignore
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-size-default: #{vars.$font-size-base};
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height: 1.5;
  }

  @media (prefers-reduced-motion: no-preference) {
    :root {
      scroll-behavior: smooth;
    }
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  html,
  body {
    text-rendering: optimizelegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  }
}

@layer components {
  // Prevent overridden by TailwindCSS
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--font-weight-medium);
  }

  h1,
  .h1 {
    font-size: calc(1.375rem + 1.5vw);
  }

  h2,
  .h2 {
    font-size: calc(1.325rem + 0.9vw);
  }

  h3,
  .h3 {
    font-size: calc(1.3rem + 0.6vw);
  }

  h4,
  .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }

  h5,
  .h5 {
    font-size: 1.25rem;
  }

  @media (min-width: 1200px) {
    h1,
    .h1 {
      font-size: 2.5rem;
    }

    h2,
    .h2 {
      font-size: 2rem;
    }

    h3,
    .h3 {
      font-size: 1.75rem;
    }

    h4,
    .h4 {
      font-size: 1.5rem;
    }
  }
  // end patch
}

// Global component css variables
//--------------------------------
@layer theme {
  :root {
    // Global css variables to maintain UI component aspects
    //-------------------------------------------------------
    --#{vars.$prefix}field-primary-indicator: oklch(0.458 0.23 304.441);
    --#{vars.$prefix}field-accent-indicator: oklch(0.743 0.102 303.276);
    --#{vars.$prefix}field-active-indicator: var(--#{vars.$prefix}field-primary-indicator);
    --#{vars.$prefix}field-button-active-bg: oklch(0.154 0 89.876 / 0.25);
    --#{vars.$prefix}field-button-hover-bg: oklch(0.431 0 89.876 / 0.2);
    --#{vars.$prefix}field-button-hover-color: oklch(0.209 0 89.876);
    --#{vars.$prefix}field-button-color: currentColor;
    --#{vars.$prefix}field-disabled-opacity: 0.4;
    --#{vars.$prefix}field-readonly-opacity: 0.55;

    --#{vars.$prefix}dropdown-border-color: transparent;
    --#{vars.$prefix}dropdown-border-width: 0;
    --#{vars.$prefix}caret-size: 5px;
    --#{vars.$prefix}radius: #{vars.$radius-md};
    --#{vars.$prefix}radius-pill: #{vars.$radius-pill};
  }
}