@tailwind base;
@tailwind components;
@tailwind utilities;

/* Font Definitions */
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/font/Montserrat-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/font/Montserrat-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/font/Montserrat-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/font/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/font/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/font/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/font/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/font/Montserrat-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/font/Montserrat-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@layer base {
  :root {
    /* Font Variables */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Font Weights */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* Color gray */
    --gray-50: #f9fafb;
    --gray-100: #f2f4f7;
    --gray-200: #e4e7ec;
    --gray-300: #d0d5dd;
    --gray-400: #98a2b3;
    --gray-500: #667085;
    --gray-600: #475467;
    --gray-700: #344054;
    --gray-800: #1d2939;
    --gray-900: #101828;

    /* Color Palette */
    --green-900: #006d77;
    --green-500: #83c5be;
    --green-100: #afeae4;
    --green-1000: #004b52;
    --orange-100: #fef7f0;
    --orange-500: #db6923;
  --orange-900: #F8901F;
  /* Central accent used for hovers/frames */
  --accent: var(--orange-900);
  --frame: var(--orange-900);

    /* Color system */
    --primary: #508fda;
    --secondary: #8d99ae;
    --success: #06d6a0;
    --danger: #ef476f;
    --warning: #ffd166;
    --info: #38a0c2;

    /* Color background */
    --bg-1: #eae4e9;
    --bg-2: #fff3ea;
    --bg-3: #fde2e4;
    --bg-4: #fad2e1;
    --bg-5: #dbece5;
    --bg-6: #bee1e6;
    --bg-7: #f0efeb;
    --bg-8: #dfe7fd;
    --bg-9: #d1ecfd;
    --bg-10: #ddd3fa;

    /* Animation */
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
  }

  html {
    font-family: var(--font-primary);
  }

  body {
    font-family: var(--font-body);
    font-weight: 300;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
  }

  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
  }

  .filter-white {
    filter: brightness(0) invert(1);
  }

  .filter-black {
    filter: brightness(0%);
  }
  .filter-green {
    filter: invert(32%) sepia(37%) saturate(2042%) hue-rotate(149deg)
      brightness(88%) contrast(101%);
  }
  .filter-gray-500 {
    filter: invert(47%) sepia(8%) saturate(951%) hue-rotate(183deg)
      brightness(91%) contrast(97%);
  }

  .img-shadow {
    box-shadow: 0px 47px 65px rgb(21 28 38 / 10%);
  }
  .menu-shadow {
    box-shadow: 4px 4px 40px rgb(16 24 40 / 10%);
  }
  .input-shadow {
    box-shadow: 14px 14px 36px 0px #99999938;
  }
  .product-shadow:hover {
    box-shadow: 0px 45px 80px 0px #0000000a;
  }
  .card-shadow {
    box-shadow: 0px 45px 80px 0px #0000000a;
  }
  .shadow-3 {
    box-shadow: 0px 47px 65px 0px #151c261a;
  }
  .shadow-4 {
    box-shadow: 0px 20px 60px -6px #0000000a;
  }
  .shadow-sm {
    box-shadow: 0px 1px 2px 0px #0000000d;
  }
  .h-fit {
    height: fit-content;
  }
  .nav-shadow {
    box-shadow: 0 0 15px 0 rgb(0 0 0 / 9%);
  }
  .header-shadow {
    box-shadow: 0 8px 20px 0 rgb(0 0 0 / 5%);
  }
  .filter-orange {
    filter: invert(60%) sepia(83%) saturate(1965%) hue-rotate(13deg) brightness(98%) contrast(97%);
  }
  .filter-black {
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
  }
  .text-blue-custom {
    color: #3497d0;
  }
}

@layer utilities {
  /* Accent utilities backed by CSS variables for easy theming */
  .bg-accent { background-color: var(--accent) !important; }
  .hover\:bg-accent:hover { background-color: var(--accent) !important; }
  .text-accent { color: var(--accent) !important; }
  .border-accent { border-color: var(--frame) !important; }
  .hover\:border-accent:hover { border-color: var(--frame) !important; }
}

/* Supplier form accent color for radio buttons and checkboxes */
.accent-\[\#f8901f\],
input[type="radio"].accent-\[\#f8901f\],
input[type="checkbox"].accent-\[\#f8901f\] {
  accent-color: #f8901f !important;
}

/* Font weight overrides - outside @layer for highest priority */
.font-thin { font-weight: 100 !important; }
.font-extralight { font-weight: 200 !important; }
.font-light { font-weight: 300 !important; }
.font-normal { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }
.font-black { font-weight: 900 !important; }