/**
 * These are the raw values for the standard colors that we want.
**/
.theme-waab {
  --page-max-width: 1176px;
  --gutter-s: 12px;
  --gutter-l: 24px;

  /*
  --b_xs: screen and (max-width: 575px);
  --b_sm: screen and (min-width: 576px);
  --b_md: screen and (min-width: 768px);
  --b_lg: screen and (min-width: 1024px);
  --b_xl: screen and (min-width: 1176px);

  --b_sm_max: screen and (max-width: 767px);
  --b_md_max: screen and (max-width: 1023px);
  --b_lg_max: screen and (max-width: 1175px);
  */

  /* TYPOGRAPHY */

  --font-primary-text: 'SL Gothic';
  --font-primary-display: 'WAAB Display';
  --font-secondary-display: 'WAAB Display CAPS';

  --font-text-body: 1.125rem/1.75rem var(--font-primary-text);
  --font-text-body-s: 1rem/1.5rem var(--font-primary-text);
  --font-text-preamble: 1.5rem/2rem var(--font-primary-text);

  --font-title-xxl: bold 4.5rem/4.5rem var(--font-primary-display);
  --font-title-xl: bold 3.75rem/4rem var(--font-primary-display);
  --font-title-l: bold 3rem/3.25rem var(--font-primary-display);
  --font-title-m: bold 2.25rem/2.5rem var(--font-primary-display);
  --font-title-s: bold 1.5rem/1.75rem var(--font-primary-text);
  --font-title-xs: bold 1.25rem/1.5rem var(--font-primary-text);
  --font-title-xxs: 1.25rem/1.5rem var(--font-primary-text);

  --font-button: bold 1.125rem/1.5rem var(--font-primary-text);
  --font-label: bold 1.125rem/1.25rem var(--font-primary-text);
  --font-caption: 1rem/1.25rem var(--font-primary-text);

  --nav-side-font: var(--font-title-xxs);

  /* Spacings */
  /* https://www.figma.com/file/rNvpernOG8A8EB8xAhv1o9/SL-Foundation-Library?node-id=885%3A0 */
  --space-xxxs: 4px;
  --space-xxs: 8px;
  --space-xs: 16px;
  --space-s: 24px;
  --space-m: 32px;
  --space-l: 40px;
  --space-xl: 48px;
  --space-xxl: 64px;
  --space-xxxl: 72px;
  --space-xxxxl: 80px;

  /* Form Spacings */
  --form-space-xxs: 4px;
  --form-space-xs: 8px;
  --form-space-s: 12px;
  --form-space-m: 16px;
  --form-space-l: 24px;
  --form-space-xl: 32px;
  --form-space-xxl: 40px;
  --form-element-min-height: 44px;
  --space-before-footer: 80px;

  /* === Z-INDEX === */
  --z_context_menu: 1500;

  /* BASE COLORS */

  --color-neutral-100: #ffffff;
  --color-neutral-200: #e5e9ec;
  --color-neutral-300: #cdd7dd;
  --color-neutral-400: #7895a5;
  --color-neutral-500: #54778c;
  --color-neutral-600: #194159;
  --color-neutral-700: #002c46;
  --color-neutral-800: #002032;
  --color-neutral-900: #000000;

  --color-primary-100: #eef9ff;
  --color-primary-200: #8ad9ff;
  --color-primary-300: #34ace7;
  --color-primary-400: #007bb7;
  --color-primary-500: #016290;

  --color-accent-yellow: #ffcc00;
  --color-accent-darkblue: #002c46;

  --color-error-100: #fdecec;
  --color-error-300: #f05555;
  --color-error-400: #c82929;

  --color-warning-100: #fff0e5;
  --color-warning-300: #fb9e53;
  --color-warning-400: #c76e2e;

  --color-highlight-100: #fdf6d8;
  --color-highlight-300: #f7dd5f;
  --color-highlight-400: #f5cf39;

  --color-success-100: #e2f3eb;
  --color-success-300: #1d9f64;
  --color-success-400: #18774c;

  /* The following transport color variables should be the same in all environments.
   * If you make a change here, make sure to do the same in the other files.
   */
  --color-metro-blue: #007db8;
  --color-metro-red: #d71d24;
  --color-metro-green: #148541;
  --color-tram-saltsjobanan: #028387;
  --color-tram-roslagsbanan: #9f599a;
  --color-tram-sparvagcity: #747770;
  --color-tram-nockebybanan: #627892;
  --color-tram-lidingobanan: #a54905;
  --color-tram-tvarbanan: #b65f1f;
  --color-train-commuterrail: #cc417f;
  --color-bus-replacement: #fb9e53;
  --color-boat-pendel: #007db8;
  --color-boat-waab: #95c11f;
  --color-waab-pink: #c64388;
  --color-waab-sky: #1b7db1;
  --color-waab-ocean: #08837b;
  --color-waab-olive: #498228;
  --color-waab-maroon: #bc550c;
  --color-waab-deep-red: #d2471c;
  --color-waab-deep-blue: #006daa;
  --color-waab-ash: #5f6e74;
  --color-waab-mustard: #f9c623;
  --color-bus-dark: #000000;
  --color-bus-light: #ffffff;
  --color-unknown: #c0c2c6;
  --color-walk: #000000;
  --color-bike: #fbff00;

  --color-line-rosa: #c7468a;
  --color-line-ljusbla: #1b7db1;
  --color-line-turkos: #08837b;
  --color-line-gron: #498228;
  --color-line-orange: #bc550c;
  --color-line-rod: #d2471c;
  --color-line-djupbla: #006daa;
  --color-line-gra: #5f6e74;
  --color-line-gul: #f9c623;

  /* BORDERS */

  --border-width-default: 2px;
  --border-width-thin: 1px;
  --border-width-thick: 4px;
  --border-width-stripe: 8px;

  --border-radius-link: 2px;
  --border-radius-inline: 2px;
  --border-radius-input: 2px;
  --border-radius-button: 2px;
  --border-radius-card: 2px;
  --border-radius-panel: 2px;

  --outline-offset: 2px;

  --hover-on-inverse-opacity: 50%;

  /* EFFECTS */

  --hover-translate-distance: -3px;
  --anim-duration-short: 100ms;

  --shadow-none: 0 0 0 rgb(0 0 0 / 0%);
  --shadow-300: 0 2px 4px rgb(0 0 0 / 15%);
  /* --alpha-overlay */

  --logo-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 293.17 183'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:%23fff;%7D.b%7Bfill:%23007bb7;%7D.c%7Bfill:%23fc0;%7D.d%7Bfill:%231d1d1b;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Elogo-mini%3C/title%3E%3Cpolygon class='a' points='293.16 0 0 0 0 183 293.17 183 201.67 91.5 293.16 0'/%3E%3Cpolygon class='b' points='286.3 2.83 108.98 2.83 108.98 180.16 286.3 180.16 197.64 91.5 286.3 2.83'/%3E%3Crect class='c' x='2.83' y='2.83' width='106.15' height='177.32'/%3E%3Cpolygon class='a' points='120.11 149.78 108.98 97.96 97.85 149.78 68.53 149.78 39.61 33.16 70.39 33.16 82.82 86.98 94.57 33.16 123.39 33.16 135.15 86.98 147.58 33.16 178.36 33.16 149.43 149.78 120.11 149.78'/%3E%3Cpolygon class='d' points='149.83 36 135.07 99.91 121.11 36 96.85 36 82.9 99.91 68.13 36 43.23 36 70.75 146.95 95.56 146.95 108.98 84.47 122.4 146.95 147.21 146.95 174.74 36 149.83 36'/%3E%3C/svg%3E");

  /* === FONT STACK === */
  --f_stack: 'SL Gothic', sans-serif;
  --f_stack_icons: 'Icons', sans-serif;
  --f_weight-bold-label: 700;

  --input-height: 44px;

  /* Variables and variable resolution for container queries used with ViewGuard component */
  --is-small: false;
  --is-medium: false;
  --is-large: false;

  @media (min-width: 577px) {
    --is-small: true;
  }
  /* Smallest Tablet size and up */
  @media (min-width: 768px) {
    --is-medium: true;
  }
  /* Smallest Desktop size and up */
  @media (min-width: 1024px) {
    --is-large: true;
  }
}

