/* Clinika's layer over the Industry design system (industry.css, kept verbatim).
   Must load after it (see the stylesheet order in layouts/application.html.erb).
   Holds the teal token overrides (light and [data-theme="dark"]) and shell styles. */

/* ── tokens ─────────────────────────────────────────────────────────────── */

:root {
  --color-bg: #f9fafb;
  --color-surface: #ffffff;
  --color-text: #1f2937;
  --color-divider: #e5e7eb;
  --color-accent: #0e7490;
  --color-accent-100: #ecfeff;
  --color-accent-200: #cffafe;
  --color-accent-300: #a5f3fc;
  --color-accent-400: #22d3ee;
  --color-accent-500: #0891b2;
  --color-accent-600: #155e75;
  --color-accent-700: #164e63;
  --color-accent-800: #164e63;
  --color-accent-900: #083344;
  --color-accent-2: #0284c7;
  --color-accent-2-100: #f0f9ff;
  --color-accent-2-800: #075985;
  --color-muted: #6b7280;
  --color-soft: #f3f4f6;
  --color-line: #eef0f3;
  --color-ok: #059669;
  --color-warn: #d97706;
  --color-bad: #dc2626;
  color-scheme: light;
}

/* Dark mode is opt-in via data-theme (theme_controller.js). */
[data-theme="dark"] {
  --color-bg: #111827;
  --color-surface: #1f2937;
  --color-text: #e5e7eb;
  --color-divider: #374151;
  --color-accent: #22d3ee;
  --color-accent-100: #164e63;
  --color-accent-200: #155e75;
  --color-accent-600: #67e8f9;
  --color-accent-700: #a5f3fc;
  --color-accent-800: #cffafe;
  --color-accent-2-100: #0c4a6e;
  --color-accent-2-800: #bae6fd;
  --color-muted: #9ca3af;
  --color-soft: #111827;
  --color-line: #2b3444;
  --color-ok: #34d399;
  --color-warn: #fbbf24;
  --color-bad: #f87171;
  /* Industry's neutral ramp ends used by .tag-neutral; without these a neutral
     tag stays a near-white chip in dark mode. */
  --color-neutral-100: #374151;
  --color-neutral-800: #e5e7eb;
  color-scheme: dark;
}

/* ── design-system adjustments ──────────────────────────────────────────── */

.btn-primary { color: #ffffff; }
[data-theme="dark"] .btn-primary { color: #083344; }
.input { background: var(--color-surface); }
a { color: var(--color-accent); }
/* Not on a link dressed as a button: `a:hover` (0,1,1) outranks every
   `.btn-*` colour (0,1,0), so an <a class="btn btn-primary"> took the accent-600
   that is also its hover background and its label vanished under the pointer.
   :where() keeps the specificity at (0,1,1), so a `hover:` utility still wins. */
a:where(:not(.btn)):hover { color: var(--color-accent-600); }
button { font-family: var(--font-body); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-divider); border-radius: 4px; }

/* ── application shell ──────────────────────────────────────────────────── */

html, body { height: 100%; }

/* ── form errors ────────────────────────────────────────────────────────── */

/* field_error_proc marks invalid controls with aria-invalid (no wrapper).
   Only the border changes; the message says what is wrong. */
.input[aria-invalid="true"] { border-color: var(--color-bad); }

/* ── the tabular face ───────────────────────────────────────────────────── */

/* Monospace stack for codes (CPF, CEP, phone, council number), read via
   `[font-family:var(--font-mono)]`. Industry has no such token. */
:root { --font-mono: ui-monospace, "SF Mono", Menlo, monospace; }

/* ── entrar (sign-in screen, design 2a) ────────────────────────────────── */
/* Not --color-accent-900: that only stays dark in dark mode by accident
   (600–800 invert), and white text on this panel must stay readable. */
:root { --ck-signin-panel: #083344; }