@import url("./fonts.css");

:host,
html[class*="-dark"] {
  --lo-color-brand-black: #000000;
  --lo-color-brand-white: #ffffff;
  --lo-color-brand-orange: #eb2814;
  --lo-color-brand-green: #00e2b0;

  --lo-color-primary-100: #121212;
  --lo-color-primary-7: #ffffff;

  --lo-color-secondary-15: #e6e6e6;
  --lo-color-secondary-30: #b3b3b3;
  --lo-color-secondary-70: #4d4d4d;
  --lo-color-secondary-90: #262626;
  --lo-color-secondary-95: #0d0d0d;

  --lo-color-body-text: #ffffff;
  --lo-color-link-text: #b69bd7;

  --lo-color-neutral-0: #ffffff;
  --lo-color-neutral-7: #f2f2f2;
  --lo-color-neutral-10: #e6e6e6;
  --lo-color-neutral-15: #d9d9d9;
  --lo-color-neutral-20: #cccccc;
  --lo-color-neutral-25: #bfbfbf;
  --lo-color-neutral-30: #b3b3b3;
  --lo-color-neutral-40: #999999;
  --lo-color-neutral-50: #808080;
  --lo-color-neutral-60: #666666;
  --lo-color-neutral-70: #4d4d4d;
  --lo-color-neutral-80: #333333;
  --lo-color-neutral-90: #1a1a1a;
  --lo-color-neutral-95: #0d0d0d;
  --lo-color-neutral-98: #030303;
  --lo-color-neutral-99: #010101;
  --lo-color-neutral-100: #000000;

  --lo-color-status-info-0: #ffffff;
  --lo-color-status-info-10: #a4eeff;
  --lo-color-status-info-20: #62d6ed;
  --lo-color-status-info-25: #52c8df;
  --lo-color-status-info-30: #41bad0;
  --lo-color-status-info-35: #2cacc2;
  --lo-color-status-info-40: #0c9fb5;
  --lo-color-status-info-50: #008396;
  --lo-color-status-info-60: #006877;
  --lo-color-status-info-70: #004e5a;
  --lo-color-status-info-80: #00363f;
  --lo-color-status-info-90: #001f25;
  --lo-color-status-info-95: #001418;
  --lo-color-status-info-98: #00090c;
  --lo-color-status-info-99: #000406;
  --lo-color-status-info-100: #000000;

  --lo-color-status-info: var(--lo-color-status-info-40);
  --lo-color-status-on-info: var(--lo-color-status-info-100);
  --lo-color-status-info-container: var(--lo-color-status-info-90);
  --lo-color-status-on-info-container: var(--lo-color-status-info-10);

  --lo-color-status-success-base: #197e00;

  --lo-color-status-success-0: #ffffff;
  --lo-color-status-success-10: #96fa78;
  --lo-color-status-success-20: #7add5f;
  --lo-color-status-success-25: #6dcf52;
  --lo-color-status-success-30: #60c046;
  --lo-color-status-success-35: #52b23a;
  --lo-color-status-success-40: #44a42d;
  --lo-color-status-success-50: #278911;
  --lo-color-status-success-60: #156e00;
  --lo-color-status-success-70: #0d5300;
  --lo-color-status-success-80: #073900;
  --lo-color-status-success-90: #032100;
  --lo-color-status-success-95: #011500;
  --lo-color-status-success-98: #000a00;
  --lo-color-status-success-99: #000500;
  --lo-color-status-success-100: #000000;

  --lo-color-status-success: var(--lo-color-status-success-50);
  --lo-color-status-on-success: var(--lo-color-status-success-100);
  --lo-color-status-success-container: var(--lo-color-status-success-98);
  --lo-color-status-on-success-container: var(--lo-color-status-success-10);

  --lo-color-status-warning-base: #e0520d;

  --lo-color-status-warning-0: #ffffff;
  --lo-color-status-warning-10: #ffdbcf;
  --lo-color-status-warning-20: #ffb59a;
  --lo-color-status-warning-25: #ffa17e;
  --lo-color-status-warning-30: #ff8c5f;
  --lo-color-status-warning-35: #ff743b;
  --lo-color-status-warning-40: #f5611f;
  --lo-color-status-warning-50: #d24900;
  --lo-color-status-warning-60: #a83900;
  --lo-color-status-warning-70: #802900;
  --lo-color-status-warning-80: #5b1b00;
  --lo-color-status-warning-90: #380d00;
  --lo-color-status-warning-95: #260700;
  --lo-color-status-warning-98: #150300;
  --lo-color-status-warning-99: #0d0100;
  --lo-color-status-warning-100: #000000;

  --lo-color-status-warning: var(--lo-color-status-warning-50);
  --lo-color-status-on-warning: var(--lo-color-status-warning-100);
  --lo-color-status-warning-container: var(--lo-color-status-warning-90);
  --lo-color-status-on-warning-container: var(--lo-color-status-warning-10);

  --lo-color-status-alert-base: #cb0026;

  --lo-color-status-alert-0: #ffffff;
  --lo-color-status-alert-10: #ffdad7;
  --lo-color-status-alert-20: #ffb3af;
  --lo-color-status-alert-25: #ff9f9b;
  --lo-color-status-alert-30: #ff8985;
  --lo-color-status-alert-35: #ff706e;
  --lo-color-status-alert-40: #ff5356;
  --lo-color-status-alert-50: #e72336;
  --lo-color-status-alert-60: #bf0023;
  --lo-color-status-alert-70: #930018;
  --lo-color-status-alert-80: #68000e;
  --lo-color-status-alert-90: #410006;
  --lo-color-status-alert-95: #2d0003;
  --lo-color-status-alert-98: #1a0001;
  --lo-color-status-alert-99: #100001;
  --lo-color-status-alert-100: #000000;

  --lo-color-status-alert: var(--lo-color-status-alert-50);
  --lo-color-status-on-alert: var(--lo-color-status-alert-100);
  --lo-color-status-alert-container: var(--lo-color-status-alert-90);
  --lo-color-status-on-alert-container: var(--lo-color-status-alert-10);

  --lo-color-highlight-1-lighter: #7e6f0f;
  --lo-color-highlight-1-default: #deec28;
  --lo-color-highlight-1-darker: #f1f79b;
  --lo-color-highlight-2-lighter: #009c29;
  --lo-color-highlight-2-default: #52d545;
  --lo-color-highlight-2-darker: #a0d99d;
  --lo-color-highlight-3-lighter: #005b37;
  --lo-color-highlight-3-default: #00e3b2;
  --lo-color-highlight-3-darker: #7debc8;
  --lo-color-highlight-4-lighter: #72068d;
  --lo-color-highlight-4-default: #b609a7;
  --lo-color-highlight-4-darker: #eabee3;
  --lo-color-highlight-5-lighter: #37138c;
  --lo-color-highlight-5-default: #4e2098;
  --lo-color-highlight-5-darker: #b69bd7;
  --lo-color-highlight-6-lighter: #910966;
  --lo-color-highlight-6-default: #e50a7c;
  --lo-color-highlight-6-darker: #f8bddb;

  --lo-color-data-1: #8b5cd6;
  --lo-color-data-2: #2be3bb;
  --lo-color-data-3: #d69b5c;
  --lo-color-data-4: #e268b0;
  --lo-color-data-5: #6877e2;
  --lo-color-data-6: #9cd63d;
  --lo-color-data-7: #ba68e2;
  --lo-color-data-8: #45c4dd;
  --lo-color-data-9: #cf8172;
  --lo-color-data-10: #db4cdb;
  --lo-color-data-11: #429de3;
  --lo-color-data-12: #e0c931;

  --lo-size-2x-small: 2px;
  --lo-size-x-small: 4px;
  --lo-size-small: 8px;
  --lo-size-medium: 16px;
  --lo-size-large: 24px;
  --lo-size-x-large: 32px;
  --lo-size-2x-large: 40px;
  --lo-size-3x-large: 48px;
  --lo-size-4x-large: 64px;

  --lo-border-radius-small: 0.1875rem;
  --lo-border-radius-medium: 0.25rem;
  --lo-border-radius-large: 0.5rem;
  --lo-border-radius-x-large: 1rem;

  --lo-border-radius-circle: 50%;
  --lo-border-radius-pill: 9999px;

  --lo-elevation-1: 0 1px 3px 1px rgba(77, 77, 77, 0.15),
    0 1px 2px 0px rgba(77, 77, 77, 0.3);
  --lo-elevation-2: 0 2px 6px 2px rgba(77, 77, 77, 0.15),
    0 1px 2px 0px rgba(77, 77, 77, 0.3);
  --lo-elevation-3: 0 4px 8px 3px rgba(77, 77, 77, 0.15),
    0 1px 3px 0px rgba(77, 77, 77, 0.3);
  --lo-elevation-4: 0 6px 10px 4px rgba(77, 77, 77, 0.15),
    0 2px 3px 0px rgba(77, 77, 77, 0.3);
  --lo-elevation-5: 0 8px 12px 6px rgba(77, 77, 77, 0.15),
    0 4px 4px 0px rgba(77, 77, 77, 0.3);

  --lo-spacing-3x-small: 0.125rem;
  --lo-spacing-2x-small: 0.25rem;
  --lo-spacing-x-small: 0.5rem;
  --lo-spacing-small: 0.75rem;
  --lo-spacing-medium: 1rem;
  --lo-spacing-large: 1.5rem;
  --lo-spacing-x-large: 2rem;
  --lo-spacing-2x-large: 2.5rem;
  --lo-spacing-3x-large: 3rem;
  --lo-spacing-4x-large: 4rem;
  --lo-spacing-5x-large: 4.5rem;

  --lo-transition-x-slow: 1000ms;
  --lo-transition-slow: 500ms;
  --lo-transition-medium: 250ms;
  --lo-transition-fast: 150ms;
  --lo-transition-x-fast: 50ms;

  --lo-font-sans: "GT-Eesti", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  --font-docs: var(--lo-font-sans);

  --lo-font-size-2x-small: 0.625rem;
  --lo-font-size-x-small: 0.75rem;
  --lo-font-size-small: 0.875rem;
  --lo-font-size-medium: 1rem;
  --lo-font-size-large: 1.125rem;
  --lo-font-size-x-large: 1.25rem;
  --lo-font-size-2x-large: 1.5rem;
  --lo-font-size-3x-large: 2.25rem;
  --lo-font-size-4x-large: 3rem;
  --lo-font-size-5x-large: 4.5rem;

  --lo-font-size-h1: 2.25rem;
  --lo-font-size-h2: 1.75rem;
  --lo-font-size-h3: 1.5rem;
  --lo-font-size-h4: 1.25rem;
  --lo-font-size-h5: 1.125rem;
  --lo-font-size-h6: 1rem;

  --lo-font-weight-light: 300;
  --lo-font-weight-normal: 400;
  --lo-font-weight-semibold: 500;
  --lo-font-weight-bold: 700;

  --lo-letter-spacing-denser: -0.03em;
  --lo-letter-spacing-dense: -0.015em;
  --lo-letter-spacing-normal: 0.3px;
  --lo-letter-spacing-loose: 0.075em;
  --lo-letter-spacing-looser: 0.15em;

  --lo-line-height-denser: 1;
  --lo-line-height-dense: 1.25;
  --lo-line-height-normal: 1.5;
  --lo-line-height-loose: 1.75;
  --lo-line-height-looser: 2;

  --lo-focus-ring-width: 0.25rem;
  --lo-focus-ring: inset 0 0 0 1px
      var(--lo-color-primary-40, var(--lo-color-primary-7)),
    0 0 var(--lo-focus-ring-width) 0
      var(--lo-color-primary-20, var(--lo-color-secondary-30));

  --lo-button-font-size-small: var(--lo-font-size-small);
  --lo-button-font-size-medium: var(--lo-font-size-medium);
  --lo-button-font-size-large: var(--lo-font-size-large);

  --lo-button-line-height-small: var(--lo-font-size-medium);
  --lo-button-line-height-medium: var(--lo-font-size-large);
  --lo-button-line-height-large: var(--lo-font-size-x-large);

  --lo-input-height-small: 1.5rem;
  --lo-input-height-medium: 2rem;
  --lo-input-height-large: 2.5rem;
  --lo-input-height-x-large: 3rem;
  --lo-input-height-2x-large: 4rem;

  --lo-input-background-color: var(--lo-color-primary-100);
  --lo-input-background-color-hover: var(--lo-input-background-color);
  --lo-input-background-color-focus: var(--lo-input-background-color);
  --lo-input-background-color-disabled: var(--lo-color-secondary-90);
  --lo-input-border-color: var(
    --lo-color-primary-20,
    var(--lo-color-primary-7)
  );
  --lo-input-border-color-hover: var(
    --lo-color-primary-20,
    var(--lo-color-primary-7)
  );
  --lo-input-border-color-focus: var(
    --lo-color-primary-40,
    var(--lo-color-body-text)
  );
  --lo-input-border-color-disabled: var(--lo-color-secondary-70);
  --lo-input-border-width: 1px;

  --lo-input-border-radius-small: var(--lo-border-radius-medium);
  --lo-input-border-radius-medium: var(--lo-border-radius-medium);
  --lo-input-border-radius-large: var(--lo-border-radius-medium);

  --lo-input-font-family: var(--lo-font-sans);
  --lo-input-font-weight: var(--lo-font-weight-normal);
  --lo-input-font-size-small: var(--lo-font-size-small);
  --lo-input-font-size-medium: var(--lo-font-size-medium);
  --lo-input-font-size-large: var(--lo-font-size-large);
  --lo-input-letter-spacing: var(--lo-letter-spacing-normal);

  --lo-input-color: var(--lo-color-primary-7);
  --lo-input-color-hover: var(--lo-color-primary-7);
  --lo-input-color-focus: var(--lo-color-primary-7);
  --lo-input-color-disabled: var(--lo-color-secondary-70);
  --lo-input-color-required: var(--lo-color-status-alert);
  --lo-input-icon-color: var(--lo-color-primary-7);
  --lo-input-icon-color-hover: var(--lo-color-secondary-15);
  --lo-input-icon-color-focus: var(--lo-color-secondary-15);
  --lo-input-placeholder-color: var(--lo-color-neutral-50);
  --lo-input-placeholder-color-disabled: var(--lo-color-secondary-30);
  --lo-input-spacing-small: calc(var(--lo-spacing-2x-small) * 1.5);
  --lo-input-spacing-medium: var(--lo-spacing-x-small);
  --lo-input-spacing-large: var(--lo-spacing-small);

  --lo-input-filled-background-color: var(--lo-color-secondary-90);
  --lo-input-filled-background-color-hover: var(--lo-color-secondary-90);
  --lo-input-filled-background-color-focus: var(--lo-color-secondary-90);
  --lo-input-filled-background-color-disabled: var(--lo-color-secondary-90);
  --lo-input-filled-color: var(--lo-color-primary-7);
  --lo-input-filled-color-hover: var(--lo-color-primary-7);
  --lo-input-filled-color-focus: var(--lo-color-primary-7);
  --lo-input-filled-color-disabled: var(--lo-color-primary-7);

  --lo-input-label-font-size-small: var(--lo-font-size-small);
  --lo-input-label-font-size-medium: var(--lo-font-size-medium);
  --lo-input-label-font-size-large: var(--lo-font-size-lar\ge);

  --lo-input-label-color: inherit;

  --lo-input-help-text-font-size-small: var(--lo-font-size-x-small);
  --lo-input-help-text-font-size-medium: var(--lo-font-size-small);
  --lo-input-help-text-font-size-large: var(--lo-font-size-medium);

  --lo-input-help-text-color: var(--lo-color-primary-7);

  --lo-input-error-color: var(--lo-color-status-alert);
  --lo-input-error-border-color: var(--lo-color-status-alert);
  --lo-error-focus-ring: inset 0 0 0 1px var(--lo-color-status-alert),
    0 0 var(--lo-focus-ring-width) 0 var(--lo-color-status-alert);

  --lo-input-success-color: var(--lo-color-status-success);
  --lo-input-success-border-color: var(--lo-color-status-success);
  --lo-success-focus-ring: inset 0 0 0 1px var(--lo-color-status-success),
    0 0 var(--lo-focus-ring-width) 0 var(--lo-color-status-success);

  --lo-toggle-size-small: 0.75rem;
  --lo-toggle-size-medium: 1rem;
  --lo-toggle-size-large: 1.25rem;
  --lo-switch-size: 1.5rem;

  --lo-overlay-background-color: hsl(0 0% 0% / 43%);

  --lo-panel-background-color: var(--lo-color-primary-100);
  --lo-panel-border-color: var(--lo-color-secondary-70);
  --lo-panel-border-width: 1px;

  --lo-tooltip-background-color: var(--lo-color-primary-100);
  --lo-tooltip-color: var(--lo-color-primary-7);
  --lo-tooltip-font-family: var(--lo-font-sans);
  --lo-tooltip-font-weight: var(--lo-font-weight-normal);
  --lo-tooltip-font-size: var(--lo-font-size-small);
  --lo-tooltip-line-height: var(--lo-line-height-normal);
  --lo-tooltip-padding: var(--lo-spacing-2x-small) var(--lo-spacing-x-small);
  --lo-tooltip-arrow-size: 4px;

  --lo-z-index-sidebar: 600;
  --lo-z-index-overlay: 650;
  --lo-z-index-header: 700;
  --lo-z-index-drawer: 750;
  --lo-z-index-dialog: 800;
  --lo-z-index-dropdown: 900;
  --lo-z-index-toast: 950;
  --lo-z-index-tooltip: 1000;
}