/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
@import 'tailwindcss';

@theme {
  --container-ipad: 36rem;
  --breakpoint-ipad: 36rem;

  --blur-2xs: 2px;
}

@layer base {
  html {
    /* font-size: clamp(14px, 0.9375rem + 0.2vw, 16px); */
    font-size: 0.9375rem;
    /* font-size: 93.75%; 16px * 0.9375 = 15px */
  }

  select,
  ::picker(select) {
    appearance: base-select;
  }
}

/* @theme inline {
  --text-base: var(--text-sm);
  --text-base--line-height: var(--text-sm--line-height);

  --text-sm: 0.75rem;
  --text-sm--line-height: calc(1 / 0.75);
  --text-base: var(--text-sm);
  --text-base--line-height: var(--text-sm--line-height);
} */

@theme inline {
  --canvas-bg: var(--color-white);
  --mask: rgba(255, 255, 255, 0.5);
  --secondary-bg: var(--color-white);
  --label: var(--color-black);
  --secondary-label: var(--color-gray-500);
  --tertiary-label: var(--color-gray-400);
  --quaternary-label: var(--color-gray-300);
  --emphasis-color: var(--color-white);
  --tint: var(--color-blue-500);
  --secondary-tint: var(--color-blue-400);
  --tertiary-tint: var(--color-blue-300);
  --quaternary-tint: var(--color-blue-200);
  --placeholder-label: var(--color-gray-400);
  --separator: var(--color-neutral-300);
}

:root {
  view-transition-name: root;

  @variant dark {
    --canvas-bg: var(--color-black);
    --mask: rgba(0, 0, 0, 0.5);
    --secondary-bg: var(--color-neutral-950);
    --label: var(--color-white);
    --secondary-label: var(--color-gray-500);
    --tertiary-label: var(--color-gray-600);
    --quaternary-label: var(--color-gray-700);
    --emphasis-color: var(--color-white);
    --tint: var(--color-blue-400);
    --secondary-tint: var(--color-blue-500);
    --tertiary-tint: var(--color-blue-600);
    --quaternary-tint: var(--color-blue-700);
    --placeholder-label: var(--color-gray-600);
    --separator: var(--color-neutral-700);
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

::view-transition-group(root) {
  animation-duration: 0.5s;
}

html,
body {
  overflow-x: clip;

  /* background-color: var(--canvas-bg);
  color: var(--label); */
}