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

  /* Spacing system */
  --core-spacing-01: 0.25rem;
  --core-spacing-02: 0.5rem;
  --core-spacing-03: 1rem;
  --core-spacing-04: 1.5rem;
  --core-spacing-05: 2rem;
  --core-spacing-06: 2.5rem;
  --core-spacing-07: 3rem;
  --core-spacing-08: 3.5rem;
  --core-spacing-09: 4rem;
  --core-spacing-10: 4.5rem;
  --core-spacing-11: 5rem;
  --core-spacing-12: 5.5rem;
  --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
      VAROPreem brand colour palette.
    **/

  /* Neutral / Base */
  --neutral-00: #ffffff;            /* VAROPreem White */
  --neutral-50: #f2f2f2;            /* VAROPreem Grey */
  --neutral-100: #e7e7e7;
  --neutral-200: #cecccc;
  --neutral-300: #9c9899;
  --neutral-400: #6d6668;
  --neutral-500: #373234;
  --neutral-600: #1e0b38;           /* VAROPreem Navy */
  --neutral-700: #121213;

  --neutral-00-75: rgba(255, 255, 255, 0.75);
  --neutral-600-40: rgba(30, 11, 56, 0.4);

  /* Primary palette - VAROPreem */
  --varopreem-white: #ffffff;
  --varopreem-indigo: #012169;
  --varopreem-sky: #36bded;
  --varopreem-purple: #4f2984;
  --varopreem-rubine: #e50052;

  /* Secondary palette - VAROPreem */
  --varopreem-grey: #f2f2f2;
  --varopreem-green: #29a95a;
  --varopreem-forrest: #00664f;
  --varopreem-orange: #ed8b00;
  --varopreem-yellow: #efdf00;
  --varopreem-azure: #0072ce;
  --varopreem-cobalt: #003494;
  --varopreem-navy: #1e0b38;
  --varopreem-lilac: #9364d9;
  --varopreem-plum: #990078;

  /* Sky variations (interactive accent) */
  --sky-50: #e6f7fd;
  --sky-100: #b8e8f9;
  --sky-200: #8ad9f4;
  --sky-300: #5cc9f0;
  --sky-400: #36bded;            /* VAROPreem Sky */
  --sky-500: #1aa9dc;
  --sky-600: #0f8ebd;

  /* Indigo variations (brand) */
  --indigo-100: #cfd6e6;
  --indigo-300: #4f6ba0;
  --indigo-500: #012169;         /* VAROPreem Indigo */
  --indigo-600: #011a54;
  --indigo-700: #01133e;

  --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: #e50052;       /* VAROPreem Rubine */
  --core-error-background: #fde6ee;

  /* Old colors (kept for back-compat, mapped to VAROPreem Navy) */
  --black-1: #1e0b38;
  --black-1-80: rgba(30, 11, 56, 0.8);
  --black-1-40: rgba(30, 11, 56, 0.4);
  --black-1-30: rgba(30, 11, 56, 0.3);
  --black-1-07: rgba(30, 11, 56, 0.07);

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

  /* Typography */
  --core-font-family: "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
  --core-font-weight-regular: 400;
  --core-font-weight-medium: 600;
  --core-font-weight-semibold: 600;
  --core-font-weight-button: 600;
}

.preem-ds-context {
  /**
    ## Alias tokens / context tokens ##
    PREFIX: ctx
  **/

  /* Text variables */
  --ctx-text-default: var(--varopreem-navy);
  --ctx-text-default-inverted: var(--varopreem-white);

  --ctx-text-title: var(--varopreem-indigo);

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

  --ctx-text-on-brand: var(--varopreem-white);

  --ctx-text-on-brand-secondary: var(--varopreem-white);
  --ctx-text-on-brand-secondary-hover: var(--varopreem-sky);

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

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

  /* Background variables */
  --ctx-bg-default: var(--varopreem-white);
  --ctx-bg-secondary: var(--varopreem-grey);
  --ctx-bg-secondary-hover: var(--sky-100);

  /* Buttons / interactive accent -> Sky */
  --ctx-bg-brand: var(--sky-400);
  --ctx-bg-brand-hover: var(--sky-500);
  --ctx-bg-brand-down: var(--sky-600);

  /* Brand secondary -> Indigo (used by header/footer) */
  --ctx-bg-brand-secondary: var(--varopreem-indigo);
  --ctx-bg-brand-secondary-hover: var(--indigo-600);
  --ctx-bg-brand-secondary-down: var(--indigo-700);

  --ctx-bg-down: var(--neutral-50);

  --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(--varopreem-indigo);
  --ctx-border-focus: var(--varopreem-sky);
  --ctx-border-error: var(--core-error-color);

  /* Icon variables */
  --ctx-icon-primary: var(--varopreem-indigo);
  --ctx-icon-primary-inverted: var(--varopreem-white);

  --ctx-icon-brand: var(--varopreem-sky);
  --ctx-icon-brand-inverted: var(--sky-100);

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

  /* Link variables */
  --ctx-link-primary: var(--varopreem-azure);
  --ctx-link-secondary: var(--varopreem-indigo);

  /* Misc */
  --ctx-page-container-background: var(--varopreem-white);
  --ctx-page-background: var(--varopreem-white);

  --ctx-selection-color: var(--sky-100);
  --ctx-skeleton-loader-background: var(--varopreem-grey);
  --ctx-skeleton-loader-highlights: var(--varopreem-white);

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

  --ctx-divider-color: var(--varopreem-grey);

  --ctx-heading-color: var(--varopreem-indigo);
  --ctx-heading-color-on-dark: var(--varopreem-white);

  --ctx-link-indicator-color: var(--varopreem-sky);
  --ctx-link-color: var(--varopreem-azure);
  --ctx-disabled-link-color: var(--black-1-30);
  --ctx-disabled-link-color-on-dark: rgba(255, 255, 255, 0.3);

  --ctx-icon-background-standard: var(--sky-100);
  --ctx-icon-color-standard: var(--varopreem-indigo);
  --ctx-icon-background-inverted: var(--varopreem-indigo);
  --ctx-icon-color-inverted: var(--sky-100);

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

  --ctx-status-neutral: var(--varopreem-indigo);
  --ctx-status-important: var(--varopreem-orange);
}

.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);

  font-family: var(--core-font-family);
  font-weight: var(--core-font-weight-regular);
}

.preem-ds-theming h1,
.preem-ds-theming h2,
.preem-ds-theming h3,
.preem-ds-theming h4,
.preem-ds-theming h5,
.preem-ds-theming h6 {
  font-weight: var(--core-font-weight-semibold);
}

.preem-ds-theming button,
.preem-ds-theming .btn {
  font-weight: var(--core-font-weight-button);
}

.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;
}