/*
  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)
  );
}

/*
  BONSAI.IO DESIGN SYSTEM
  Exact values from the bonsai.io marketing site (design system artifact
  "Bonsai.io"). Repo-level tokens below are mapped onto these; prefer the
  semantic tokens in components and reach for --bz-* only for brand moments.
*/
:root {
  --bz-dark-blue: #283746;      /* brand ink: text on light grounds, footer bg */
  --bz-medium-blue: #395c73;    /* secondary blue: supporting text, info */
  --bz-dark-green: #0d383d;     /* dark sections; text on medium-green */
  --bz-green: #317d4f;          /* links, eyebrows, secondary button (5.0:1 on white) */
  --bz-dark-med-green: #68bd90; /* button hover, hex fill — never text on white */
  --bz-medium-green: #9fd2b4;   /* primary button fill, accent rules, card borders */
  --bz-light-green: #e0f4e3;    /* tinted panels */
  --bz-light-grey: #f5f8fa;     /* alternate bands, card headers */
  --bz-gray-light: #c7dbdd;     /* hairlines; code text on code-bg */
  --bz-grey: #9c9c9c;           /* disabled strokes only — never text */
  --bz-purple: #787df7;         /* illustration / hex-check accent only */
  --bz-code-snippet-green: #75ddb1;
  --bz-code-bg: #0e3c46;
  --bz-muted-ink: #5d6c7b;      /* secondary text on white (5.4:1) */
  --bz-deep-green-2: #0b2f33;   /* raised surface inside dark-green sections */
  --bz-white: #ffffff;

  --bz-radius-xs: 2px;
  --bz-radius-sm: 4px;
  --bz-radius-md: 6px;
  --bz-radius-lg: 8px;
  --bz-radius-xl: 12px;
  --bz-radius-2xl: 16px;
  --bz-radius-3xl: 18px;

  --bz-shadow-soft: 0 0 20px #2837461a;
  --bz-shadow-raised: 0 6px 14px #28374624;

  --bz-border-hairline: 1px;
  --bz-border-control: 1.5px;
  --bz-border-nav: 2px;

  --bz-focus-ring: var(--bz-green);
  --bz-transition: all .2s ease-in-out;
}

