/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Oswald:wght@200..700&display=swap');

/* CSS variables */
:root {
  /* Primary Colours */
  --color-background: #0b0c0e; /* near black */
  --color-text: #FFFFFF; /* white for text */

  /* Accent Colour */
  --color-accent: #539FD2; /* light blue */

  /* Background Greys for product cards & UI elements */
  --color-background-grey-dark: #202122; /* charcoal */
  --color-background-grey-medium: #45464a; /* dark grey */
  --color-background-grey-light: #a3aab5; /* light grey */

  /* Fonts */
  --font-primary: 'Arimo', Arial, sans-serif;
  --font-secondary: 'Oswald', Verdana, sans-serif;

  /* Common spacings */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* Common border-radiuses */
  --border-radius-sm: 0.375rem;
  --border-radius-md: 0.5rem;
  --border-radius-lg: 0.75rem;

  /* Common shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  /* Responsive breakpoints (for JS use) */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;

}