/*
  SCALE
    Our ruler that sets measurements and intervals for consistent
    vertical and horizontal rhythm throughout the design.

  @note
    These are also used to define spacing and sizes of utilities and components,
    for example, the spacing between a button and a text input, or the size
    of a spacer. The naming conventions in those utilities should be consistent
    with the scale used.

    e.g.
    .padding\:s0 {
      padding: var(--s0);
    }
    .padding\:s-1 {
      padding: var(--s-1);
    }

  @usage
    .my-component {
      gap: var(--s0);
    }
*/
:root {
  --ratio: 1.35;
  --s-7: calc(
    var(--s0) / var(--ratio) / var(--ratio) / var(--ratio) / var(--ratio) /
      var(--ratio) / var(--ratio) / var(--ratio)
  );
  --s-6: calc(
    var(--s0) / var(--ratio) / var(--ratio) / var(--ratio) / var(--ratio) /
      var(--ratio) / var(--ratio)
  );
  --s-5: calc(
    var(--s0) / var(--ratio) / var(--ratio) / var(--ratio) / var(--ratio) /
      var(--ratio)
  );
  --s-4: calc(
    var(--s0) / var(--ratio) / var(--ratio) / var(--ratio) / var(--ratio)
  );
  --s-3: calc(var(--s0) / var(--ratio) / var(--ratio) / var(--ratio));
  --s-2: calc(var(--s0) / var(--ratio) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s0) * var(--ratio) * var(--ratio));
  --s3: calc(var(--s0) * var(--ratio) * var(--ratio) * var(--ratio));
  --s4: calc(
    var(--s0) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)
  );
  --s5: calc(
    var(--s0) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) *
      var(--ratio)
  );
  --s6: calc(
    var(--s0) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) *
      var(--ratio) * var(--ratio)
  );
  --s7: calc(
    var(--s0) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) *
      var(--ratio) * var(--ratio) * var(--ratio)
  );
}

/*
  COLORS

  All the colors!

  @usage
  .label-primary {
    color: var(--color-primary);
  }
  .label-purple {
    color: var(--color-purple);
  }
*/

:root {
  /*
    Palette

    Our base palette we work with.
  */
  --color-black: #101827;
  --color-dark: #454d5d;
  --color-darkish: #5a6269;
  --color-lightish: #e8ebee;
  --color-light: #f5f8fa;
  --color-lightest: #fff;
  --color-mid: hsl(0, 0%, 50%);
  --color-blue: #259ac4;
  --color-bright: #1aade2;
  --color-bright-complement: #e1f2f9;
  --color-info-bright-dark: #19a1d1;
  --color-light-blue: #e8f7fe;
  --color-green: #59b27d;
  --color-green-bright: #4bc27d;
  --color-green-bright-dark: hsl(145, 45%, 49%);
  --color-indigo: #244260;
  --color-grey: #939da8;
  --color-light-grey: #caced7;
  --color-red: #ec2c4c;
  --color-orange: #eb6a39;
  --color-yellow: #ebcd39;
  --color-lime: #bac24b;

  /* The bright purple, mostly used for the main branded website and not often used in the application */
  --color-purple: #6563f5;
  --color-purple-bright: #787df7;
  --color-purple-light: #dadaff;
  --color-purple-dark: #3735c0;

  /*
    Brand Colors

    The colors of "bonsai" as a brand. For use in logos and sections
    where we want to reinforce a sense of who we are.
  */
  --color-brand: #68bd90;
  --color-brand-secondary: #317d4f;
  --color-brand-dark: #204345;
  --color-brand-light: #e4f3ea;

  /*
    System Colors

    These colors are the app workhorses. They imbue meaning and provide context,
    giving feedback to users, visual cues for what to do next, and provide glaring
    signs for status, error, and success states.

    When they are used in components, their name should map to the intent and context
    of the component. For example, if clicking a certain button is a "dangerous" action,
    the class name and system color used in that class should mirror that context.

    @usage

    button.danger {
      background-color: var(--color-danger);
    }
  */

  --color-primary: var(--color-bright);
  --color-primary-dark: #2080a3;
  --color-secondary: var(--color-light-blue);

  --color-info: var(--color-blue);
  --color-info-bright: var(--color-bright);
  --color-info-dark: #1c7798;
  --color-info-mid: #bae3f2;
  --color-info-light: var(--color-light-blue);
  --color-info-lightest: #cfe7f0;

  --color-success: var(--color-green);
  --color-success-dark: #4ea873;
  --color-success-light: #e8f7ee;

  --color-error: var(--color-red);
  --color-error-dark: #92182d;
  --color-error-light: #ffdee4;
  --color-error-light-1: #fff7f7;

  --color-danger: var(--color-red);
  --color-danger-dark: #92182d;
  --color-danger-mid: #f99eae;
  --color-danger-light: #ffdee4;

  --color-warning: #ebcd39;
  --color-warning-bright: #ffd400;
  --color-warning-dark: #ab9628;
  --color-warning-light: #fffbe5;

  --color-muted: var(--color-mid);

  --color-brand-mid: #7fc7a1;
  --color-brand-light: #9fd2b4;
  --color-brand-original-light: #e0f4e3;

  --color-staff: var(--color-purple-bright);

  /* Alphas - for inverted sections */
  --color-white-alpha: rgba(255, 255, 255, 0.92);
  --color-info-light-blue-alpha: #3f6e838a;
  --color-success-light-alpha: #3c76538c;
  --color-error-light-alpha: #803c488a;
  --color-muted-light-alpha: #e8ebee40;
}

