/*
 * Artecho shared visual layer.
 * Loaded after each tool page's own styles, and before index.html's shell styles.
 * It replaces colour tokens, typography, focus and scrollbar treatment only;
 * layout, markup and behaviour stay with each page.
 */

:root {
  color-scheme: light;

  --artecho-ink: #16211f;
  --artecho-muted: #5f6f6a;
  --artecho-paper: #edf1ef;
  --artecho-surface: #ffffff;
  --artecho-surface-soft: #e6ece9;
  --artecho-line: #d3ddd9;
  --artecho-line-strong: #b9c8c3;
  --artecho-brand: #0b6b60;
  --artecho-brand-dark: #075148;
  --artecho-brand-soft: #dcebe7;
  --artecho-signal: #b97318;
  --artecho-blue: #2c5fb8;
  --artecho-blue-soft: #e7eefb;
  --artecho-green: #147a4d;
  --artecho-green-soft: #e3f3ea;
  --artecho-amber: #8a5408;
  --artecho-amber-soft: #fbf0dc;
  --artecho-red: #b42318;
  --artecho-red-soft: #fbe9e7;
  --artecho-radius: 8px;
  --artecho-font: "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --artecho-mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --artecho-shadow: 0 1px 2px rgba(18, 33, 29, 0.05), 0 18px 40px -28px rgba(18, 33, 29, 0.35);
  --artecho-shadow-soft: 0 1px 2px rgba(18, 33, 29, 0.04), 0 8px 24px -18px rgba(18, 33, 29, 0.28);

  /* Existing per-page token names, remapped to the shared palette. */
  --bg: var(--artecho-paper);
  --background: var(--artecho-paper);
  --surface: var(--artecho-surface);
  --surface-2: var(--artecho-surface-soft);
  --surface-3: #dfe7e3;
  --card: var(--artecho-surface);
  --sidebar: var(--artecho-surface-soft);
  --line: var(--artecho-line);
  --border: var(--artecho-line);
  --border-strong: var(--artecho-line-strong);
  --text: var(--artecho-ink);
  --text-color: var(--artecho-ink);
  --ink: var(--artecho-ink);
  --muted: var(--artecho-muted);
  --brand: var(--artecho-brand);
  --teal: var(--artecho-brand);
  --teal-dark: var(--artecho-brand-dark);
  --primary: var(--artecho-brand);
  --primary-hover: var(--artecho-brand-dark);
  --primary-dark: var(--artecho-brand-dark);
  --accent: var(--artecho-brand);
  --accent-soft: var(--artecho-brand-soft);
  --blue: var(--artecho-brand);
  --blue-soft: var(--artecho-brand-soft);
  --info: var(--artecho-blue);
  --info-soft: var(--artecho-blue-soft);
  --green: var(--artecho-green);
  --green-soft: var(--artecho-green-soft);
  --ok: var(--artecho-green);
  --ok-soft: var(--artecho-green-soft);
  --success: var(--artecho-green);
  --success-bg: var(--artecho-green-soft);
  --red: var(--artecho-red);
  --error: var(--artecho-red);
  --danger: var(--artecho-red);
  --bad: var(--artecho-red);
  --error-soft: var(--artecho-red-soft);
  --danger-bg: var(--artecho-red-soft);
  --bad-soft: var(--artecho-red-soft);
  --amber: var(--artecho-amber);
  --warn: var(--artecho-amber);
  --orange: var(--artecho-amber);
  --warn-soft: var(--artecho-amber-soft);
  --orange-soft: var(--artecho-amber-soft);
  --navy: var(--artecho-ink);
  --navy-2: #38534c;
  --shadow: var(--artecho-shadow);
  --radius: var(--artecho-radius);
  --font: var(--artecho-font);
  --mono: var(--artecho-mono);
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--artecho-font);
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image: none;
}

h1,
h2,
h3 {
  letter-spacing: 0;
}

::selection {
  background: rgba(11, 107, 96, 0.18);
  color: inherit;
}

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--artecho-brand);
  outline-offset: 2px;
}

:is(button, input, select, textarea) {
  accent-color: var(--artecho-brand);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--artecho-line-strong) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: #c3cfca;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: #a8b8b2;
  background-clip: content-box;
}

/*
 * Bridge for the two pages that use utility classes. Tailwind's browser build
 * injects its rules at runtime, so this small set is marked important to keep
 * the shared surface, border and radius treatment stable.
 */
.font-sans {
  font-family: var(--artecho-font) !important;
}

.bg-white {
  background-color: var(--artecho-surface) !important;
}

.bg-slate-50,
.bg-gray-50 {
  background-color: var(--artecho-paper) !important;
}

.bg-slate-800 {
  background-color: var(--artecho-ink) !important;
}

.bg-gray-100 {
  background-color: var(--artecho-surface-soft) !important;
}

.bg-gray-200 {
  background-color: var(--artecho-line) !important;
}

.bg-blue-50 {
  background-color: var(--artecho-brand-soft) !important;
}

.bg-blue-500,
.bg-blue-600,
.bg-blue-700 {
  background-color: var(--artecho-brand) !important;
}

.text-slate-900,
.text-slate-800,
.text-gray-900,
.text-gray-800 {
  color: var(--artecho-ink) !important;
}

.text-slate-700,
.text-gray-700 {
  color: #3f514c !important;
}

.text-slate-600,
.text-slate-500,
.text-gray-600,
.text-gray-500 {
  color: var(--artecho-muted) !important;
}

.text-slate-400,
.text-gray-400 {
  color: #8a9893 !important;
}

.text-blue-900,
.text-blue-700,
.text-blue-600,
.text-blue-500 {
  color: var(--artecho-brand) !important;
}

.border-slate-100,
.border-slate-200,
.border-gray-100,
.border-gray-200 {
  border-color: var(--artecho-line) !important;
}

.border-blue-500 {
  border-color: var(--artecho-brand) !important;
}

.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: var(--artecho-radius) !important;
}

.shadow-sm,
.shadow,
.shadow-md {
  box-shadow: var(--artecho-shadow-soft) !important;
}

.hover\:bg-blue-700:hover,
.hover\:bg-blue-600:hover {
  background-color: var(--artecho-brand-dark) !important;
}

.hover\:bg-blue-50:hover {
  background-color: var(--artecho-brand-soft) !important;
}

.hover\:bg-gray-50:hover {
  background-color: var(--artecho-surface-soft) !important;
}

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