:root {
  /* Colors */
  --ks-brand-color-primary: #ffa959;
  --ks-brand-color-primary-inverted: #261b25;

  --ks-brand-color-onPrimary: #261b25;
  --ks-brand-color-onPrimary-inverted: #ffd7b1;

  --ks-brand-color-bg: #261b25;
  --ks-brand-color-bg-inverted: #ffcea0;

  --ks-brand-color-fg: #ffa959;
  --ks-brand-color-fg-inverted: #261b25;

  --ks-brand-color-link: #ffd7b1;
  --ks-brand-color-link-inverted: #261b25;

  --ks-brand-color-positive: #6edb64;
  --ks-brand-color-positive-inverted: #23831b;

  --ks-brand-color-negative: #d21d48;
  --ks-brand-color-negative-inverted: #ff1a57;

  --ks-brand-color-informative: #00718f;
  --ks-brand-color-informative-inverted: #64c2db;

  --ks-brand-color-notice: #00718f;
  --ks-brand-color-notice-inverted: #64c2db;

  --ks-brand-color-scale-9: 5%;
  --ks-brand-color-scale-8: 10%;
  --ks-brand-color-scale-7: 19%;
  --ks-brand-color-scale-6: 32%;
  --ks-brand-color-scale-5: 50%;
  --ks-brand-color-scale-4: 68%;
  --ks-brand-color-scale-3: 81%;
  --ks-brand-color-scale-2: 90%;
  --ks-brand-color-scale-1: 95%;
}

:root {
  /* Font Families */
  --ks-brand-font-family-display: Roboto Condensed;
  --ks-brand-font-family-copy: system-ui, -apple-system, BlinkMacSystemFont,
    "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
    "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
    "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
    "Liberation Sans", sans-serif;
  --ks-brand-font-family-interface: system-ui, -apple-system, BlinkMacSystemFont,
    "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue",
    "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell",
    "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic",
    "Liberation Sans", sans-serif;
  --ks-brand-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* Font Weights */
  --ks-brand-font-weight-light: 300;
  --ks-brand-font-weight-regular: 400;
  --ks-brand-font-weight-medium: 500;
  --ks-brand-font-weight-semi-bold: 600;
  --ks-brand-font-weight-bold: 700;
}

/* Normalized user input tokens (range: 1-2) */

/*
Shrink Factor:      Determine scaling from m to xxs
Grow Factor:        Determine scaling from m to xxl
Breakpoint Factor:  Higher bp factor means large spacings increase
                    more at bigger screen sizes than small spacings
*/

/* Font Size */
:root {
  --ks-brand-font-size-display-base: 20px;
  --ks-brand-font-size-display-shrink-factor: 1.5;
  --ks-brand-font-size-display-grow-factor: 1.5;
  --ks-brand-font-size-display-bp-factor: 1.5;

  --ks-brand-font-size-copy-base: 14px;
  --ks-brand-font-size-copy-shrink-factor: 1.5;
  --ks-brand-font-size-copy-grow-factor: 1.5;
  --ks-brand-font-size-copy-bp-factor: 1.5;

  --ks-brand-font-size-interface-base: 14px;
  --ks-brand-font-size-interface-shrink-factor: 1.5;
  --ks-brand-font-size-interface-grow-factor: 1.5;
  --ks-brand-font-size-interface-bp-factor: 1.5;

  --ks-brand-font-size-mono-base: 14px;
  --ks-brand-font-size-mono-shrink-factor: 1.5;
  --ks-brand-font-size-mono-grow-factor: 1.5;
  --ks-brand-font-size-mono-bp-factor: 1.5;
}

/* Spacing */
:root {
  --ks-brand-spacing-base: 16px;
  --ks-brand-spacing-shrink-factor: 1.5;
  --ks-brand-spacing-grow-factor: 1.5;
  --ks-brand-spacing-bp-factor: 1.5;
}

/* Border */
:root {
  --ks-brand-border-width-default: 1px;
  --ks-brand-border-width-emphasized: 2px;
  --ks-brand-border-radius-factor: 1.5;
}

/* Shadow */
:root {
  --ks-brand-box-shadow-blur-factor: 1.75;
  --ks-brand-box-shadow-opacity-factor: 2;
  --ks-brand-box-shadow-spread-factor: 1;
}