@use 'sass:math';
@use 'mixins/breakpoints' as *;

:root {
  // ─── Letter spacing ───
  --tracking-tight: -.025em;
  --tracking-wide: .025em;
  --tracking-wider: .05em;
  --tracking-widest: .1em;

  // ─── Animation & transitions ───
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --animate-spin: spin 1s linear infinite;
  --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);

  // ─── Layout ───
  --aspect-video: 16 / 9;

  // ─── Project-specific ───
  --chips-height: 32px;
  --chips-height-small: 24px;
  --chips-height-micro: 24px;
  --transition: var(--default-transition-duration) var(--default-transition-timing-function);
  --header-height: 64px;
  --control-min-width: 126px;
  --container-padding-inline: 8px;
  --aside-videos-aspect-ratio: 403/593;
  --popup-padding-bottom-mobile: 32px;
  --card-round-size: 80px;

  @include from-br(xs) {
    --container-padding-inline: 16px;
  }

  @include from-br(sm) {
    --container-padding-inline: 24px;
    --chips-height: 32px;
    --chips-height-small: 28px;
    --header-height: 71px;
    --control-min-width: 296px;
    --max-width-container: 1600px;
    --card-round-size: 96px;
  }
}