.preem-ds-structure {
  /*
          ## Core tokens ##
          PREFIX: core
          Raw values that should be same for all of Preem
          Sizes used for spacing etc.
          Font sizes / Line height
    */

  /* Spacing system */

  /*
      Name: Core spacing 01
      Usage: Add-on spacing, when design demands subtlety between smaller proportions
      Example: Button padding 16 x 12 (8+4)px
    */
  --core-spacing-01: 0.25rem;

  /*
      Name: Core spacing 02
      Usage: Folio to header, component padding
    */
  --core-spacing-02: 0.5rem;

  /*
      Name: Core spacing 03
      Usage: Component padding
    */
  --core-spacing-03: 1rem;

  /*
      Name: Core spacing 04
      Usage: Component padding
    */
  --core-spacing-04: 1.5rem;

  /*
      Name: Core spacing 05
      Usage: Stacking
    */
  --core-spacing-05: 2rem;

  /*
      Name: Core spacing 06
      Usage: Stacking
    */
  --core-spacing-06: 2.5rem;

  /*
      Name: Core spacing 07
      Usage: Usage: Section title to section content
    */
  --core-spacing-07: 3rem;

  /*
      Name: Core spacing 08
      Usage: Unknown
    */
  --core-spacing-08: 3.5rem;

  /*
      Name: Core spacing 09
      Usage: Section spacing (mobile, xs s screens)
    */
  --core-spacing-09: 4rem;

  /*
      Name: Core spacing 10
      Usage: Unknown
    */
  --core-spacing-10: 4.5rem;

  /*
      Name: Core spacing 11
      Usage: Unknown
    */
  --core-spacing-11: 5rem;

  /*
      Name: Core spacing 12
      Usage: Unknown
    */
  --core-spacing-12: 5.5rem;

  /*
      Name: Core spacing 13
      Usage: Usage: Section spacing (Desktop)
    */
  --core-spacing-13: 6rem;

  /** Header size **/
  --core-header-height: 6.25rem;

  /** Mobile inputfield height **/
  --core-search-input-field-height-mobile: 4rem;

  /* z-index layers */
  --core-layer-100: 10;
  --core-layer-200: 20;
  --core-layer-300: 30;
  --core-layer-400: 40;
  --core-layer-500: 50;
  --core-layer-600: 60;
  --core-layer-700: 70;
  --core-layer-800: 80;
  --core-layer-900: 90;

  /* Grid and widths */
  --core-max-content-container-width: 97.5rem;
  --core-max-content-width: 80rem;
  --core-max-width-plus-padded-sides: calc(
    var(--core-max-content-width) + (var(--core-spacing-05) * 2)
  );
  --core-sidebar-width: 26rem;
  --core-heading-max-width: 60rem;
  --core-text-max-width: 44rem;

  /* Form and icon size */
  --icon-size: 2.5rem;
  --form-height: 2.25rem;
  --form-icon-width: 2.25rem;
}

.preem-ds-theming {
  /**
      ## Core tokens ##
      PREFIX: core
      Raw values that should be same for all of Preem
      Sizes used for spacing etc.
      Font sizes / Line height
  
      Description:
        Global tokens are the primitive values in our design language, represented by context-agnostic names.
        Our color palette, animation, typography, and dimension values are all recorded as global tokens.
        These can be directly used, and are inherited by all other token types.
    **/

  /** Colors & Variables **/
  --neutral-00: #ffffff;
  --neutral-50: #f4f4f4;
  --neutral-100: #e7e7e7;
  --neutral-200: #cecccc;
  --neutral-300: #9c9899;
  --neutral-400: #6d6668;
  --neutral-500: #373234;
  --neutral-600: #241f21;
  --neutral-700: #121213;

  --neutral-00-75: rgba(255, 255, 255, 0.75);
  --neutral-600-40: rgba(36, 31, 33, 0.4);

  --green-050: #ebf7e5;
  --green-100: #c4db9f;
  --green-200: #92d26b;
  --green-300: #129738;
  --green-400: #006341;
  --green-500: #034d38;
  --green-600: #002e38;
  --green-700: #00232a;
  --green-800: #001618;

  --green-600-30: rgba(0, 46, 56, 0.3);
  --green-600-07: rgba(0, 46, 56, 0.07);
  --green-100-30: rgba(196, 219, 159, 0.3);

  --orange-50: #ffebc1;
  --orange-100: #ffd985;
  --orange-200: #ffc35e;
  --orange-300: #ffac3a;
  --orange-400: #ff922b;
  --orange-500: #ff7317;
  --orange-600: #f15200;

  --orange-300-10: rgba(255, 172, 58, 0.1);

  --sand-050: #fefaf5;
  --sand-100: #fcf5eb;
  --sand-200: #f5ebdc;
  --sand-300: #f0e6d2;

  --core-border-radius-small: 0.25rem;
  --core-border-radius-default: 0.5rem;
  --core-border-radius-medium: 1rem;
  --core-border-radius-round: 999rem;

  --core-error-color: #dd2233;
  --core-error-background: #fce9eb;

  /* Old colors */

  --black-1: #241f21;
  --black-1-80: rgba(36, 31, 33, 0.8);
  --black-1-40: rgba(36, 31, 33, 0.4);
  --black-1-30: rgba(36, 31, 33, 0.3);
  --black-1-07: rgba(36, 31, 33, 0.07);

  --core-box-shadow-hover: 0px 4px 20px 0px rgba(0, 46, 56, 0.25);
  --core-box-shadow: 0px 4px 16px 0px #00000026, 0px -2px 16px -8px #0000004d,
    0px -6px 27px -5px #32325d40;
}

