/* Ordo Census design tokens */
:root {
  --ordo-canvas: oklch(0.975 0.005 80);
  --ordo-surface: oklch(0.992 0.003 80);
  --ordo-surface-subtle: oklch(0.965 0.006 80);
  --ordo-surface-sunken: oklch(0.945 0.008 80);
  --ordo-overlay: rgba(28, 24, 18, 0.45);

  --ordo-border: oklch(0.905 0.008 80);
  --ordo-border-subtle: oklch(0.935 0.007 80);
  --ordo-border-strong: oklch(0.84 0.010 80);

  --ordo-text: oklch(0.205 0.012 80);
  --ordo-text-muted: oklch(0.455 0.012 80);
  --ordo-text-faint: oklch(0.605 0.010 80);
  --ordo-text-on-accent: oklch(0.985 0.005 80);

  --ordo-accent: oklch(0.585 0.090 195);
  --ordo-accent-hover: oklch(0.530 0.095 195);
  --ordo-accent-subtle: oklch(0.945 0.025 195);
  --ordo-accent-border: oklch(0.870 0.040 195);
  --ordo-accent-text: oklch(0.395 0.080 195);

  --ordo-success-text: oklch(0.435 0.080 150);
  --ordo-success-bg: oklch(0.945 0.030 150);
  --ordo-success-border: oklch(0.860 0.050 150);
  --ordo-warn-text: oklch(0.475 0.110 65);
  --ordo-warn-bg: oklch(0.955 0.045 75);
  --ordo-warn-border: oklch(0.870 0.080 75);
  --ordo-danger-text: oklch(0.490 0.140 25);
  --ordo-danger-bg: oklch(0.955 0.035 25);
  --ordo-danger-border: oklch(0.870 0.070 25);
  --ordo-neutral-text: oklch(0.435 0.010 80);
  --ordo-neutral-bg: oklch(0.940 0.006 80);
  --ordo-neutral-border: oklch(0.870 0.008 80);

  --ordo-focus-ring: oklch(0.585 0.090 195 / 0.35);
  --ordo-selection: oklch(0.585 0.090 195 / 0.20);

  --ordo-shadow-sm: 0 1px 0 0 oklch(0.84 0.010 80 / 0.6), 0 1px 2px 0 oklch(0.20 0.012 80 / 0.04);
  --ordo-shadow-md: 0 1px 0 0 oklch(0.84 0.010 80 / 0.4), 0 4px 12px -2px oklch(0.20 0.012 80 / 0.06);
  --ordo-shadow-lg: 0 1px 0 0 oklch(0.84 0.010 80 / 0.4), 0 12px 32px -6px oklch(0.20 0.012 80 / 0.10);

  color-scheme: light;
}

.dark {
  --ordo-canvas: oklch(0.165 0.006 80);
  --ordo-surface: oklch(0.195 0.007 80);
  --ordo-surface-subtle: oklch(0.215 0.008 80);
  --ordo-surface-sunken: oklch(0.145 0.006 80);
  --ordo-overlay: rgba(8, 6, 4, 0.6);

  --ordo-border: oklch(0.275 0.010 80);
  --ordo-border-subtle: oklch(0.240 0.008 80);
  --ordo-border-strong: oklch(0.345 0.012 80);

  --ordo-text: oklch(0.955 0.005 80);
  --ordo-text-muted: oklch(0.700 0.010 80);
  --ordo-text-faint: oklch(0.530 0.010 80);
  --ordo-text-on-accent: oklch(0.155 0.010 195);

  --ordo-accent: oklch(0.755 0.095 195);
  --ordo-accent-hover: oklch(0.815 0.090 195);
  --ordo-accent-subtle: oklch(0.290 0.045 195);
  --ordo-accent-border: oklch(0.395 0.060 195);
  --ordo-accent-text: oklch(0.815 0.080 195);

  --ordo-success-text: oklch(0.795 0.090 150);
  --ordo-success-bg: oklch(0.275 0.050 150);
  --ordo-success-border: oklch(0.395 0.060 150);
  --ordo-warn-text: oklch(0.815 0.115 75);
  --ordo-warn-bg: oklch(0.290 0.060 65);
  --ordo-warn-border: oklch(0.410 0.080 70);
  --ordo-danger-text: oklch(0.780 0.115 25);
  --ordo-danger-bg: oklch(0.295 0.075 25);
  --ordo-danger-border: oklch(0.420 0.100 25);
  --ordo-neutral-text: oklch(0.720 0.010 80);
  --ordo-neutral-bg: oklch(0.260 0.008 80);
  --ordo-neutral-border: oklch(0.355 0.010 80);

  --ordo-focus-ring: oklch(0.755 0.095 195 / 0.45);
  --ordo-selection: oklch(0.755 0.095 195 / 0.25);

  --ordo-shadow-sm: 0 1px 0 0 oklch(0.10 0.005 80 / 0.6), 0 1px 2px 0 oklch(0 0 0 / 0.25);
  --ordo-shadow-md: 0 1px 0 0 oklch(0.10 0.005 80 / 0.6), 0 4px 12px -2px oklch(0 0 0 / 0.35);
  --ordo-shadow-lg: 0 1px 0 0 oklch(0.10 0.005 80 / 0.6), 0 12px 32px -6px oklch(0 0 0 / 0.45);

  color-scheme: dark;
}

