/* CSS Vars */
:root {
  /* Brand Colors */
  --brandColorMidnight:   #0D0726;
  --brandColorBurst:      #FF0000;
  --brandColorOrchid:     #F200AB;
  --brandColorBluestreak: #0053FF;
  --brandColorBluestreak-light: #4884FF;
  --brandColorMist:       #DAD8E5;

  /* Fonts */
  --brand-font: "Work Sans", Helvetica, Arial, Verdana, sans-serif;

  /* Gradients */
  --gradient-direction: 90deg;
  --brandGradientColorful: linear-gradient(var(--gradient-direction), var(--brandColorBurst) 0%, var(--brandColorOrchid) 50%, var(--brandColorBluestreak) 100%);
  --brandGradientLight: linear-gradient(var(--gradient-direction), #fff 0%, var(--brandColorMist) 100%);
  --brandGradientDark: linear-gradient(var(--gradient-direction), var(--brandColorMidnight) 0%, var(--color-primary-700) 100%);



  /* Design Colors */
  --color-primary-50:       #F7F6FA;
  --color-primary-100:      #EDEBF2;
  --color-primary-200:      var(--brandColorMist);
  --color-primary-300:      #ABA7BC;
  --color-primary-400:      #847E9C;
  --color-primary-500:      #676183;
  --color-primary-600:      #433d5e;
  --color-primary-700:      #2C2549;
  --color-primary-800:      #201b37;
  --color-primary-900:     var(--brandColorMidnight);
  --color-primary-950:      #0A061B;

  --color-dark:  var(--color-primary-900);
  --color-light: #fff;

  --color-fg: var(--color-dark);
  --color-bg: var(--color-light);

  --color-accent:       var(--brandColorBluestreak);
  --color-attention:     var(--brandColorBurst);

  /* Legacy Colors - Deprecated */
  --primaryColor:         var(--color-primary-900);
  --activeColor:          var(--brandColorBluestreak);
  --mainBgColor:          var(--color-primary-900);

  --brandColorGreen: #64AB45;
  --artworkCartFieldsetBackgroundColor: var(--brandColorGreen);

  /* Design Parameters */
  --radius:  .4rem;

  /* Spacing */
  --space: 1rem;
  --spacing-general: clamp(.75rem, 3.5vw, 2rem);
  --spacing-horizontal: var(--spacing-general);
  --spacing-vertical: var(--spacing-general);
  --section-padding-vertical: clamp(1.5em, 5vw, 5em);

  /* Rows */
  --row-gutter: var(--spacing-horizontal);
  --row-max-width: calc(1320px + 2 * var(--row-gutter));
  --row-min-width: 200px;


  /* Fonts */
  --font-sans: var(--brand-font);



  --baseline-unit: 1rem;

}

body,
.theme-mist,
.theme-light {
  --color-mid: var(--color-primary-800);
  --color-highlight: var(--color-primary-600);
  --color-accent: var(--brandColorBluestreak);

  --color-bg: #fff;
  --color-fg: var(--color-primary-900);

  background: var(--color-bg);
  color: var(--color-fg);
}

.theme-mist {
  --color-bg: var(--color-primary-100);
}

/* Need fallbacks for no color-mix support? */
.theme-dusk {
  --color-mid: color-mix(in srgb, var(--color-dark) 60%, var(--color-light));
  --color-highlight: color-mix(in srgb, var(--color-dark) 50%, var(--color-light));
  --color-accent: var(--brandColorBluestreak);

  --color-bg: var(--color-primary-800);
  --color-fg: var(--color-light);
  --link-color: var(--color-light);

  background: var(--color-bg);
  color: var(--color-fg);
}


.theme-dark {
  --color-mid: var(--color-primary-800);
  --color-highlight: var(--color-primary-600);
  --color-accent: var(--brandColorBluestreak-light);

  --color-bg: var(--color-dark);
  --color-fg: var(--color-light);

  background: var(--color-bg);
  color: var(--color-fg);
}