@import 'styles/mixins';

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

:root {
  --border: var(--border--width) solid var(--border--color);
  --border--color: #cdcdcd;
  --border--color--light: #d9d9d9;
  --border--radius: 5px;
  --border--width: 1px;

  --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: #c7d8f9;
  --color--blue--light: #dde4f6;
  --color--green: #bae3ba;
  --color--green--light: #d6ebd6;
  --color--red: #f7c2aa;
  --color--red--light: #fbe0d4;
  --color--violet: #78387f;
  --color--violet--light: #b284b8;
  --color--yellow: #efe3ae;
  --color--yellow--light: #f7f1d6;

  --color--focus: #{rgba(#268fff, 0.5)};
  --color--inactive: #cdcdcd;
  --color--background: #f4f4f4;
  --color--background--element: var(--color--white);
  --color--background--overlay: rgba(255, 255, 255, 0.65);
  --color--foreground: #222;
  --color--foreground--secondary: #444;
  --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: #b8d5ed;
  --color--bonus--character-multiplier--3: #86aed1;
  --color--bonus--start: var(--color--violet--light);
  --color--bonus--word-multiplier--2: #fbc997;
  --color--bonus--word-multiplier--3: #f19393;
  --color--tooltip--background: #444;
  --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: 2px;
  --spacing--s: 5px;
  --spacing--m: 10px;
  --spacing--l: 20px;
  --spacing--xl: 40px;
  --spacing--xxl: 80px;

  --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: 100ms;
  --transition--duration--long: 250ms;
  --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: 24px;
  --dictionary--height: 260px;
  --dictionary--height--mobile: 110px;
  --key--height: 36px;
  --key--icon--size: 16px;
  --logo--height: 60px;
  --modal--width: 370px;
  --nav--height: calc(var(--logo--height) + var(--nav--padding));
  --nav--padding: var(--spacing--l);
  --results--icon--size: 18px;
  --results--item--height: 40px;
  --solver-column--width: 580px;
  --square-button--size: 32px;
  --text-input--height: 40px;
  --tooltip--max-width: 500px;

  @include media('<l') {
    --dictionary--height: var(--dictionary--height--mobile);
    --logo--height: 48px;
  }

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

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