::selection { background: var(--ordo-selection); }

.ordo-skeleton {
  background: linear-gradient(90deg, var(--ordo-surface-sunken) 0%, var(--ordo-surface-subtle) 50%, var(--ordo-surface-sunken) 100%);
  background-size: 200% 100%;
  animation: ordoSkeleton 1.6s ease-in-out infinite;
}

@keyframes ordoSkeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.htmx-swapping { opacity: 0.4; transition: opacity 150ms ease; }
.htmx-settling { opacity: 1; transition: opacity 200ms ease; }

.ordo-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ordo-focus-ring);
}

/* ── Supplementary utilities not yet in the compiled tailwind.css ── */

/* Status colors — success */
.bg-success-bg   { background-color: var(--ordo-success-bg); }
.text-success-fg { color: var(--ordo-success-text); }
.border-success-line { border-color: var(--ordo-success-border); }
.bg-success-fg   { background-color: var(--ordo-success-text); }
.border-success-fg   { border-color: var(--ordo-success-text); }

/* Status colors — warn */
.bg-warn-bg      { background-color: var(--ordo-warn-bg); }
.text-warn-fg    { color: var(--ordo-warn-text); }
.border-warn-line    { border-color: var(--ordo-warn-border); }
.bg-warn-fg      { background-color: var(--ordo-warn-text); }

/* Status colors — faint background for timeline dots */
.bg-faint        { background-color: var(--ordo-text-faint); }

/* Hover variants */
.hover\:text-accent:hover    { color: var(--ordo-accent); }
.hover\:border-line-strong:hover { border-color: var(--ordo-border-strong); }

/* Shadows */
.shadow-ordo-md  { box-shadow: var(--ordo-shadow-md); }
.shadow-ordo-lg  { box-shadow: var(--ordo-shadow-lg); }

/* Border radius */
.rounded-xl      { border-radius: 12px; }

/* Ring utilities (for timeline dots) */
.ring-1          { --tw-ring-shadow: 0 0 0 1px var(--tw-ring-color, var(--ordo-accent)); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.ring-accent     { --tw-ring-color: var(--ordo-accent); }
.ring-success-fg { --tw-ring-color: var(--ordo-success-text); }
.ring-warn-fg    { --tw-ring-color: var(--ordo-warn-text); }
.ring-faint      { --tw-ring-color: var(--ordo-text-faint); }

/* Positioning for toasts */
.bottom-4         { bottom: 1rem; }
.right-4          { right: 1rem; }
.z-\[60\]         { z-index: 60; }
.max-w-\[360px\]  { max-width: 360px; }
.max-w-\[420px\]  { max-width: 420px; }

/* Toast animation */
@keyframes ordoToastIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.animate-toast-in { animation: ordoToastIn 180ms ease-out; }

/* Modal transition helpers */
.translate-y-1    { transform: translateY(0.25rem); }
.opacity-0        { opacity: 0; }
.inset-0          { inset: 0; }

/* Arbitrary sizing used by components */
.h-11             { height: 2.75rem; }
.p-5              { padding: 1.25rem; }
.p-6              { padding: 1.5rem; }
.pt-4             { padding-top: 1rem; }
.pb-4             { padding-bottom: 1rem; }
.gap-3\.5         { gap: 0.875rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --space-y-reverse: 0;
  margin-top: calc(0.375rem * (1 - var(--space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--space-y-reverse));
}

/* Overlay background */
.bg-\[var\(--ordo-overlay\)\] { background-color: var(--ordo-overlay); }