@tailwind base;

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/claro/Roboto.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/claro/Roboto.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AMX';
  src: url('/fonts/claro/AMX-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'AMX';
  src: url('/fonts/claro/AMX-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@layer base {
  html {
    --font-heading: 'AMX', sans-serif;
    --font-body: 'Roboto', sans-serif;
  }

  main[data-theme="claro"] {
    --white: #ffffff;
    --black: #000000;
    --radius: 0.5rem;

    --background: #fafafa;
    --foreground: var(--black);

    --primary-light: #f9e7f7;
    --primary: #e3262e;
    --primary-dark: #a61d19;
    --primary-foreground: var(--white);

    --secondary-light: #ffd183;
    --secondary: #ffbc4a;
    --secondary-dark: #e7b500;
    --secondary-foreground: var(--black);

    --neutral-ultralight: #FFF;
    --neutral-lightest: #fefafa;
    --neutral-light: #F8F8F8;
    --neutral: #4a4747;
    --neutral-dark: #242323;
    --neutral-darkest: var(--black);

    --header: var(--primary);
    --header-foreground: var(--white);
    --header-button-primary: var(--neutral-light);
    --header-button-primary-text: var(--neutral-darkest);
    --header-button-secondary: var(--secondary);
    --header-button-secondary-text: var(--neutral-darkest);
    --topbar: var(--background);
    --topbar-foreground: var(--foreground);
    --footer: var(--primary);
    --footer-foreground: var(--white);

    --banner-container: var(--primary);
    --banner-button-title-weight: 600;
    --banner-button-description-font: var(--font-body);
    --banner-button-cta: var(--white);
    --banner-button-cta-text: var(--primary);
    --banner-button-cta-radius: var(--radius);
    --banner-button-card: var(--white);
    --banner-button-icon: var(--primary);

    --conversionbar: var(--primary);
    --conversionbar-foreground: var(--white);
    --conversionbar-button-primary: var(--secondary);
    --conversionbar-button-primary-text: var(--neutral-dark);
    --conversionbar-button-secondary: var(--secondary);
    --conversionbar-button-secondary-text: var(--neutral-dark);

    --cta: var(--primary);
    --cta-foreground: var(--white);
    --cta-button: var(--white);
    --cta-button-text: var(--neutral-darkest);

    --article-button: var(--primary);
    --article-primary-text: var(--primary);

    --carousel-button: var(--primary);
    --carousel-button-disabled: var(--primary);
    --carousel-icon: var(--neutral-darkest);
    --carousel-icon-disabled: var(--neutral-darkest);

    --productcard-button-primary: var(--secondary);
    --productcard-button-primary-text: var(--neutral-dark);
    --productcard-button-primary-border: var(--secondary);
    --productcard-button-secondary: var(--neutral-ultralight);
    --productcard-button-secondary-text: var(--neutral-dark);
    --productcard-button-secondary-border: var(--neutral);

    --breadcrumb: var(--header);
    --breadcrumb-text: var(--header-foreground);

    --search-select-default: var(--primary);
    --search-select-hovered: #CB1A22;
    --search-select-active: #B5171E;

    --card: var(--primary-dark);

    --link: var(--primary);

    --table-head: var(--primary);

    --info: #075985;

    --muted: #f3f3f3;
    --muted-foreground: #767676;
    --accent: #f3f3f3;
    --accent-foreground: #262626;
    --destructive: #d93636;
    --destructive-foreground: #fafafa;
    --border: #d4d7de;
    --input: #e3e3e3;
    --ring: var(--black);

    --menu: var(--white);
  }
}