@import "tailwindcss";
@import "../../../node_modules/@37signals/lexxy/dist/stylesheets/lexxy-variables.css";
@import "../../../node_modules/@37signals/lexxy/dist/stylesheets/lexxy-content.css";
@import "../../../node_modules/@37signals/lexxy/dist/stylesheets/lexxy-editor.css";

@plugin "daisyui" {
  themes: light --default;
  root: ":root";
  logs: false;
}

@source "../../views/**/*.html.erb";
@source "../../helpers/**/*.rb";
@source "../../javascript/**/*.js";

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  prefersdark: false;
  color-scheme: light;

  --color-base-100: oklch(99% 0 0);
  --color-base-200: oklch(97% 0 0);
  --color-base-300: oklch(94% 0 0);
  --color-base-content: oklch(21% 0.006 285.885);

  --color-primary: oklch(21% 0.006 285.885);
  --color-primary-content: oklch(99% 0 0);

  --color-secondary: oklch(55% 0 0);
  --color-secondary-content: oklch(99% 0 0);

  --color-accent: oklch(55% 0.18 28);
  --color-accent-content: oklch(99% 0 0);

  --color-neutral: oklch(28% 0.006 285.885);
  --color-neutral-content: oklch(99% 0 0);

  --color-info: oklch(55% 0.18 240);
  --color-success: oklch(55% 0.18 145);
  --color-warning: oklch(75% 0.18 75);
  --color-error: oklch(60% 0.22 25);

  --radius-selector: 0.375rem;
  --radius-field: 0.375rem;
  --radius-box: 0.5rem;

  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  --border: 1px;
  --depth: 0;
  --noise: 0;
}

@layer base {
  html {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-base-100 text-base-content;
  }
}

@layer components {
  .prose-page {
    @apply max-w-none text-base-content leading-relaxed;
  }
  .prose-page h1 {
    @apply text-3xl font-semibold tracking-tight mb-4;
  }
  .prose-page h2 {
    @apply text-2xl font-semibold tracking-tight mt-10 mb-3;
  }
  .prose-page h3 {
    @apply text-xl font-semibold tracking-tight mt-8 mb-2;
  }
  .prose-page p {
    @apply my-4;
  }
  .prose-page ul {
    @apply list-disc pl-6 my-4;
  }
  .prose-page ol {
    @apply list-decimal pl-6 my-4;
  }
  .prose-page a {
    @apply text-accent underline underline-offset-2 hover:opacity-80;
  }
  .prose-page blockquote {
    @apply border-l-2 border-base-300 pl-4 italic text-base-content/80;
  }
  .prose-page code {
    @apply bg-base-200 px-1 py-0.5 rounded text-sm;
  }
  .prose-page pre {
    @apply bg-base-200 p-4 rounded text-sm overflow-x-auto;
  }
  .prose-page table {
    @apply w-full border-collapse my-6 text-sm;
  }
  .prose-page th,
  .prose-page td {
    @apply border border-base-300 px-3 py-2 text-left;
  }
  .prose-page th {
    @apply bg-base-200 font-semibold;
  }

  /* Lexxy exports strikethrough as <s> and underline as <u> tags (see
   * lexxy.esm.js: exportTextNodeDOM). Tailwind preflight resets default
   * text-decoration, so the browser's built-in styling is gone. Re-apply
   * everywhere rich text renders. */
  :where(.lexxy-content, .prose-page) u,
  :where(.lexxy-content, .prose-page) ins {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  :where(.lexxy-content, .prose-page) s,
  :where(.lexxy-content, .prose-page) del,
  :where(.lexxy-content, .prose-page) strike {
    text-decoration: line-through;
  }

  .callout-tldr {
    @apply rounded-md border border-base-300 bg-base-200/60 px-4 py-3 my-6 text-sm;
  }

  .watermark {
    @apply fixed inset-0 pointer-events-none flex items-center justify-center
           -rotate-12 select-none z-50;
    font-size: clamp(2rem, 8vw, 6rem);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.04);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Chart fullscreen modal — applied by chart-zoom Stimulus controller */
  .chart-wrapper {
    @apply relative w-full;
  }
  .chart-host {
    @apply w-full block;
  }
  .chart-toolbar {
    @apply absolute top-2 right-2 flex gap-1 z-10 opacity-30 transition-opacity;
  }
  .chart-wrapper:hover .chart-toolbar,
  .chart-wrapper.chart-fullscreen .chart-toolbar {
    @apply opacity-100;
  }
  .chart-fullscreen {
    @apply fixed inset-0 bg-base-100 p-6 flex flex-col;
    z-index: 60;
  }
  .chart-fullscreen .chart-host {
    @apply flex-1 min-h-0;
  }
  .chart-fullscreen .chart-host > * {
    height: 100% !important;
  }
}