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

#root {
  font-family: "graphik th";
}

@font-face {
  font-family: "graphik th";
  font-weight: 400;
  src: url("https://trade.sit.innovestx.co.th/static-file/fonts/GraphikTH-Regular.ttf");
}
@font-face {
  font-family: "graphik th";
  font-weight: 500;
  src: url("https://trade.sit.innovestx.co.th/static-file/fonts/GraphikTH-Medium.ttf");
}
@font-face {
  font-family: "graphik th";
  font-weight: 700;
  src: url("https://trade.sit.innovestx.co.th/static-file/fonts/GraphikTH-Bold.ttf");
}

@layer base {
  :root {
    --gunmetal-10: 251 251 251;
    --gunmetal-25: 245 245 246;
    --gunmetal-50: 235 235 237;
    --gunmetal-100: 216 215 219;
    --gunmetal-200: 176 175 183;
    --gunmetal-300: 137 136 148;
    --gunmetal-400: 97 96 112;
    --gunmetal-500: 58 56 76;
    --gunmetal-600: 46 45 61;
    --gunmetal-700: 35 34 46;
    --gunmetal-750: 29 28 38;
    --gunmetal-800: 23 22 30;

    --lavender-200: 231 222 255;
    --lavender-300: 194 172 255;
    --lavender-400: 157 123 255;
    --lavender-500: 133 90 255;
    --lavender-600: 106 72 204;
    --lavender-700: 67 45 128;
    --lavender-800: 53 36 102;
    --lavender-900: 27 18 51;

    --black-100: 0 0 0;

    --purple-200: 219 212 231;
    --purple-300: 165 147 194;
    --purple-500: 111 83 157;
    --purple-700: 75 40 133;
    --purple-800: 60 32 106;
    --purple-900: 38 20 67;

    --jet-black-800: 34 37 49;

    --stormy-blue-100: 41 45 62;

    --blue-900: 23 25 36;

    --cyan-blue-200: 204 230 255;
    --cyan-blue-300: 128 191 255;
    --cyan-blue-400: 51 153 255;
    --cyan-blue-500: 0 128 255;
    --cyan-blue-600: 0 102 204;
    --cyan-blue-700: 0 64 128;

    --yellow-100: 235 231 23;
    --yellow-200: 251 250 209;
    --yellow-300: 245 243 139;
    --yellow-400: 239 236 69;
    --yellow-500: 235 231 23;
    --yellow-600: 188 185 18;
    --yellow-700: 118 116 12;

    --turquoise-200: 223 246 249;
    --turquoise-300: 175 231 239;
    --turquoise-400: 127 217 229;
    --turquoise-500: 95 208 223;
    --turquoise-600: 76 166 178;
    --turquoise-700: 48 104 112;

    --simple-white-100: 255 255 255;
    --mid-dark-gray-300: 55 55 55;
    --magnolia: 240 238 246;

    --status-green: 78 190 110;
    --status-lime: 194 225 0;
    --status-yellow: 249 235 85;
    --status-orange: 255 167 19;
    --status-red: 233 66 74;

    --tertiary: 97 96 112;

    --input-background: var(--simple-white-100);
    --input-border: var(--gunmetal-200);

    --accordion-background: var(--simple-white-100);
    --accordion-background-hover: var(--gunmetal-25);
    --accordion-primary: var(--black-100);
    --accordion-secondary: var(--gunmetal-300);
    --accordion-divider: var(--gunmetal-50);

    --tab-background-unfocus: var(--simple-white-100);

    --card-select-uid-background: var(--simple-white-100);
    --card-select-uid-background-select: var(--simple-white-100);
    --card-otp: 33 35 47;

    --paginate-index: var(--gunmetal-300);
    --paginate-icon-chevron-active: var(--gunmetal-800);
    --paginate-icon-chevron-inactive: var(--gunmetal-200);

    --login-ribbon: var(--simple-white-100);
    --login-tooltip: var(--lavender-500);
    --login-icon: var(--lavender-500);
    --login-background: var(--simple-white-100);
    --login-text-gradient: var(--cyan-blue-200);

    --sidebar-label: var(--gunmetal-400);
    --sidebar-label-active: var(--black-100);
    --sidebar-trailing: var(--gunmetal-400);
    --sidebar-background-active: var(--simple-white-100);

    --footer-background: var(--gunmetal-25);

    --logo-text: var(--purple-700);
    --logo-circle-1: var(--yellow-100);
    --logo-circle-2: var(--cyan-blue-500);
    --logo-circle-3: var(--purple-700);
    --logo-circle-4: var(--turquoise-400);

    --tooltip-background: var(var(--lavender-500));

    --text-default: var(--gunmetal-800);
    --text-disable: var(--simple-white-100);
    --text-subtext: var(--gunmetal-300);
    --text-subtitle: var(--gunmetal-400);

    --select-option-bg: var(--gunmetal-25);

    --screen-background: var(--magnolia);

    --background-default: var(--simple-white-100);

    --icon-default: var(--gunmetal-200);

    --breadcrumbs: var(--tertiary);
  }

  .dark {
    --input-background: var(--gunmetal-800);
    --input-border: var(--mid-dark-gray-300);

    --accordion-background: var(--gunmetal-800);
    --accordion-background-hover: var(--black-100);
    --accordion-primary: var(--simple-white-100);
    --accordion-secondary: var(--gunmetal-200);
    --accordion-divider: var(--gunmetal-600);

    --tab-background-unfocus: var(--gunmetal-800);

    --card-select-uid-background: var(--gunmetal-700);
    --card-select-uid-background-select: var(--gunmetal-800);
    --card-otp: 33 35 47;

    --paginate-index: var(--gunmetal-200);
    --paginate-icon-chevron-active: var(--simple-white-100);
    --paginate-icon-chevron-inactive: var(--gunmetal-800);

    --login-ribbon: var(--gunmetal-750);
    --login-tooltip: var(--purple-700);
    --login-icon: var(--gunmetal-200);
    --login-background: var(--gunmetal-800);
    --login-text-gradient: var(--simple-white-100);

    --sidebar-label: var(--simple-white-100);
    --sidebar-label-active: var(--simple-white-100);
    --sidebar-trailing: var(--gunmetal-400);
    --sidebar-background-active: var(--gunmetal-700);

    --footer-background: var(--gunmetal-700);

    --logo-text: var(--simple-white-100);
    --logo-circle-1: var(--simple-white-100);
    --logo-circle-2: var(--simple-white-100);
    --logo-circle-3: var(--simple-white-100);
    --logo-circle-4: var(--simple-white-100);

    --tooltip-background: var(--purple-700);

    --text-default: var(--simple-white-100);
    --text-disable: var(--gunmetal-300);
    --text-subtext: var(--gunmetal-300);
    --text-subtitle: var(--gunmetal-50);

    --select-option-bg: var(--gunmetal-600);

    --screen-background: var(--black-100);

    --background-default: var(--gunmetal-800);

    --icon-default: var(--simple-white-100);

    --breadcrumbs: var(--tertiary);
  }

  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

@layer components {
  .border-gradient {
    @apply bg-gradient-to-bl from-gunmetal-400 from-0% via-gunmetal-800 via-70% to-gunmetal-400 to-100% p-[1px];
  }
}