/*
  FONTS & type

  @todo add Sommet Bold
  @todo add Whitney Screen Smart
*/

:root {
  --font-body: "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: Menlo, Courier, Courier New, Andale Mono, monospace;
  --font-weight: 400;
  --font-color: var(--color-dark);

  --line-height: var(--ratio);

  /* Font sizes are calculated using view width. Could use refactoring with media queries to make it better */
  --font-size: 1rem;
  --font-size-sm: 0.85rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.4rem;
  --font-size-3xl: 1.8rem;
  --font-size-4xl: 2.25rem;
  --font-size-7xl: 3rem;
  --line-height-lg: 1.6rem;
  --line-height-xl: 1.875rem;
  --line-height-2xl: calc(var(--line-height) * (var(--ratio) / 1.10));
  --line-height-3xl: calc(var(--line-height) * (var(--ratio) / 1.05));
  --line-height-4xl: calc(var(--line-height) * var(--ratio));
  --line-height-7xl: calc(var(--line-height) * (var(--ratio) * 1.05));
  --icon-size: 1em;

  --link-color: var(--color-bright);
}

/*
  Theme - for light mode

  @todo add dark mode
*/

:root {
  --background-color: white;
}

/*
  Common Element Settings
*/

:root {
  --control-size: var(--s2);

  --border-sm: calc(var(--s-7) / var(--ratio));
  --border-thin: var(--s-7);
  --border-thick: var(--s-6);

  --border-radius: var(--s-5);

  --border-color: #b1bac3;

  --measure: 65ch;
  --body-measure: 132ch;
  --article-body-measure: calc(var(--body-measure) / 1.5);

  --box-shadow: 0 var(--s-3) var(--s0) 0 rgb(0 0 0 / 16%);
  --box-shadow-1: 0 0.1rem 0.2rem 0 rgba(0, 0, 0, 0.1);
  --box-shadow-2: 0 var(--s-3) var(--s0) 0 rgb(0 0 0 / 16%);
}


/*
  Positioning Settings

*/

:root {
  --z0: 0;
  --z1: 10;
  --z2: 20;
}


/*
  Navbar height setting (for height and offset)
 */
:root {
  --navbar-height: 60px;
}