@import 'tailwindcss';

@plugin 'tailwindcss-animate';
@plugin '@tailwindcss/container-queries';

@source '../../../../packages/ui/**/*.{ts,tsx}';
@source '../../node_modules/@openstatus/react/**/*.{js,ts,jsx,tsx}';

@custom-variant dark (&:is(.dark *));

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-info: var(--info);

  --color-sh-class: var(--sh-class);
  --color-sh-identifier: var(--sh-identifier);
  --color-sh-sign: var(--sh-sign);
  --color-sh-string: var(--sh-string);
  --color-sh-keyword: var(--sh-keyword);
  --color-sh-comment: var(--sh-comment);
  --color-sh-jsxliterals: var(--sh-jsxliterals);
  --color-sh-property: var(--sh-property);
  --color-sh-entity: var(--sh-entity);

  --font-sans:
    var(--font-sans), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-cal: var(--font-calsans);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
  @media (width >= --theme(--breakpoint-sm)) {
    max-width: none;
  }
  @media (width >= 1400px) {
    max-width: 1400px;
  }
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@layer base {
  :root {
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
  
    --success: oklch(0.72 0.19 150);
    --warning: oklch(0.77 0.16 70);
    --info: oklch(0.62 0.19 260);
  
    --rainbow-1: oklch(0.64 0.21 25);
    --rainbow-2: oklch(0.70 0.19 48);
    --rainbow-3: oklch(0.77 0.16 70);
    --rainbow-4: oklch(0.80 0.16 86);
    --rainbow-5: oklch(0.77 0.20 131);
    --rainbow-6: oklch(0.72 0.19 150);
    --rainbow-7: oklch(0.70 0.15 162);
    --rainbow-8: oklch(0.70 0.12 183);
    --rainbow-9: oklch(0.71 0.13 215);
    --rainbow-10: oklch(0.68 0.15 237);
    --rainbow-11: oklch(0.62 0.19 260);
    --rainbow-12: oklch(0.59 0.20 277);
    --rainbow-13: oklch(0.61 0.22 293);
    --rainbow-14: oklch(0.63 0.23 304);
    --rainbow-15: oklch(0.67 0.26 322);
    --rainbow-16: oklch(0.66 0.21 354);
    --rainbow-17: oklch(0.65 0.22 16);
  
    --sh-class: #2d5e9d;
    --sh-identifier: #354150;
    --sh-sign: #8996a3;
    --sh-string: #007f7a;
    --sh-keyword: #e02518;
    --sh-comment: #a19595;
    --sh-jsxliterals: #6266d1;
    --sh-property: #e25a1c;
    --sh-entity: #e25a1c;
  }

  .dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);
  
    --success: oklch(0.72 0.19 150);
    --warning: oklch(0.77 0.16 70);
    --info: oklch(0.62 0.19 260);
  
    --rainbow-1: oklch(0.64 0.21 25);
    --rainbow-2: oklch(0.70 0.19 48);
    --rainbow-3: oklch(0.77 0.16 70);
    --rainbow-4: oklch(0.80 0.16 86);
    --rainbow-5: oklch(0.77 0.20 131);
    --rainbow-6: oklch(0.72 0.19 150);
    --rainbow-7: oklch(0.70 0.15 162);
    --rainbow-8: oklch(0.70 0.12 183);
    --rainbow-9: oklch(0.71 0.13 215);
    --rainbow-10: oklch(0.68 0.15 237);
    --rainbow-11: oklch(0.62 0.19 260);
    --rainbow-12: oklch(0.59 0.20 277);
    --rainbow-13: oklch(0.61 0.22 293);
    --rainbow-14: oklch(0.63 0.23 304);
    --rainbow-15: oklch(0.67 0.26 322);
    --rainbow-16: oklch(0.66 0.21 354);
    --rainbow-17: oklch(0.65 0.22 16);
  
    --sh-class: #4c97f8;
    --sh-identifier: white;
    --sh-keyword: #f47067;
    --sh-string: #0fa295;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }

  .dark [data-theme='dark'] {
    display: block;
  }
  
  [data-theme='dark'] {
    display: none;
  }
  
  [data-theme='light'] {
    display: block;
  }
  
  .dark [data-theme='light'] {
    display: none;
  }
}

