/* Inspired by https://github.com/lazaronixon/css-zero/blob/master/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css */

:root {
  --color-bg: light-dark(white, oklch(0.141 0.005 285.823));
  --color-surface: light-dark(rgba(255, 255, 255, 0.4), oklch(43.533% 0.01801 285.597 / 0.2));
  --color-text: light-dark(oklch(0.141 0.005 285.823), white);
  --color-text-reversed: light-dark(white, oklch(0.141 0.005 285.823));
  --color-text-subtle: light-dark(oklch(0.552 0.016 285.938), oklch(0.705 0.015 286.067));
  --color-link: light-dark(oklch(0.488 0.243 264.376), oklch(0.707 0.165 254.624));
  --color-border-light: light-dark(oklch(0.967 0.001 286.375), oklch(0.274 0.006 286.033));
  --color-border: light-dark(oklch(0.92 0.004 286.32), oklch(0.37 0.013 285.805));
  --color-border-dark: light-dark(oklch(0.705 0.015 286.067), oklch(0.442 0.017 285.786));
  --color-selected: light-dark(oklch(0.951 0.026 236.824), oklch(0.293 0.066 243.157));
  --color-selected-dark: light-dark(oklch(0.809 0.105 251.813), oklch(0.424 0.199 265.638));
  --color-highlight: light-dark(oklch(0.945 0.129 101.54), oklch(0.421 0.095 57.708));

  --color-primary: light-dark(oklch(49.109% 0.16151 143.383), oklch(49.109% 0.16151 143.383));
  --color-secondary: light-dark(oklch(0.967 0.001 286.375), oklch(0.274 0.006 286.033));
  --color-negative: light-dark(oklch(0.577 0.245 27.325), oklch(0.444 0.177 26.899));
  --color-positive: light-dark(oklch(0.627 0.194 149.214), oklch(0.448 0.119 151.328));

  --rounded-full:  9999px;
  --rounded: 1.5rem;
  --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --text-small: 0.875rem;
  --text-medium: 1rem;
  --font-medium: 500;
  --blur: 12px;
  --padding: 1rem;
  --gap: 1rem;
  --opacity-disabled: 0.5;
  --border-width: 1px;
}

* {
  border-color: var(--color-border);
  scrollbar-color: #C1C1C1 transparent;
  scrollbar-width: thin;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-synthesis-weight: none;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
}

.turbo-progress-bar {
  background-color: var(--color-primary);
}

::selection {
  background-color: var(--color-selected);
  color: var(--color-text);
}


@keyframes success {
  0%  { background-color: var(--color-border-dark); scale: 0.8; }
  20% { background-color: var(--color-border-dark); scale: 1; }
}

.btn--success {
  animation: success 1s ease-out;

  img {
    animation: zoom-fade 300ms ease-out;
  }
}