/* TenderRadar design tokens — "מסמך רשמי, קריאה מהירה" (official document, fast read).
   Light, paper-and-ink UI with a single construction-orange accent and a
   blueprint-blue seal. Color encodes meaning only. */

:root {
  /* Surfaces & ink */
  --paper: #FAFAF7;        /* app background — warm paper white */
  --surface: #FFFFFF;      /* cards */
  --ink: #1C2B33;          /* primary text — deep blue-ink */
  --ink-soft: #5A6B73;     /* secondary text */
  --line: #E3E5DE;         /* hairline borders */

  /* Accent (CTAs, deadlines, active states ONLY — never large fills) */
  --accent: #E8650D;       /* construction orange */
  --accent-ink: #B14A05;   /* orange text on light (AA) */
  --accent-wash: #FCEFE4;  /* faint orange tint for chips/hover */
  --accent-glow: rgba(232, 101, 13, .22);  /* halo for the nav nudge */

  /* Condition states */
  /* 4.80:1 on --ok-wash, 5.47:1 on white, and 5.47:1 behind white where it
     is used as a fill. Was #1E7F4F, which read 4.38:1 on its own wash —
     under AA for the pills built from that pair. */
  --ok: #1C784B;
  --bad: #C13A2E;
  --check: #B07905;
  --ok-wash: #E7F3EC;
  --bad-wash: #FBEAE8;
  --check-wash: #FBF1DD;

  /* Official touches */
  --seal: #16557A;         /* blueprint blue — score seal, logo mark */
  --seal-wash: #E8EEF3;

  /* Three values the free-site CSS had been writing as literals, which is
     why they could not follow a theme. Several rules already referenced
     them as var(--x, #literal) fallbacks — those now resolve. */
  --line-hover: #D3D6CD;   /* a border under the cursor */
  --wash: #F7F7F4;         /* the faintest hover fill */
  --live: #1A7F4B;         /* "open" green — a state, not a brand colour */

  /* Button system (T-ILBTN, IL public surfaces): seal-blue fill with a thin
     orange signature base line. --accent itself is untouched. */
  /* The accent used as a GROUND behind text. In LIGHT these are the brand's
     own values — the fill is #E8650D and the hover is the deeper #B14A05,
     exactly as before this token existed. The token earns its place in DARK,
     where the fill lifts and the writing on it becomes ink.

     Known and accepted: white on #E8650D is 3.33:1, under the 4.5 bar, and no
     text colour rescues it (dark ink on that orange reaches 4.37). Passing
     would mean giving up the brand orange — #C4550B is the least darkening
     that clears it at 4.51 — and that is a brand decision, not a CSS one. */
  --accent-fill: var(--accent);
  --accent-fill-hover: var(--accent-ink);
  --on-accent: #FFFFFF;

  --btn: var(--seal);            /* button fill = blueprint blue #16557A */
  --btn-hover: #10425F;          /* seal, darkened; AA with white text */
  --btn-line: var(--accent);     /* the signature base line */

  /* Elevation (max allowed) */
  --shadow: 0 1px 3px rgb(28 43 51 / 0.08);
  --shadow-card: 0 1px 2px rgb(28 43 51 / 0.06), 0 2px 8px rgb(28 43 51 / 0.05);

  /* Radius — one language */
  --r-card: 10px;
  --r-control: 8px;

  /* Spacing unit = 4px */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Type scale: 13 / 15 / 18 / 24 / 36 / 56 */
  --t-xs: 13px; --t-sm: 15px; --t-md: 18px; --t-lg: 24px; --t-xl: 36px; --t-2xl: 56px;
  /* An alias the admin panels already reach for. It was never defined, so
     `font-size: var(--t-base)` on a card heading silently did nothing and
     the heading inherited 15px. Defined here AS that size, so the rule now
     resolves and nothing on screen moves. */
  --t-base: var(--t-sm);

  --font-display: "Secular One", "Heebo", system-ui, sans-serif;
  --font-body: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;

  --maxw: 1120px;
}

/* ══ Dark mode, signed-in app ═══════════════════════════════════════════════
   Written by _theme_head.html before the first paint, so there is no flash of
   the light theme. Scoped to body.app — the signed-in shell — so the marketing
   pages that share this stylesheet keep the single palette they were designed
   for.

   The ground is the brand's own ink (#1C2B33) taken darker rather than a
   neutral grey, so the product reads as itself with the lights off rather than
   as a different product. Both brand colours have to come UP to stay legible:
   the seal at #16557A on #18232B is 1.5:1, which is invisible.
*/
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body.app {
  --paper: #111A20;
  --surface: #18232B;
  --ink: #E7EDF1;
  --ink-soft: #9DAFBA;
  --line: #2A3A45;
  --line-hover: #3C505D;
  --wash: #1E2A33;

  --seal: #7CB7DE;
  --seal-wash: #1B2E3B;
  --accent: #F5822F;
  --accent-ink: #F19A55;
  --accent-wash: #33241A;
  --accent-glow: rgba(245, 130, 47, .30);

  --ok: #4FC489;   --ok-wash: #14301F;
  --bad: #EC7F72;  --bad-wash: #33201C;
  --check: #DCAE45; --check-wash: #33290F;
  --live: #4FC489;

  /* A fill dark enough for white text (5.49:1). --seal is a TEXT colour here
     and would fail behind one. */
  /* Inverted for a dark ground: the fill lifts to the bright accent and the
     writing on it becomes ink (8.7:1). */
  --accent-fill: #F5822F;
  --accent-fill-hover: #F19A55;
  --on-accent: #111A20;

  --btn: #1F6F9E;
  --btn-hover: #2A85B8;

  /* Shadows are cast by a light. On a dark ground the ink-tinted originals
     read as smudges, so elevation comes from the border and the shadow only
     deepens the ground. */
  --shadow: 0 1px 3px rgb(0 0 0 / .5);
  --shadow-card: 0 1px 2px rgb(0 0 0 / .4), 0 2px 8px rgb(0 0 0 / .35);
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; color: var(--ink); margin: 0; }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }

p { margin: 0 0 var(--s3); }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.tnum { font-variant-numeric: tabular-nums; }

/* Visible keyboard focus everywhere */
:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; border-radius: 4px; }

.muted { color: var(--ink-soft); }
.center { text-align: center; }

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