/* tokens.css - LOCKED design tokens (BUILD_CONTRACT section 9).
   Calm-clinical, RTL-first, WCAG-AA, high-contrast hook body.hc, focus-visible.
   Values are authoritative - do not change without updating the contract. */

:root {
  /* Surfaces / structure */
  --bg: #f5f8f9;
  --surface: #ffffff;
  --surface-2: #eef4f5;
  --border: #dfe7ea;

  /* Ink (text) */
  --ink: #1f2d3a;
  --ink-soft: #5a6b78;
  --ink-faint: #8496a2;

  /* Accent (teal) - required-record marker, primary buttons */
  --accent: #2f8f9d;
  --accent-strong: #216e79;
  --accent-soft: #e3f1f2;

  /* Status colors */
  --ok: #3a9d6b;
  --ok-soft: #e5f3ec;
  --warn: #c2872b;          /* optional (be'et hatsorekh) badge */
  --warn-soft: #f6edda;
  --danger: #c0392b;
  --danger-soft: #f7e4e1;

  /* Shape */
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 3px rgba(31, 45, 58, .08), 0 6px 20px rgba(31, 45, 58, .06);

  /* Spacing / metrics */
  --gap: 16px;
  --maxw: 980px;

  /* Type */
  --font: 'Segoe UI', 'Assistant', 'Heebo', 'Rubik', system-ui, -apple-system, 'Arial Hebrew', sans-serif;

  /* Derived tokens used across components (kept ASCII, calm-clinical). */
  --ring: 2px solid var(--accent);
  --ring-offset: 2px;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --on-accent: #ffffff;      /* text on accent fills - AA on #2f8f9d */
  --overlay: rgba(31, 45, 58, .42);
  --touch: 44px;             /* min touch target */
}

/* High-contrast toggle hook: body.hc raises contrast + thickens borders.
   Applied by the appbar toggle; persisted in app.js. */
body.hc {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f5f6;
  --border: #4a5a66;

  --ink: #10161d;
  --ink-soft: #2b3843;
  --ink-faint: #3d4c57;

  --accent: #16606c;
  --accent-strong: #0c4650;
  --accent-soft: #d7ebed;

  --ok: #1f6e44;
  --ok-soft: #dcefe3;
  --warn: #8f6011;
  --warn-soft: #f3e7cc;
  --danger: #941f13;
  --danger-soft: #f2d9d5;

  --shadow: 0 0 0 1px #10161d;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #10161d;
}

body.hc,
body.hc .card,
body.hc .appbar,
body.hc .form-field input,
body.hc .form-field select,
body.hc .form-field textarea {
  border-width: 2px;
}

/* Global reset scoped to what we author (keeps things predictable, RTL-safe). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* Keyboard accessibility: always-visible focus ring. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Fallback for engines without :focus-visible support. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: none;
}

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

/* Utility: visually hidden but available to assistive tech. */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}