@import 'tailwindcss';
@import 'tailwindcss-safe-area';

@plugin "@tailwindcss/typography";
@plugin '@egoist/tailwindcss-icons';
@plugin "tailwind-scrollbar";
@plugin 'tailwindcss-animate';

@import '@pastel-palette/tailwindcss/dist/theme-oklch.css';

@custom-variant dark (&:where([data-color-mode='dark'], [data-color-mode='dark'] *));

[data-color-mode='light'] {
  --radius: 0.5rem;
  --border: 20 5.9% 90%;
}

[data-color-mode='dark'] {
  --radius: 0.5rem;
  --border: 0 0% 22.1%;
}

[data-hand-cursor='true'] {
  --cursor-button: pointer;
  --cursor-select: text;
  --cursor-checkbox: pointer;
  --cursor-link: pointer;
  --cursor-menu: pointer;
  --cursor-radio: pointer;
  --cursor-switch: pointer;
  --cursor-card: pointer;
}

:root {
  --cursor-button: default;
  --cursor-select: text;
  --cursor-checkbox: default;
  --cursor-link: pointer;
  --cursor-menu: default;
  --cursor-radio: default;
  --cursor-switch: default;
  --cursor-card: default;
}

:root,
body {
  @apply text-text;
  @apply font-sans;
  @apply text-base leading-normal;
  @apply antialiased;
  @apply selection:bg-accent selection:text-white;
}

html {
  /* make app like native app in mobile */
  -webkit-tap-highlight-color: transparent;
  /*  for firefox */
  scrollbar-width: thin;
}
/* Theme configuration */
@theme {
  /* Container */
  --container-padding: 2rem;
  --container-max-width-2xl: 1400px;

  /* Custom cursors */
  --cursor-button: var(--cursor-button);
  --cursor-select: var(--cursor-select);
  --cursor-checkbox: var(--cursor-checkbox);
  --cursor-link: var(--cursor-link);
  --cursor-menu: var(--cursor-menu);
  --cursor-radio: var(--cursor-radio);
  --cursor-switch: var(--cursor-switch);
  --cursor-card: var(--cursor-card);

  /* Blur */
  --blur-background: 70px;

  /* Shadow */
  --shadow-context-menu:
    0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0px 1.5px rgba(0, 0, 0, 0.04),
    0px 7px 22px rgba(0, 0, 0, 0.08);

  /* Font */
  --text-large-title: 1.625rem;
  --text-large-title--line-height: 2rem;

  --text-title1: 1.375rem;
  --text-title1--line-height: 1.625rem;

  --text-title2: 1.0625rem;
  --text-title2--line-height: 1.375rem;

  --text-title3: 0.9375rem;
  --text-title3--line-height: 1.25rem;

  --text-headline: 0.8125rem;
  --text-headline--line-height: 1rem;

  --text-body: 0.8125rem;
  --text-body--line-height: 1rem;

  --text-callout: 0.75rem;
  --text-callout--line-height: 0.9375rem;

  --text-subheadline: 0.6875rem;
  --text-subheadline--line-height: 0.875rem;

  --text-footnote: 0.625rem;
  --text-footnote--line-height: 0.8125rem;

  --text-caption: 0.625rem;
  --text-caption--line-height: 0.8125rem;

  /* Font families */
  --font-sans:
    'Geist Sans', PingFang SC, Microsoft YaHei, system-ui, sans-serif;
  --font-serif:
    'Noto Serif CJK SC', 'Noto Serif SC', var(--font-serif),
    'Source Han Serif SC', 'Source Han Serif', source-han-serif-sc, SongTi SC,
    SimSum, 'Hiragino Sans GB', system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
  --font-mono:
    'OperatorMonoSSmLig Nerd Font', 'Cascadia Code PL',
    'FantasqueSansMono Nerd Font', 'operator mono', JetBrainsMono,
    'Fira code Retina', 'Fira code', Consolas, Monaco, 'Hannotate SC',
    monospace, -apple-system;

  /* Custom screens */
  --screen-light-mode: (prefers-color-scheme: light);
  --screen-dark-mode: (prefers-color-scheme: dark);

  /* Width and max-width */
  --width-screen: 100vw;
  --max-width-screen: 100vw;

  /* Height and max-height */
  --height-screen: 100vh;
  --max-height-screen: 100vh;

  --color-primary: var(--color-accent);
  --color-primary-light: var(--color-accent-light);
  --color-primary-dark: var(--color-accent-dark);

  --color-accent-10: color-mix(
    in srgb,
    var(--color-accent) 10%,
    var(--color-background)
  );
  --color-accent-20: color-mix(
    in srgb,
    var(--color-accent) 20%,
    var(--color-background)
  );
  --color-accent-30: color-mix(
    in srgb,
    var(--color-accent) 30%,
    var(--color-background)
  );
  --color-accent-40: color-mix(
    in srgb,
    var(--color-accent) 40%,
    var(--color-background)
  );
  --color-accent-50: color-mix(
    in srgb,
    var(--color-accent) 50%,
    var(--color-background)
  );
  --color-accent-60: color-mix(
    in srgb,
    var(--color-accent) 60%,
    var(--color-background)
  );
  --color-accent-70: color-mix(
    in srgb,
    var(--color-accent) 70%,
    var(--color-background)
  );
  --color-accent-80: color-mix(
    in srgb,
    var(--color-accent) 80%,
    var(--color-background)
  );

  /* Box shadow */
  --box-shadow-context-menu:
    rgba(0, 0, 0, 0.067) 0px 3px 8px, rgba(0, 0, 0, 0.067) 0px 2px 5px,
    rgba(0, 0, 0, 0.067) 0px 1px 1px;
}

