.theme-sl {
  --page-max-width: 1176px;
  --gutter-s: 12px;
  --gutter-l: 24px;

  /* 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: #f1f2f3;
  --color-neutral-300: #d8dadc;
  --color-neutral-400: #c0c2c6;
  --color-neutral-500: #73777d;
  --color-neutral-600: #4c5157;
  --color-neutral-700: #20252c;
  --color-neutral-800: #12151a;
  --color-neutral-900: #000000;

  --color-primary-100: #ecf6fe;
  --color-primary-200: #afdff9;
  --color-primary-300: #7ab4ff;
  --color-primary-400: #2870f0;
  --color-primary-500: #0a47c2;

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

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

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

  --color-success-100: #e2f3eb;
  --color-success-300: #1d9f64;
  --color-success-400: #197e50;

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

  /* BORDERS */

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

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

  --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, 61, 48'%3E%3Cpath d='M30.3 41.703a23.845 23.845 0 0 0 16.972-7.03 23.845 23.845 0 0 0 7.03-16.972v-.493h-2.815v.493c0 5.66-2.204 10.98-6.205 14.982A21.049 21.049 0 0 1 30.3 38.888c-5.66 0-10.98-2.203-14.982-6.205A21.048 21.048 0 0 1 9.113 17.7v-.493H6.298v.493a23.844 23.844 0 0 0 7.03 16.972 23.845 23.845 0 0 0 16.972 7.03zm0-38.888c8.208 0 14.886 6.678 14.886 14.886 0 8.209-6.678 14.887-14.886 14.887-8.208 0-14.887-6.678-14.887-14.887 0-8.208 6.679-14.886 14.887-14.886zm0 32.588c4.728 0 9.173-1.842 12.517-5.185A17.586 17.586 0 0 0 48 17.701c0-4.728-1.84-9.173-5.184-12.516A17.586 17.586 0 0 0 30.3 0a17.586 17.586 0 0 0-12.517 5.185A17.586 17.586 0 0 0 12.6 17.7c0 4.729 1.84 9.174 5.184 12.517A17.586 17.586 0 0 0 30.3 35.403zm27.485-18.195v.493c0 7.342-2.859 14.244-8.05 19.435-5.191 5.191-12.094 8.05-19.435 8.05-7.341 0-14.244-2.859-19.435-8.05-5.191-5.191-8.05-12.093-8.05-19.435v-.493H0v.493c0 4.09.801 8.058 2.382 11.795a30.197 30.197 0 0 0 6.493 9.63A30.2 30.2 0 0 0 30.3 48.002a30.2 30.2 0 0 0 21.425-8.875 30.199 30.199 0 0 0 6.493-9.63A30.113 30.113 0 0 0 60.6 17.7v-.493h-2.815zm-17.02 4.213H35.53v-11.22h-3.032v13.926h8.267v-2.706zm-15.191.247c-2.36 0-3.993-1.543-3.993-1.543l-1.686 2.074s2.178 2.12 5.621 2.12c3.07 0 5.055-1.686 5.055-4.294 0-2.732-2.168-3.636-4.511-4.205-2.718-.65-2.85-1.101-2.85-1.843 0-.812.686-1.316 1.791-1.316 1.732 0 3.085 1.013 3.085 1.013l1.707-2.104s-1.748-1.558-4.754-1.558c-2.837 0-4.744 1.678-4.744 4.175 0 2.64 1.71 3.57 4.664 4.284 2.696.623 2.696 1.162 2.696 1.785 0 .87-.798 1.412-2.081 1.412z' fill='white' fill-rule='evenodd'%3E%3C/path%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;
}

.tokens-sl {
  /****  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-neutral-700);
  --color-background-inverse-secondary: var(--color-neutral-800);

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

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