/* Import Inter Tight from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import "tailwindcss";

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

/* Bind the browser's native-control color scheme (checkbox fill, scrollbars,
   date pickers, etc.) to the same class our theme controller toggles. Without
   this, the `<meta name="color-scheme" content="light dark">` lets the OS
   preference leak through — so a user on dark-mode OS viewing the app in light
   mode gets dark-rendered native checkboxes against a light page. */
:root { color-scheme: light; }
:root.dark { color-scheme: dark; }

/* justsayin Design System - See /docs/design/design_system.md */
@theme {
  /* Typography - Inter Tight as default sans font */
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Comment thread lines — all positions derived from these base values.
   Change --comment-avatar or --comment-indent and every thread line adapts. */
:root {
  --comment-avatar: 1.75rem;          /* avatar size, matches w-7 (28px) */
  --comment-indent: 1.5rem;           /* reply indentation, matches pl-6 (24px) */
  --comment-line-width: 2px;          /* thread line thickness */
  --comment-avatar-gap: 4px;          /* gap between avatar bottom and thread line start */
  --comment-sibling-gap: 0.75rem;     /* gap between sibling replies, matches space-y-3 (12px) */

  /* derived: parent's thread line */
  --thread-line-left: calc(var(--comment-avatar) / 2 - var(--comment-line-width) / 2);
  --thread-line-top: calc(var(--comment-avatar) + var(--comment-avatar-gap));

  /* derived: child connectors (L-curve + continuation line) */
  --thread-connector-left: calc(-1 * (var(--comment-indent) - var(--comment-avatar) / 2 + var(--comment-line-width) / 2));
  --thread-connector-width: calc(var(--comment-indent) - var(--comment-avatar) / 2 + var(--comment-line-width) / 2);
  --thread-connector-height: calc(var(--comment-avatar) / 2 + var(--comment-line-width) / 2);
  --thread-sibling-extend: calc(-1 * var(--comment-sibling-gap));
}

/* Lexxy dark mode — overrides the CSS custom properties from lexxy-variables.css
   (shipped by the gem). Cascades to both the <lexxy-editor> chrome and the
   rendered .lexxy-content wrapper, so one block fixes both. Ported from the
   upstream sandbox example but scoped under .dark instead of the prefers-color
   media query so it follows our class-based theme controller. */
.dark {
  --lexxy-color-ink: oklch(96% 0 0);
  --lexxy-color-ink-medium: oklch(75% 0 0);
  --lexxy-color-ink-light: oklch(55% 0 0);
  --lexxy-color-ink-lighter: oklch(40% 0 0);
  --lexxy-color-ink-lightest: oklch(25% 0 0);
  --lexxy-color-ink-inverted: oklch(15% 0 0);

  --lexxy-color-accent-dark: oklch(70% 0.30 260);
  --lexxy-color-accent-medium: oklch(75% 0.196 258);
  --lexxy-color-accent-light: oklch(45% 0.04 254);
  --lexxy-color-accent-lightest: oklch(35% 0.04 254);

  --lexxy-color-red: oklch(70% 0.15 27);
  --lexxy-color-green: oklch(70% 0.15 145);
  --lexxy-color-blue: oklch(75% 0.196 258);
  --lexxy-color-purple: oklch(70% 0.15 305);

  --lexxy-color-code-token-att: #ff7b72;
  --lexxy-color-code-token-comment: #8b949e;
  --lexxy-color-code-token-function: #d2a8ff;
  --lexxy-color-code-token-operator: #ff7b72;
  --lexxy-color-code-token-property: #79c0ff;
  --lexxy-color-code-token-punctuation: #f0f6fc;
  --lexxy-color-code-token-selector: #7ee787;
  --lexxy-color-code-token-variable: #ffa657;

  --lexxy-shadow: 0 0 0 1px rgba(100, 100, 100, 0.3);
}

/* Lexxy toolbar dropdown SVG icons.
   The gem sets `fill: currentColor` on the main toolbar buttons but not on the
   buttons inside dropdown lists, so their SVGs default to black and become
   invisible on the dark canvas. Force inheritance everywhere inside the editor. */
lexxy-editor .lexxy-editor__toolbar-dropdown-list svg {
  fill: currentColor;
}

/* Custom Select Dropdown Styling */
/* Hide default arrow and add custom SVG chevron arrow with proper spacing */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem; /* Space for custom arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center; /* 12px from right edge, vertically centered */
  background-size: 14px 14px;
  cursor: pointer;
}

/* Number field styling */
input[type="number"] {
  cursor: pointer;
}

/* Mobile sidebar drawer.
   Open/closed lives on <html> as data-sidebar-open — <html> survives Turbo
   body swaps, so the state persists across navigations without server
   involvement. Toggled by sidebar_controller.js; seeded on first paint by
   the inline <head> script in application.html.erb (mirrors theme pattern). */
.app-sidebar {
  transition: transform 300ms;
}

@media (max-width: 767px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-sidebar-overlay { display: none; }

  html[data-sidebar-open] .app-sidebar { transform: translateX(0); }
  html[data-sidebar-open] .app-sidebar-overlay { display: block; }
  html[data-sidebar-open] body { overflow: hidden; }
}