/* Typography */

::selection {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.prose {
  @apply text-foreground/80;
}

.prose .anchor {
  @apply absolute invisible no-underline;

  margin-left: -1em;
  padding-right: 0.5em;
  width: 80%;
  max-width: 700px;
  cursor: pointer;
}

.anchor:hover {
  @apply visible;
}

.prose a {
  @apply text-foreground underline transition-all decoration-muted-foreground/50 underline-offset-2 decoration-2 hover:decoration-muted-foreground;
}

.prose .anchor:after {
  @apply text-muted-foreground;
  content: '#';
}

.prose *:hover > .anchor {
  @apply visible;
}

.prose pre {
  @apply relative bg-muted overflow-x-auto border border-border py-2.5 px-3.5 text-sm rounded-none;
}

.prose code {
  @apply px-1 py-0.5 bg-muted text-muted-foreground;
}

.prose pre code {
  @apply p-0;
  border: initial;
  line-height: 1.5;
}

.prose code span {
  @apply font-medium;
}

.prose img {
  /* Don't apply styles to next/image */
  @apply m-0;
}

.prose p {
  @apply my-4 leading-7;
}

.prose h1 {
  @apply text-3xl text-foreground font-medium tracking-tight my-4 relative;
}


.prose h2 {
  @apply text-2xl text-foreground font-medium tracking-tight my-4 relative;
}

.prose h3 {
  @apply text-xl text-foreground font-medium tracking-tight my-4 relative;
}

.prose h4 {
  @apply text-lg text-foreground font-medium tracking-tight my-4 relative;
}

.prose hr {
  @apply my-4 border-border;
}

.prose strong {
  @apply text-foreground font-semibold;
}

.prose blockquote {
  @apply border-l-2 border-foreground/50 pl-4;
}

.prose blockquote p::before {
  content: '"';
  @apply text-muted-foreground;
}

.prose blockquote p::after {
  content: '"';
  @apply text-muted-foreground;
}

.prose figure {
  @apply my-4;
}

.prose figure img {
  @apply aspect-video object-cover border border-border;
}

.prose figure figcaption {
  @apply text-sm text-muted-foreground not-empty:mt-1;
}

.prose em {
  @apply text-foreground italic;
}

.prose ul {
  list-style-type: "- ";
  @apply pl-4 list-outside marker:text-muted-foreground;
}

.prose ol {
  /* NOTE: maybe replace by default pl and list-inside */
  @apply pl-4 list-outside list-decimal marker:text-muted-foreground;
}

.prose li {
  @apply leading-7;
}

.prose details {
  @apply border border-border p-4 my-4;
}

.prose details p:last-child {
  @apply mb-0;
}

.prose details summary {
  @apply cursor-pointer font-medium text-foreground select-none;
}

.prose details summary:hover {
  @apply bg-muted;
}

.prose details summary::marker {
  @apply mr-1;
}

.prose details[open] summary {
  @apply mb-2;
}

.prose form {
  @apply my-4;
}

.prose form label {
  @apply text-foreground font-medium;
}

/* Wrapper for scrollable tables */
.prose .table-wrapper {
  @apply w-full overflow-x-auto my-4;
}

.prose table {
  @apply w-full border-collapse border border-border text-foreground;
}

.prose table th {
  @apply font-medium bg-muted/50 p-4 text-left border border-border;
}

.prose table td {
  @apply font-normal p-4 border border-border;
}

.prose table caption {
  @apply text-muted-foreground text-sm caption-bottom mt-4;
}

pre::-webkit-scrollbar {
  display: none;
}

pre {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Remove Safari input shadow on mobile */
input[type='text'],
input[type='email'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.title {
  text-wrap: balance;
}