@import "tailwindcss";

@utility page-container {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

@theme {
  /* Primary */
  --color-main-red: #E91000;
  --color-main-blue: #0033FF;

  /* Background */
  --color-grey-bg: #F1F2F4;

  /* Text */
  --color-text-heading: #191919;
  --color-text-subheading: #4B4B4B;
  --color-text-placeholder: #676773;
  --color-text-disabled: #94A3B8;
  --color-text-link: #1A48FF;
  --color-text-price: #E91000;
  --color-text-discount: #005838;

  /* Branding */
  --color-homepro: #0066B3;
  --color-line: #00C200;
  --color-line-light: #00DB00;
  --color-line-dark: #00A800;
  --color-scb-purple: #471F99;

  /* Campaign */
  --color-bundle: #FF6A16;
  --color-project: #FFEC74;

  /* Semantic */
  --color-active: #1D4ED8;
  --color-success: #16A34A;
  --color-error: #E6002E;

  /* Grey */
  --color-grey-50: #F8FAFC;
  --color-grey-100: #F1F5F9;
  --color-grey-200: #E2E8F0;
  --color-grey-300: #CBD5E1;
  --color-grey-400: #94A3B8;
  --color-grey-500: #64748B;
  --color-grey-600: #475569;
  --color-grey-700: #334155;
  --color-grey-800: #1E293B;
  --color-grey-900: #0F172A;

  /* Zinc */
  --color-zinc-50: #FAFAFA;
  --color-zinc-100: #F4F4F5;
  --color-zinc-200: #E4E4E7;
  --color-zinc-300: #D4D4D8;
  --color-zinc-400: #A1A1AA;
  --color-zinc-500: #71717A;
  --color-zinc-600: #52525B;
  --color-zinc-700: #3F3F46;
  --color-zinc-800: #27272A;
  --color-zinc-900: #18181B;

  /* Red */
  --color-red-50: #FEF2F2;
  --color-red-100: #FEE2E2;
  --color-red-200: #FECACA;
  --color-red-300: #FCA5A5;
  --color-red-400: #F87171;
  --color-red-500: #EF4444;
  --color-red-600: #DC2626;
  --color-red-700: #B91C1C;
  --color-red-800: #991B1B;
  --color-red-900: #7F1D1D;

  /* Blue */
  --color-blue-50: #EFF6FF;
  --color-blue-100: #DBEAFE;
  --color-blue-200: #BFDBFE;
  --color-blue-300: #93C5FD;
  --color-blue-400: #60A5FA;
  --color-blue-500: #3B82F6;
  --color-blue-600: #2563EB;
  --color-blue-700: #1D4ED8;
  --color-blue-800: #1E40AF;
  --color-blue-900: #1E3A8A;

  /* Teal */
  --color-teal-50: #F0FDFA;
  --color-teal-100: #CCFBF1;
  --color-teal-200: #99F6E4;
  --color-teal-300: #5EEAD4;
  --color-teal-400: #2DD4BF;
  --color-teal-500: #14B8A6;
  --color-teal-600: #0D9488;
  --color-teal-700: #0F766E;
  --color-teal-800: #115E59;
  --color-teal-900: #134E4A;

  /* Green */
  --color-green-50: #F0FDF4;
  --color-green-100: #DCFCE7;
  --color-green-200: #BBF7D0;
  --color-green-300: #86EFAC;
  --color-green-400: #4ADE80;
  --color-green-500: #22C55E;
  --color-green-600: #16A34A;
  --color-green-700: #15803D;
  --color-green-800: #166534;
  --color-green-900: #14532D;

  /* Yellow */
  --color-yellow-50: #FEFCE8;
  --color-yellow-100: #FEF9C3;
  --color-yellow-200: #FEF08A;
  --color-yellow-300: #FDE047;
  --color-yellow-400: #FACC15;
  --color-yellow-500: #EAB308;
  --color-yellow-600: #CA8A04;
  --color-yellow-700: #A16207;
  --color-yellow-800: #854D0E;
  --color-yellow-900: #713F12;

  /* Orange */
  --color-orange-50: #FFFBEB;
  --color-orange-100: #FEF3C7;
  --color-orange-200: #FDE68A;
  --color-orange-300: #FCD34D;
  --color-orange-400: #FBBF24;
  --color-orange-500: #F59E0B;
  --color-orange-600: #D97706;
  --color-orange-700: #B45309;
  --color-orange-800: #92400E;
  --color-orange-900: #78350F;

  /* Font weights */
  --font-weight-normal: 300;
  --font-weight-bold: 500;

  /* Breakpoints */
  --breakpoint-xxs: 350px;
  --breakpoint-md: 768px;
  --breakpoint-xl: 1296px;

  /* Shadows */
  --shadow-brand-30: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-brand-60: 0 8px 24px rgba(0, 0, 0, 0.6);
}