/*
Тут заполняются всякие примитивы дизайна и CSS переменные.
*/

/* #region CSS Reset */
/* Adapted from
  https://www.joshwcomeau.com/css/custom-css-reset/
  https://piccalil.li/blog/a-more-modern-css-reset/
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

*:not(dialog) {
  margin: 0;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  line-height: 1.5;
}

textarea:where(:not([rows])) {
  min-height: 10em;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

button:not(.button) {
  line-height: inherit;
}

:is(ul, ol)[role='list'] {
  list-style: none;
}

p, h1, h2, h3, h4 {
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

h1, h2, h3, h4 {
  text-wrap: balance;
  font-weight: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, .button, input[type="file"]::file-selector-button, input, label {
  line-height: 1.1;
}

/* #endregion CSS Reset */

/* Base styles */
:root {
    /*
    https://github.com/tailwindlabs/tailwindcss/blob/90f8ff41c8e2a4d17bc76921e23e9d672123da76/packages/tailwindcss/theme.css

    MIT License

    Copyright (c) Tailwind Labs, Inc.

    Permission is hereby granted, free of charge, to any person obtaining a copy
    of this software and associated documentation files (the "Software"), to deal
    in the Software without restriction, including without limitation the rights
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the Software is
    furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all
    copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.

    */
  --font-sans:
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;

  --color-sky-50: oklch(97.7% 0.013 236.62);
  --color-sky-100: oklch(95.1% 0.026 236.824);
  --color-sky-200: oklch(90.1% 0.058 230.902);
  --color-sky-300: oklch(82.8% 0.111 230.318);
  --color-sky-400: oklch(74.6% 0.16 232.661);
  --color-sky-500: oklch(68.5% 0.169 237.323);
  /* color-sky-600 was changed to pass WCAG on white background */
  --color-sky-600: oklch(55% 0.158 241.966);
  --color-sky-700: oklch(50% 0.134 242.749);
  --color-sky-800: oklch(44.3% 0.11 240.79);
  --color-sky-900: oklch(39.1% 0.09 240.876);
  --color-sky-950: oklch(29.3% 0.066 243.157);

  --color-rose-50: oklch(96.9% 0.015 12.422);
  --color-rose-100: oklch(94.1% 0.03 12.58);
  --color-rose-200: oklch(89.2% 0.058 10.001);
  --color-rose-300: oklch(81% 0.117 11.638);
  --color-rose-400: oklch(71.2% 0.194 13.428);
  --color-rose-500: oklch(64.5% 0.246 16.439);
  --color-rose-600: oklch(58.6% 0.253 17.585);
  --color-rose-700: oklch(51.4% 0.222 16.935);
  --color-rose-800: oklch(45.5% 0.188 13.697);
  --color-rose-900: oklch(41% 0.159 10.272);
  --color-rose-950: oklch(27.1% 0.105 12.094);

  --color-green-50: oklch(98.2% 0.018 155.826);
  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-300: oklch(87.1% 0.15 154.449);
  --color-green-400: oklch(79.2% 0.209 151.711);
  --color-green-500: oklch(72.3% 0.219 149.579);
  --color-green-600: oklch(62.7% 0.194 149.214);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-green-800: oklch(44.8% 0.119 151.328);
  --color-green-900: oklch(39.3% 0.095 152.535);
  --color-green-950: oklch(26.6% 0.065 152.934);

  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-100: oklch(96.2% 0.059 95.617);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-300: oklch(87.9% 0.169 91.605);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-600: oklch(66.6% 0.179 58.318);
  --color-amber-700: oklch(55.5% 0.163 48.998);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-amber-900: oklch(41.4% 0.112 45.904);
  --color-amber-950: oklch(27.9% 0.077 45.635);

  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-gray-950: oklch(13% 0.028 261.692);

  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-md-darker: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.15);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;
  --text-9xl: 8rem;

  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --space-1: 0.25rem;
  --space-1-5: 0.33rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;
  --space-9: 8rem;
  --space-10: 13rem;
  --space-11: 21rem;
  --space-12: 34rem;

  --corner-radius: var(--space-1-5);
}

/* some nice boilerplate */

[data-primary-color="sky"] {
  --color-primary-50: var(--color-sky-50);
  --color-primary-100: var(--color-sky-100);
  --color-primary-200: var(--color-sky-200);
  --color-primary-300: var(--color-sky-300);
  --color-primary-400: var(--color-sky-400);
  --color-primary-500: var(--color-sky-500);
  --color-primary-600: var(--color-sky-600);
  --color-primary-700: var(--color-sky-700);
  --color-primary-800: var(--color-sky-800);
  --color-primary-900: var(--color-sky-900);
  --color-primary-950: var(--color-sky-950);
}