.preem-ds-context {
  /**
    ## Alias tokens / context tokens ##
    PREFIX: ctx
    Potential variations for Preem.se / Preem.com / Mitt Preem / Min Station

    Description:
      Alias tokens relate to a specific context or abstraction.
      Aliases help communicate the intended purpose of a token, and are effective
      when a value with a single intent will appear in multiple places.
  **/

  /* Design system 2.0 Daniel version variables */

  /* Text variables */
  --ctx-text-default: var(--neutral-600);
  --ctx-text-default-inverted: var(--neutral-00);

  --ctx-text-title: var(--green-600);

  --ctx-text-secondary: var(--neutral-400);
  --ctx-text-secondary-inverted: var(--neutral-300);

  --ctx-text-on-brand: var(--green-600);

  --ctx-text-on-brand-secondary: var(--neutral-00);
  --ctx-text-on-brand-secondary-hover: var(--green-600);

  --ctx-text-disabled: var(--neutral-600-40);

  --ctx-text-error: var(--core-error-color);

  /* Background variables */
  --ctx-bg-default: var(--neutral-00);
  --ctx-bg-secondary: var(--sand-100);
  --ctx-bg-secondary-hover: var(--orange-100);

  --ctx-bg-brand: var(--orange-300);
  --ctx-bg-brand-hover: var(--orange-400);
  --ctx-bg-brand-down: var(--orange-500);

  --ctx-bg-brand-secondary: var(--green-600);
  --ctx-bg-brand-secondary-hover: var(--neutral-00);
  --ctx-bg-brand-secondary-down: var(--green-600);

  --ctx-bg-down: var(--sand-050);

  --ctx-bg-disabled: var(--neutral-100);

  --ctx-bg-error: var(--core-error-background);

  /* Border variables */
  --ctx-border-primary: var(--neutral-100);
  --ctx-border-secondary: var(--green-600);
  --ctx-border-focus: var(--green-600);
  --ctx-border-error: var(--core-error-color);

  /* Icon variables */
  --ctx-icon-primary: var(--green-600);
  --ctx-icon-primary-inverted: var(--neutral-00);

  --ctx-icon-brand: var(--green-400);
  --ctx-icon-brand-inverted: var(--green-200);

  --ctx-icon-disabled: var(--neutral-600-40);

  /* Link variables */
  --ctx-link-primary: var(--green-400);
  --ctx-link-secondary: var(--green-600);

  /* end of Design system 2.0 Daniel version variables */

  /* Start of old variables */

  /* Används i Gatsby-siten */
  --ctx-page-container-background: var(--neutral-00);
  --ctx-page-background: var(--neutral-00);

  /* End of används i Gatsby-siten */

  --ctx-selection-color: var(--green-100);
  --ctx-skeleton-loader-background: var(--sand-100);
  --ctx-skeleton-loader-highlights: var(--neutral-00);

  --ctx-card-border-radius: var(--core-border-radius-default);
  --ctx-box-shadow-hover: var(--core-box-shadow-hover);

  --ctx-divider-color: var(--green-600-07);

  --ctx-heading-color: var(--green-600);
  --ctx-heading-color-on-dark: var(--neutral-00);

  --ctx-link-indicator-color: var(--orange-400);
  --ctx-link-color: var(--green-400);
  --ctx-disabled-link-color: var(--black-1-30);
  --ctx-disabled-link-color-on-dark: var(--white-1-30);

  --ctx-icon-background-standard: var(--green-100);
  --ctx-icon-color-standard: var(--green-600);
  --ctx-icon-background-inverted: var(--green-600);
  --ctx-icon-color-inverted: var(--green-100);

  --ctx-modal-overlay-background: var(--black-1-80);

  --ctx-status-neutral: var(--green-600);
  --ctx-status-important: var(--orange-100);
}

.preem-ds-theming {
  --accent-fill-hover: var(--ctx-bg-brand-hover);
  --accent-fill-active: var(--ctx-bg-brand-down);
  --accent-fill-focus: var(--ctx-bg-brand-down);
  --accent-fill-rest: var(--ctx-bg-brand);
  --foreground-on-accent-rest: var(--ctx-text-on-brand);
}

.preem-ds-theming .header, .preem-ds-theming .footer {
  background-color: var(--ctx-bg-brand-secondary) !important;
  color: var(--ctx-text-on-brand-secondary) !important;
}

.preem-ds-theming footer a {
  color: var(--ctx-text-on-brand-secondary);
  text-decoration: underline;
}

.fieldWrapper {
  width: 600px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.preem-select {
    border: 1px solid #eee;
    padding: 0.35rem;
    border-radius: 0.25rem;
}