@use 'styles/mixins' as *;
@use 'styles/tokens' as *;

$easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);

:root {
  --border: var(--border--width) solid var(--border--color);
  --border--color: #{$border-color};
  --border--color--light: #{$border-color-light};
  --border--radius: #{$border-radius};
  --border--width: #{$border-width};

  --box-shadow: 0 0 var(--box-shadow--blur) var(--box-shadow--spread) var(--box-shadow--color);
  --box-shadow--blur: 8px;
  --box-shadow--color: rgba(0, 0, 0, 0.15);
  --box-shadow--color--inverse: rgba(255, 255, 255, 0.85);
  --box-shadow--color--raised: rgba(34, 34, 34, 0.8);
  --box-shadow--spread: 1px;
  --box-shadow--null: 0 0 var(--box-shadow--blur) var(--box-shadow--spread) transparent;
  --box-shadow--error: 0 0 var(--box-shadow--blur) var(--box-shadow--spread) var(--color--error);
  --box-shadow--raised: inset -2px -2px 2px -1px var(--box-shadow--color--raised);
  --box-shadow--raised--subtle: inset -1px -1px 1px 0 var(--box-shadow--color--raised);

  --color--white: #ffffff;
  --color--blue: #{$color-blue};
  --color--blue--light: #{$color-blue-light};
  --color--green: #{$color-green};
  --color--green--light: #{$color-green-light};
  --color--red: #{$color-red};
  --color--red--light: #{$color-red-light};
  --color--violet: #{$color-violet};
  --color--violet--light: #{$color-violet-light};
  --color--yellow: #{$color-yellow};
  --color--yellow--light: #{$color-yellow-light};

  --color--focus: #{rgba(#268fff, 0.5)};
  --color--inactive: #{$color-inactive};
  --color--background: #{$color-background};
  --color--background--element: var(--color--white);
  --color--background--overlay: rgba(255, 255, 255, 0.65);
  --color--foreground: #{$color-foreground};
  --color--foreground--secondary: #{$color-foreground-secondary};
  --color--mark: #ffff00;
  --color--error: hsl(0, 92%, 62%);
  --color--error--opposite: var(--color--white);
  --color--info: #1868ad;
  --color--success: #00a900;
  --color--warning: hsl(35, 90%, 60%);
  --color--primary: var(--color--violet);
  --color--primary--light: var(--color--violet--light);
  --color--primary--opposite: var(--color--white);

  --color--bonus--character--1: var(--color--yellow--light);
  --color--bonus--character--2: var(--color--green--light);
  --color--bonus--character--3: var(--color--blue--light);
  --color--bonus--character--5: var(--color--red--light);
  --color--bonus--character-multiplier--2: #{$color-bonus-character-multiplier-2};
  --color--bonus--character-multiplier--3: #{$color-bonus-character-multiplier-3};
  --color--bonus--character-multiplier--4: #{$color-bonus-character-multiplier-4};
  --color--bonus--start: var(--color--violet--light);
  --color--bonus--word-multiplier--2: #{$color-bonus-word-multiplier-2};
  --color--bonus--word-multiplier--3: #{$color-bonus-word-multiplier-3};
  --color--bonus--word-multiplier--4: #{$color-bonus-word-multiplier-4};
  --color--tooltip--background: #{$color-foreground-secondary};
  --color--tooltip--foreground: var(--color--white);

  --font--family: system-ui, sans-serif;
  --font--family--monospace:
    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --font--size--h1: 30px;
  --font--size--h2: 22px;
  --font--size--h3: 18px;
  --font--size--m: 16px;

  --line-height: 1.5;

  --opacity--disabled: 0.3;

  --spacing--xs: #{$spacing-xs};
  --spacing--s: #{$spacing-s};
  --spacing--m: #{$spacing-m};
  --spacing--l: #{$spacing-l};
  --spacing--xl: #{$spacing-xl};
  --spacing--xxl: #{$spacing-xxl};

  --scrollbar--size: 5px;
  --scrollbar--thumb--color: var(--border--color);
  --scrollbar--thumb--color--highlight: var(--color--foreground--secondary);
  --scrollbar--track--color: transparent;

  --transition: all var(--transition--duration) var(--transition--easing);
  --transition--long: all var(--transition--duration--long) var(--transition--easing);
  --transition--duration: #{$transition-duration};
  --transition--duration--long: #{$transition-duration-long};
  --transition--easing: #{$easeOutSine};

  --z-index--focus-effect: 1;
  --z-index--actions: 2;
  --z-index--modal: 100;
  --z-index--close-button: 101;
  --z-index--tooltip: 102;

  --button--icon--size: #{$button-icon-size};
  --dictionary--height: #{$dictionary-height};
  --dictionary--height--mobile: #{$dictionary-height-mobile};
  --key--height: 36px;
  --key--icon--size: 16px;
  --logo--height: #{$logo-height};
  --modal--width: #{$modal-width};
  --nav--height: calc(var(--logo--height) + var(--nav--padding));
  --nav--padding: var(--spacing--l);
  --results--icon--size: 18px;
  --results--item--height: #{$results-item-height};
  --solver-column--width: #{$solver-column-width};
  --square-button--size: 32px;
  --text-input--height: #{$text-input-height};
  --tooltip--max-width: 500px;

  @include media('<l') {
    --dictionary--height: var(--dictionary--height--mobile);
    --logo--height: #{$logo-height-small};
  }

  @include media('<s') {
    --box-shadow--blur: 5px;
    --modal--width: 100%;
  }

  @include media('<xs') {
    --box-shadow--blur: 3px;
  }
}