[data-primary-color="rose"] {
  --color-primary-50: var(--color-rose-50);
  --color-primary-100: var(--color-rose-100);
  --color-primary-200: var(--color-rose-200);
  --color-primary-300: var(--color-rose-300);
  --color-primary-400: var(--color-rose-400);
  --color-primary-500: var(--color-rose-500);
  --color-primary-600: var(--color-rose-600);
  --color-primary-700: var(--color-rose-700);
  --color-primary-800: var(--color-rose-800);
  --color-primary-900: var(--color-rose-900);
  --color-primary-950: var(--color-rose-950);
}

[data-primary-color="green"] {
  --color-primary-50: var(--color-green-50);
  --color-primary-100: var(--color-green-100);
  --color-primary-200: var(--color-green-200);
  --color-primary-300: var(--color-green-300);
  --color-primary-400: var(--color-green-400);
  --color-primary-500: var(--color-green-500);
  --color-primary-600: var(--color-green-600);
  --color-primary-700: var(--color-green-700);
  --color-primary-800: var(--color-green-800);
  --color-primary-900: var(--color-green-900);
  --color-primary-950: var(--color-green-950);
}

[data-primary-color="amber"] {
  --color-primary-50: var(--color-amber-50);
  --color-primary-100: var(--color-amber-100);
  --color-primary-200: var(--color-amber-200);
  --color-primary-300: var(--color-amber-300);
  --color-primary-400: var(--color-amber-400);
  --color-primary-500: var(--color-amber-500);
  --color-primary-600: var(--color-amber-600);
  --color-primary-700: var(--color-amber-700);
  --color-primary-800: var(--color-amber-800);
  --color-primary-900: var(--color-amber-900);
  --color-primary-950: var(--color-amber-950);
}


textarea,
kbd,
code,
pre,
.monospace {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

body {
  font-family: var(--font-sans);
  color: var(--color-gray-950);
  container: body / inline-size;
}

/* https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html */
.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

button {
  border: none;
}

.button:where(:not(.button-inline)) {
  display: block;
}

.button, input[type="file"]::file-selector-button {
  --button-bg: var(--color-primary-600);
  --button-color: var(--color-primary-50);
  --button-color-dim: var(--color-primary-200);

  border: none;
  border-radius: var(--corner-radius);
  cursor: pointer;
  background: var(--button-bg);
  color: var(--button-color);
  accent-color: black;

  font-size: var(--text-base);
  text-align: center;
  padding: var(--space-2) var(--space-3);
  width: fit-content;
}

.button:hover, input[type="file"]::file-selector-button:hover {
  background: var(--button-bg-hover, var(--color-primary-800));
}

.button.button-tight, input[type="file"].button-tight::file-selector-button {
    font-size: inherit;
    padding: var(--space-1) var(--space-1-5);
  }

.button.button-sm, input[type="file"].button-sm::file-selector-button {
  font-size: var(--text-sm);
  padding: var(--space-1-5) var(--space-2);
}

.button.button-xl, input[type="file"].button-xl::file-selector-button {
  font-size: var(--text-xl);
  padding: var(--space-2) var(--space-5);
}

.button.button-2xl, input[type="file"].button-2xl::file-selector-button {
  font-size: var(--text-2xl);
  padding: var(--space-3) var(--space-7);
}

.button-alt {
  accent-color: unset;
  --button-bg: var(--color-gray-800);
  --button-bg-hover: var(--color-gray-600);
  --button-color: var(--color-gray-100);
  --button-color-dim: var(--color-gray-400);
}

.button-secondary {
  &:not(:focus-visible) {
    outline: 1px solid var(--color-primary-500);
  }

  --button-bg: var(--color-primary-200);
  --button-bg-hover: var(--color-primary-300);
  --button-color: var(--color-primary-900);
  --button-color-dim: var(--color-primary-600);
}

:is(.button, input[type="file"]::file-selector-button):disabled {
  filter: saturate(50%) brightness(75%);
  cursor: unset;
  --button-bg-hover: var(--button-bg);
}

a:not(.button) {
  color: var(--color-primary-700);
  &.alt-link {
    color: var(--color-gray-950);
  }

  &:hover {
    color: var(--color-primary-950);
    &.alt-link {
      color: var(--color-gray-600);
    }
  }
}

.unstyle-button {
  border: none;
  background: none;
  padding: 0;
  &:not(:disabled) {
    cursor: pointer;
  }
}

a.button {
  text-decoration: none;
}