.tokens-waab {
  /****  COLOR : BACKGROUND  ****/

  --color-background-primary: var(--color-neutral-100);
  --color-background-secondary: var(--color-neutral-200);
  --color-background-tertiary: var(--color-primary-100);
  --color-background-inverse: var(--color-accent-darkblue);
  --color-background-inverse-secondary: var(--color-neutral-800);

  --color-brand-primary: var(--color-primary-400);
  --color-brand-accent: var(--color-accent-yellow);

  /****  COLOR : TEXT  ****/

  --color-text-primary: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-600);
  --color-text-disabled: var(--color-neutral-500);
  --color-text-on-inverse: var(--color-neutral-100);

  --color-title-xxl: var(--color-neutral-900);
  --color-title-xl: var(--color-neutral-900);
  --color-title-l: var(--color-neutral-900);
  --color-title-m: var(--color-neutral-900);

  /****  COLOR : INTERACTION  ****/

  --color-interaction-cta: var(--color-primary-400);
  --color-interaction-cta-hover: var(--color-primary-500);
  --color-interaction-cta-focus: var(--color-primary-500);

  --color-interaction-link: var(--color-primary-500);

  --color-interaction-disabled-background: var(--color-neutral-200);
  --color-interaction-disabled-border: var(--color-neutral-300);

  /****  COLOR : FEEDBACK  ****/

  --color-feedback-error-primary: var(--color-error-400);
  --color-feedback-error-background: var(--color-error-100);
  --color-feedback-warning-primary: var(--color-warning-400);
  --color-feedback-warning-background: var(--color-warning-100);
  --color-feedback-highlight-primary: var(--color-highlight-400);
  --color-feedback-highlight-background: var(--color-highlight-100);
  --color-feedback-success-primary: var(--color-success-400);
  --color-feedback-success-background: var(--color-success-100);

  /****  BORDERS  ****/

  --border-color-default: var(--color-neutral-300);
  --border-color-tertiary: var(--color-primary-200);
  --border-color-input: var(--color-neutral-700);
  --border-color-stripe: var(--color-primary-400);

  --border-color-hover: var(--color-primary-200);
  --border-color-focus: var(--color-primary-500);

  /* Hover on inverse color is derived from --border-color-focus-on-inverse
   with opacity that is described in variable --hover-on-inverse-opacity */
  --border-color-focus-on-inverse: var(--color-neutral-100);

  /****  EFFECTS  ****/

  --shadow-nav-secondary: var(--shadow-300);
  --shadow-card: var(--shadow-300);
}