@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html:root {
    --club-theme-light-50: 240 240 254;
    --club-theme-light-100: 217 219 252;
    --club-theme-light-200: 188 191 251;
    --club-theme-light-300: 154 158 254;
    --club-theme-light-400: 118 124 245;
    --club-theme-light-500: 76 83 242;
    --club-theme-light-600: 64 71 223;
    --club-theme-light-700: 51 56 202;
    --club-theme-light-800: 38 43 177;
    --club-theme-light-900: 22 25 139;
    --club-theme-light-950: 13 15 95;
    --club-theme-dark-50: 248 248 255;
    --club-theme-dark-100: 238 239 255;
    --club-theme-dark-200: 215 216 254;
    --club-theme-dark-300: 154 158 254;
    --club-theme-dark-400: 142 145 234;
    --club-theme-dark-500: 126 129 208;
    --club-theme-dark-600: 111 114 183;
    --club-theme-dark-700: 92 95 152;
    --club-theme-dark-800: 71 73 117;
    --club-theme-dark-900: 49 51 81;
    --club-theme-dark-950: 34 35 56;
    --lexxy-font-base: "Outfit", ui-sans-serif, system-ui, sans-serif;
    --lexxy-radius: 0.375rem;
    --lexxy-toolbar-button-size: 2.75rem;
  }

  body {
    --club-theme-50: var(--club-theme-light-50);
    --club-theme-100: var(--club-theme-light-100);
    --club-theme-200: var(--club-theme-light-200);
    --club-theme-300: var(--club-theme-light-300);
    --club-theme-400: var(--club-theme-light-400);
    --club-theme-500: var(--club-theme-light-500);
    --club-theme-600: var(--club-theme-light-600);
    --club-theme-700: var(--club-theme-light-700);
    --club-theme-800: var(--club-theme-light-800);
    --club-theme-900: var(--club-theme-light-900);
    --club-theme-950: var(--club-theme-light-950);
    --lexxy-color-accent-dark: rgb(var(--club-theme-700));
    --lexxy-color-accent-medium: rgb(var(--club-theme-400));
    --lexxy-color-accent-light: rgb(var(--club-theme-100));
    --lexxy-color-accent-lightest: rgb(var(--club-theme-50));
    --lexxy-color-link: rgb(var(--club-theme-700));
    --lexxy-color-selected-dark: rgb(var(--club-theme-600));
    --lexxy-focus-ring-color: rgb(var(--club-theme-600));
  }

  lexxy-editor {
    @apply w-full shadow-sm;
  }

  :focus-visible {
    scroll-margin-block: 6rem;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer components {
  .club-document-shell {
    @apply overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900;
  }

  .club-document-heading {
    @apply px-6 py-10 sm:px-10 sm:py-12;
  }

  .club-document-kicker {
    @apply mb-2 text-sm font-medium text-gray-600 dark:text-gray-300;
  }

  .club-document-title {
    @apply block w-full border-0 bg-transparent p-0 text-3xl font-semibold leading-tight tracking-tight text-gray-950 shadow-none placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-0 dark:text-white dark:placeholder:text-gray-600 sm:text-5xl;
  }

  .club-document-deck {
    @apply mt-4 block w-full border-0 bg-transparent p-0 text-lg leading-7 text-gray-600 shadow-none placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-0 dark:text-gray-300 dark:placeholder:text-gray-600 sm:text-xl;
  }

  textarea.club-document-title,
  textarea.club-document-deck {
    height: auto;
    overflow-y: hidden;
  }

  @supports (field-sizing: content) {
    textarea.club-document-title,
    textarea.club-document-deck {
      field-sizing: content;
    }
  }

  .club-document-context {
    @apply mt-4 text-sm leading-6 text-gray-500 dark:text-gray-400;
  }

  lexxy-editor.club-document-editor {
    --lexxy-editor-padding: 2.5rem;
    --lexxy-editor-rows: 28rem;
    --lexxy-radius: 0.375rem;

    @apply border-0 border-t border-gray-200 shadow-none dark:border-gray-800;
    border-radius: 0;
  }

  lexxy-editor.club-document-editor lexxy-toolbar {
    @apply sticky top-16 z-20 border-b border-gray-200 bg-white px-4 py-2 dark:border-gray-800 dark:bg-gray-900 sm:px-8;
  }

  lexxy-editor.club-document-editor .lexxy-editor__content {
    @apply text-base leading-7 text-gray-800 dark:text-gray-100 sm:text-lg sm:leading-8;
  }

  .club-document-settings {
    @apply border-t border-gray-200 bg-gray-50/80 dark:border-gray-800 dark:bg-gray-950/40;
  }

  .club-document-settings-summary {
    min-height: 5rem;
    @apply cursor-pointer px-6 py-5 text-left hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-themelight-600 dark:hover:bg-gray-800/70 sm:px-10;
  }

  .club-document-actions {
    @apply flex flex-col items-stretch gap-3 border-t border-gray-200 px-6 py-6 dark:border-gray-800 sm:flex-row sm:items-center sm:px-10;
  }

  .club-document-cancel {
    @apply inline-flex min-h-11 items-center justify-center rounded-md px-3 text-sm font-semibold text-gray-600 hover:bg-gray-100 hover:text-gray-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-themelight-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white;
  }

  @media (max-width: 639px) {
    lexxy-editor.club-document-editor {
      --lexxy-editor-padding: 1.5rem;
      --lexxy-editor-rows: 22rem;
    }

    lexxy-editor.club-document-editor lexxy-toolbar {
      top: 4rem;
    }
  }
}

@media (prefers-color-scheme: dark) {
  body {
    --club-theme-50: var(--club-theme-dark-50);
    --club-theme-100: var(--club-theme-dark-100);
    --club-theme-200: var(--club-theme-dark-200);
    --club-theme-300: var(--club-theme-dark-300);
    --club-theme-400: var(--club-theme-dark-400);
    --club-theme-500: var(--club-theme-dark-500);
    --club-theme-600: var(--club-theme-dark-600);
    --club-theme-700: var(--club-theme-dark-700);
    --club-theme-800: var(--club-theme-dark-800);
    --club-theme-900: var(--club-theme-dark-900);
    --club-theme-950: var(--club-theme-dark-950);
    --lexxy-color-ink: #f4f4f5;
    --lexxy-color-ink-medium: #d4d4d8;
    --lexxy-color-ink-light: #a1a1aa;
    --lexxy-color-ink-lighter: #3f3f46;
    --lexxy-color-ink-lightest: #27272a;
    --lexxy-color-ink-inverted: #09090b;
    --lexxy-color-accent-dark: rgb(var(--club-theme-300));
    --lexxy-color-accent-medium: rgb(var(--club-theme-400));
    --lexxy-color-accent-light: rgb(var(--club-theme-800));
    --lexxy-color-accent-lightest: rgb(var(--club-theme-900));
    --lexxy-color-canvas: #18181b;
    --lexxy-color-text: #f4f4f5;
    --lexxy-color-text-subtle: #d4d4d8;
    --lexxy-color-link: rgb(var(--club-theme-200));
    --lexxy-color-selected-dark: rgb(var(--club-theme-300));
    --lexxy-color-code-bg: #27272a;
    --lexxy-color-table-header-bg: #27272a;
    --lexxy-color-table-cell-border: #3f3f46;
    --lexxy-focus-ring-color: rgb(var(--club-theme-300));
  }
}