/*
  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: var(--bz-dark-green);
  --color-dark-blue: var(--bz-dark-blue);
  --color-dark: var(--bz-dark-blue);
  --color-darkish: var(--bz-muted-ink);
  --color-lightish: var(--bz-gray-light);
  --color-light: var(--bz-light-grey);
  --color-lightest: #fff;
  --color-mid: var(--bz-muted-ink);
  --color-blue: var(--bz-medium-blue);
  --color-bright: var(--bz-green);
  --color-bright-complement: var(--bz-light-green);
  --color-info-bright-dark: var(--bz-dark-green);
  --color-light-blue: var(--bz-light-grey);
  --color-green: #59b27d;
  --color-green-bright: #4bc27d;
  --color-green-bright-dark: hsl(145, 45%, 49%);
  --color-indigo: var(--bz-dark-blue);
  --color-grey: var(--bz-muted-ink);
  --color-light-grey: #eceff9;
  --color-red: #ec2c4c;
  --color-orange: #eb6a39;
  --color-yellow: #ebcd39;
  --color-lime: #bac24b;
  --color-purple: #6563f5;
  --color-purple-bright: var(--bz-purple);
  --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: var(--bz-dark-med-green);
  --color-brand-secondary: var(--bz-green);
  --color-brand-dark: var(--bz-dark-green);
  /* Lifted from current site */
  --color-transparent: #fff0;

  /* colors for tree-nav in docs*/
  --color-tree-depth-0: rgba(147, 157, 168, 0.3);
  --color-tree-depth-1: rgba(147, 157, 168, 0.25);
  --color-tree-depth-2: rgba(147, 157, 168, 0.2);
  --color-tree-depth-3: rgba(147, 157, 168, 0.15);

  /*
    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: var(--bz-dark-green);
  --color-secondary: var(--color-light-blue);

  --color-info: var(--color-blue);
  --color-info-bright: var(--color-bright);
  --color-info-dark: var(--bz-dark-blue);
  --color-info-mid: var(--bz-gray-light);
  --color-info-light: var(--color-light-blue);
  --color-info-lightest: var(--bz-light-grey);

  --color-success: var(--bz-green);
  --color-success-dark: var(--bz-dark-green);
  --color-success-light: var(--bz-light-green);

  --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-warning-lightest: #fef9c3;
  --color-warning-border: #fde047;
  --color-warning-icon: #b45309;

  --color-caution: #fdba74;
  --color-caution-light: #ffedd5;
  --color-caution-border: #fdba74;

  --color-danger-lightest: #fee2e2;
  --color-danger-border: #fca5a5;

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

  /* Surfaces & text aliases (used by DocsSearch and gs- components) */
  --color-bg: var(--bz-white);
  --color-bg-secondary: var(--bz-light-grey);
  --color-bg-hover: var(--bz-light-green);
  --color-text-tertiary: var(--bz-muted-ink);
  --color-leaf-500: var(--bz-dark-med-green);

  --color-brand-mid: var(--bz-dark-med-green);
  --color-brand-light: var(--bz-medium-green);
  --color-brand-original-light: var(--bz-light-green);

  --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-header: "Merriweather", Georgia, serif;
  --font-body: "WhitneyHTF Book", "Helvetica Neue", Helvetica, sans-serif;
  --font-ui: "WhitneyHTF", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 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: 14px;
  --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-sm: 1.35;
  --line-height-lg: 1.6rem;
  --line-height-xl: 1.875rem;
  --line-height-2xl: calc(var(--line-height) * (var(--ratio) / 1.15));
  --line-height-3xl: calc(var(--line-height) * (var(--ratio) / 1.2));
  --line-height-4xl: calc(var(--line-height) * var(--ratio));
  --line-height-7xl: calc(var(--line-height) * (var(--ratio) * 1.05));
  --icon-size: 1em;

  /* Long-form body copy (blog posts, docs articles, getting started).
     rem, so sizes follow the reader's browser font-size (1rem = 16px default). */
  --article-font-size: 1.5rem;
  --article-line-height: 2.5rem;
  /* In-article headings: above the 24px body, below the page title
     (h1 3rem / 2.75rem / 2.5rem at desktop / 991px / 767px) */
  --article-h2-size: 2.5rem;
  --article-h2-line: 3.25rem;
  --article-h3-size: 2rem;
  --article-h3-line: 2.75rem;
  --article-h4-size: 1.75rem;
  --article-h4-line: 2.375rem;
  --article-h5-size: 1.625rem;
  --article-h5-line: 2.125rem;
  --article-h6-size: 1.5625rem;
  --article-h6-line: 2.125rem;

  --link-color: var(--bz-green);
  --link-hover-color: var(--bz-dark-green);
}

/*
  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(--bz-radius-md);

  --border-color: var(--bz-gray-light);

  --measure: 65ch;
  --body-measure: 142ch;
  --article-body-measure: calc(var(--body-measure) / 2.5);

  --box-shadow: var(--bz-shadow-raised);
  --box-shadow-1: var(--bz-shadow-soft);
  --box-shadow-2: var(--bz-shadow-raised);
}


/*
  Positioning Settings

*/

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


/*
  Navbar height setting (for height and offset)
  Height of the sticky site header (.nav-bg); docs sidebars and anchor
  scrolling offset by it. Collapsed (hamburger) header is shorter.
 */
:root {
  --navbar-height: 85px;
}

@media (max-width: 1279px) {
  :root {
    --navbar-height: 80px;
  }
}

/*
  Site container: the bonsai.io nav container (max width + side insets).
  Shared by the header and full-width page blocks like the post CTA.
 */
:root {
  --site-max-width: 1360px;
  --site-gutter: 80px;
}

@media (max-width: 991px) {
  :root {
    --site-gutter: 64px;
  }
}

@media (max-width: 767px) {
  :root {
    --site-gutter: 40px;
  }
}

@media (max-width: 479px) {
  :root {
    --site-gutter: 24px;
  }
}

@media (max-width: 991px) {
  :root {
    --article-h2-size: 2.25rem;
    --article-h2-line: 2.75rem;
  }
}

@media (max-width: 767px) {
  :root {
    --article-font-size: 1.25rem;
    --article-line-height: 2rem;
    --article-h2-size: 2.125rem;
    --article-h2-line: 2.625rem;
    --article-h3-size: 1.625rem;
    --article-h3-line: 2.25rem;
    --article-h4-size: 1.5rem;
    --article-h4-line: 2rem;
    --article-h5-size: 1.375rem;
    --article-h5-line: 1.875rem;
    --article-h6-size: 1.3125rem;
    --article-h6-line: 1.875rem;
  }
}