/* Lexpera.AI — palette custom properties.
   Source of truth: docs/design/"Hukuk sektörü AI renk paleti.pdf".
   Tailwind utilities (tailwind.config.js, built into tailwind.css — spec 036) are the
   primary way to use these colors; the variables below exist for non-Tailwind contexts
   (inline SVG, charts, third-party widgets). tests/unit/test_tailwind_build.py keeps the
   two declarations equal. Do not introduce new colors. */

:root {
  --lex-red: #db1318;        /* Kırmızı (Ana) — CTA, uyarı, kritik risk */
  --lex-navy: #2d3846;       /* Lacivert (Ana) — kurumsal zemin */
  --lex-gold: #c99a4a;       /* Altın — premium/AI vurgusu */
  --lex-cloud: #f6f5f3;
  --lex-mist: #e7e5e1;
  --lex-stone: #c7c5c1;
  --lex-gray: #8b8d92;
  --lex-lead: #4a4f58;
  --lex-ink: #1c2128;
  --lex-success: #3f7d5c;
  --lex-warning: #c98a2e;
  --lex-critical: #db1318;
  /* Dark theme surfaces (navy/ink derivatives from the approved mockups) */
  --lex-surface-dark: #232a34;
  --lex-header-dark: #1e2530;
  --lex-border-dark: #323b47;

  /* Semantic (light theme) */
  --bg: var(--lex-cloud);
  --surface: #ffffff;
  --border: var(--lex-mist);
  --text: var(--lex-ink);
  --text-muted: var(--lex-gray);

  /* Scrollbars (spec 022 R2): slim thumb on a transparent track. */
  --scroll-thumb: var(--lex-stone);
  --scroll-thumb-hover: var(--lex-gray);
}

.dark {
  /* Semantic (dark theme) — surfaces derived from navy/ink, as in the mockups */
  --bg: var(--lex-ink);
  --surface: var(--lex-surface-dark);
  --border: var(--lex-border-dark);
  --text: var(--lex-cloud);
  --text-muted: var(--lex-gray);
  --scroll-thumb: var(--border);
}

/* Themed scrollbars everywhere (spec 022 FR-013..FR-015). Chromium and Safari style
   the ::-webkit-scrollbar pseudo-elements (with hover); Firefox has no such selector and
   takes the standard properties instead. Chromium ignores the pseudo-elements once the
   standard properties are set, hence the @supports gate. Browsers supporting neither
   keep their default bar; overlay/touch scrollbars are unaffected. The variables are
   redefined under .dark, so the theme toggle recolours scrollbars without reload. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
  }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-corner { background: transparent; }

/* Dialog panel entrance (spec 022 R5): a short fade, none under reduced motion. */
@keyframes lex-dialog-in {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.lex-dialog-panel { animation: lex-dialog-in 120ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .lex-dialog-panel { animation: none; }
}

/* Alpine.js: hide x-cloak elements until Alpine initializes */
[x-cloak] { display: none !important; }

/* Module chat "İşleniyor..." row (spec 008 FR-021): a single animated line — no
   streamed text, no reasoning steps. Palette colours only (gold = AI accent). */
@keyframes lex-processing-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.lex-processing-line {
  position: relative;
  overflow: hidden;
  height: 2px;
  border-radius: 9999px;
  background: var(--border);
}
.lex-processing-line::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: 9999px;
  background: var(--lex-gold);
  animation: lex-processing-sweep 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .lex-processing-line::after { animation: none; width: 100%; opacity: 0.6; }
}

/* Corporate / legal prose (spec 026): the copied texts are plain h2/h3/p/ul markup
   shared by the public page and the consent dialog, so spacing lives here, not per
   element. Colours come from the surrounding utilities (both themes). */
.legal-prose h2 { margin: 1.75em 0 0.6em; font-size: 1.15em; font-weight: 700; }
.legal-prose h3 { margin: 1.4em 0 0.5em; font-size: 1em; font-weight: 600; }
.legal-prose p { margin: 0 0 0.9em; }
.legal-prose ul, .legal-prose ol { margin: 0 0 0.9em; padding-left: 1.4em; list-style: disc; }
.legal-prose ul ul { margin-top: 0.4em; list-style: circle; }
.legal-prose li { margin-bottom: 0.4em; }
.legal-prose h2:first-child, .legal-prose p:first-child { margin-top: 0; }

/* Citation buttons in document answers (spec 019 R14): a small superscript link. */
.lex-cite {
  display: inline;
  margin: 0 0.1em;
  padding: 0 0.15em;
  border-radius: 0.25rem;
  font-size: 0.75em;
  font-weight: 600;
  vertical-align: super;
  line-height: 1;
  color: var(--lex-navy);
  background: transparent;
  cursor: pointer;
}
.dark .lex-cite { color: var(--lex-gold); }
.lex-cite:hover, .lex-cite[aria-expanded="true"] { background: rgb(201 154 74 / 0.18); }
.lex-cite:focus-visible { outline: 2px solid var(--lex-gold); outline-offset: 1px; }