/**
 * variables.css
 *
 * Version: v1.0.1
 * Author: Midnight Spark <info@midnightspark.nl>
 */

/* Theme: Palette */
:root {
  --color-primary: var(--color-magenta);
  --color-primary-dark: var(--color-magenta-dark);
  --color-secondary: var(--color-purple);
  --color-tertiary: var(--color-yellow);

  /* Palette: Brand Monochrome */
  --color-brand-grey: #414451;
  --color-brand-grey-dark: #232531;
  --color-brand-black: #080915;

  /* Palette: Monochrome */
  --color-black: #08090C;
  --color-black-light: #232531;
  --color-black-transparent: rgba(0, 0, 0, 0.15);
  --color-grey-dark: #50536A;
  --color-grey: #7C81A2;
  --color-grey-light: #CFD1DE;
  --color-white-dark: #F3F4F7;
  --color-white-wordpress: #F0F0F1;
  --color-white: #FFFFFF;
  
  /* Palette: Colors */
  --color-red: #E63946;
  --color-orange: #F77F3F;
  --color-yellow: #FAB648;
  --color-green: #6FBF73;
  --color-mint: #B8E2DC;
  --color-turquoise: #4DBFB3;
  --color-blue: #3D7EA6;
  --color-blue-light: #E8F1F7;
  --color-purple: #5D2E8C;
  --color-magenta: #D63384;
  --color-magenta-dark: #A70161;

  /* Palette: Style Elements */
  --border-radius-default: 4px;

  /* Typography: Font Families */
  --font-family-base: 'Roboto', Helvetica, Arial, sans-serif;
  --font-family-headings: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Typography: Sizes */
  --font-size-h1: 2rem;
  --font-size-h2: 1.4rem;
  --font-size-h3: 1.2rem;
  --font-size-h4: 1.1rem;
  --font-size-body: 1rem;
  --font-size-medium: 0.9rem;
  --font-size-small: 0.8rem;
  --font-size-tiny: 0.7rem;

  /* Typography: Line Heights */
  --line-height-h1: 1;
  --line-height-h2: 1.1;
  --line-height-h3: 1.2;
  --line-height-h4: 1.2;
  --line-height-body: 1.4;
  --line-height-single: 1.7;

  /* Global: Variables */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1025px;
  --breakpoint-desktop: 1280px;
  --global-transition: all 0.2s ease-out;

  /* Global: Grid Sizes */
  --grid-columns: 2;
  --grid-gap: 64px 32px;

  /* Global: Header */
  --header-offset: 72px;
  --menu-item-height: 24px;
  --mega-menu-gap: 16px;
  --mega-pad: 32px;
  --mega-col-gap: 24px;
  --cart-panel-width: 400px;
  --header-height-mobile: 56px;
  --header-offset-mobile: calc(var(--header-height-mobile) + 1px);

  /* Global: WordPress Admin Bar */
  --wpadminbar-height-desktop: 32px;
  --wpadminbar-height-mobile: 46px;
  --wpadminbar-offset: 0px;
}

/* Mobile: Grid Sizes */
@media (max-width: 768px) {
  :root {
    --grid-columns: 1;
    --grid-gap: 48px 0;
  }
}