/**
 * REFACTOR:
 * Reduce to the common build time variable we use cross project.
 * Move theme CSS vars to theme/base->project.st.css reducing them as we go...
 */
@namespace "Project";

/* Common colors and breakpoints and anything else we deem consistant across projects. */
:vars {
  /*
   * Defining media-query values to be used across the application
   * By defining them this way it will push developers to approach
   * CSS with mobile first approach.
   */
  /* Breakpoints 
   * @TODO: Review as tablet seems to be a big 'tablet'... 
   */
  tiny: "only screen and (min-width: 338px)";
  tiny-max: "only screen and (max-width: 567px)";
  mobile: "only screen and (min-width: 568px)";
  mobile-max: "only screen and (max-width: 949px)";
  tablet: "only screen and (min-width: 950px)";
  tablet-max: "only screen and (max-width: 1023px)";
  laptop: "only screen and (min-width: 1024px)";
  laptop-max: "only screen and (max-width: 1179px)";
  widelaptop: "only screen and (min-width: 1180px)";
  desktop: "only screen and (min-width: 1440px)";
  large: "only screen and (min-width: 1680px)";
  /* Colours */
  /* Lights */
  color-light-yellow: #FFE49E;
  color-light-orange: #FFC288;
  color-light-red: #FFBAB8;
  color-light-pink: #FFA0D7;
  color-light-purple: #D3B8FF;
  color-light-blue: #97DAFF;
  color-light-teal: #99EDD1;
  color-light-green: #C0DF88;
  color-light-petrol: #7CA7AD;
  color-light-grey: #C8C8C8;
  color-light-brown: #DCBFA5;
  /* Core */
  color-white: #FFFFFF;
  color-black: #000000;
  color-yellow: #FFE300;
  color-orange: #FF8200;
  color-red: #EA0034;
  color-pink: #FF00c8;
  color-purple: #B25Eff;
  color-indigo: #23085A;
  color-blue: #00DCFF;
  color-teal: #00EDC3;
  color-green: #5DEB4B;
  color-petrol: #035C67;
  color-grey: #898A8D;
  color-brown: #7E3C23;
  /* Darks */
  color-dark-yellow: #E4B800;
  color-dark-orange: #FF4635;
  color-dark-red: #AB0033;
  color-dark-pink: #920061;
  color-dark-purple: #7716BD;
  color-dark-blue: #005CB9;
  color-dark-teal: #009D8C;
  color-dark-green: #00953B;
  color-dark-petrol: #003B4A;
  color-dark-grey: #54565A;
  color-dark-brown: #472029;
}

/* Runtime variables, these variables have more performance impact */
.root {
  /**
   * Once this is empty (remove as we go) and we have no components directly
   * accessing this file we can remove all the imports from base.st.css above under TEMP.
   *
   * We want to reduce these down as we envelope them and generalise them,
   * we can declare local variables as part of the base files and they can be
   * imported and re-defined by any project variants.
   *
   * @todo: Resolve these remaining vars, mainly from mixins:
   */
  /* box-shadow */
  --form-input-box-shadow-color: 0 2px 3px var(--color-shadow);
  --form-input-textinset-box-shadow-color: 0 0 0 1000px var(--color-shadow) inset;
  --form-input-gradient-color: linear-gradient(180deg, value(color-white) 0%, var(--color-faint) 100%);
}