@layer base {
  .container {
    margin-left: auto;
    margin-right: auto;
    padding: var(--container-padding);
  }
  @media (min-width: 1536px) {
    .container {
      max-width: var(--container-max-width-2xl);
    }
  }
}

html {
  @apply font-sans;
}

html body {
  @apply max-w-screen overflow-x-hidden;
}

*:not(input):not(textarea):not([contenteditable='true']):focus-visible {
  outline: 0 !important;
}

@font-face {
  font-family: 'Geist Sans';
  src: url('../assets/fonts/GeistVF.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 200 300 400 500 600 700 800 900;
}

body {
  font-feature-settings:
    'rlig' 1,
    'calt' 1;
}

@layer theme {
  #root,
  #main-app {
    --color-primary: var(--color-accent);
    --color-primary-light: var(--color-accent-light);
    --color-primary-dark: var(--color-accent-dark);
  }
}

html,
body {
  overscroll-behavior: none;
}

@layer utilities {
  .drag-region {
    -webkit-app-region: drag;
  }

  .no-drag-region {
    -webkit-app-region: no-drag;
  }
}

@custom-variant electron (&:where([data-electron='true'], [data-electron='true'] *));
@custom-variant web (&:where([data-web='true'], [data-web='true'] *));
@custom-variant macos (&:where([data-macos='true'], [data-macos='true'] *));
@custom-variant windows (&:where([data-windows='true'], [data-windows='true'] *));

*:not(input):not(textarea):not([contenteditable='true']) {
  @apply select-none;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-material-medium) transparent;
}

html *::-webkit-scrollbar-thumb {
  background-color: transparent;
  border: 6px solid var(--color-fill-quaternary);
  @apply rounded-xl;
}

html *::-webkit-scrollbar-thumb:hover {
  border-color: var(--color-fill-secondary);
}

html *::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
  background: transparent;
}

html *::-webkit-scrollbar-thumb {
  background: var(--color-material-medium);
}

html *::-webkit-scrollbar-thumb:hover {
  background: var(--color-material-thick);
}

html *::-webkit-scrollbar-thumb:active {
  background: var(--color-material-ultra-thick);
}

html *::-webkit-scrollbar-corner {
  background: var(--color-background-secondary);
}

html body {
  @apply bg-black;
}
