/**
 * Takukan design tokens — transcribed from the Brand System (§07 Tokens).
 * Light is the default; dark shifts the accents, never the roles.
 * Amber #C8963E is a FILL, permanently (2.46:1) — never text, never an icon.
 */
:root {
  /* ground */
  --tk-surface:        #F7F5F1;  /* page */
  --tk-surface-alt:    #EDE8E0;  /* cards, zebra */
  --tk-surface-raised: #FFFFFF;
  --tk-line:           #DBD5CB;

  /* ink */
  --tk-slate:       #1B2A36;  /* 13.13:1 on surface */
  --tk-slate-muted: #57646E;  /*  5.60:1 */

  /* accents */
  --tk-amber-fill: #C8963E;   /*  2.46:1 — FILL ONLY */
  --tk-amber-text: #8A6420;   /*  4.91:1 on surface / white; NOT on surface-alt */
  --tk-teal:       #336968;   /*  5.74:1 */
  --tk-sage:       #3F6B4C;   /*  5.64:1 */
  --tk-clay:       #A85B4C;   /*  4.54:1 */

  /* space — 4px base; nothing outside the scale */
  --tk-space-1: 4px;  --tk-space-2: 8px;  --tk-space-3: 12px; --tk-space-4: 16px;
  --tk-space-5: 24px; --tk-space-6: 32px; --tk-space-7: 48px; --tk-space-8: 64px;

  /* radius */
  --tk-radius-bar: 2px; --tk-radius-input: 6px; --tk-radius-card: 10px; --tk-radius-pill: 999px;

  /* type */
  --tk-font-wordmark: 'Heebo', system-ui, sans-serif;          /* logo only. 300, tracked. Never UI */
  --tk-font-editorial: 'Frank Ruhl Libre', Georgia, serif;
  --tk-font-he:       'Assistant', system-ui, sans-serif;      /* Hebrew UI. Never the logo */
  --tk-font-lt:       'Inter', system-ui, sans-serif;          /* Latin UI */

  /* elevation — slate-tinted, never black */
  --tk-shadow-1: 0 1px 2px rgba(27,42,54,.06), 0 4px 12px rgba(27,42,54,.06);
  --tk-shadow-2: 0 2px 4px rgba(27,42,54,.08), 0 12px 32px rgba(27,42,54,.12);

  /* controls */
  --tk-touch-min: 44px;
  --tk-control-h: 48px;
}

[data-theme="dark"] {
  --tk-surface:        #141F27;
  --tk-surface-alt:    #1E2C36;
  --tk-surface-raised: #1E2C36;
  --tk-line:           #2C3D49;
  --tk-slate:          #E8E4DC;  /* 13.18:1 */
  --tk-slate-muted:    #9AA8B2;  /*  6.86:1 */
  --tk-amber-fill:     #E0B361;
  --tk-amber-text:     #E0B361;  /*  8.59:1 — text-safe in dark */
  --tk-teal:           #6FA9A7;  /*  6.30:1 */
  --tk-sage:           #7FB08C;  /*  6.76:1 */
  --tk-clay:           #D08C7C;  /*  6.15:1 */
}

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tk-surface);
  color: var(--tk-slate);
  font-family: var(--tk-font-he);
  font-size: 16px;
  line-height: 1.625; /* body 16/26 */
  direction: rtl;
}
:lang(en) { font-family: var(--tk-font-lt); }

/* type scale */
.tk-display { font-size: 44px; line-height: 48px; font-weight: 700; letter-spacing: -0.01em; }
.tk-h1 { font-size: 32px; line-height: 40px; font-weight: 700; margin: 0; }
.tk-h2 { font-size: 26px; line-height: 34px; font-weight: 600; margin: 0; }
.tk-h3 { font-size: 21px; line-height: 30px; font-weight: 600; margin: 0; }
.tk-body-lg { font-size: 18px; line-height: 28px; }
.tk-small { font-size: 14px; line-height: 22px; }
.tk-caption { font-size: 12px; line-height: 18px; font-weight: 500; }
.tk-muted { color: var(--tk-slate-muted); }
.tk-num, .tk-price, [data-tnum] { font-variant-numeric: tabular-nums; }

a { color: var(--tk-amber-text); text-decoration: none; border-bottom: 1px solid rgba(138, 100, 32, .35); }
a:hover { color: var(--tk-slate); border-bottom-color: var(--tk-slate); }

/* ── logo: the load-bearing arch ──────────────────────────────────────── */
.tk-logo { display: inline-flex; align-items: center; gap: 11px; border: 0; }
.tk-wordmark {
  font-family: var(--tk-font-wordmark);
  font-weight: 300;
  letter-spacing: .13em; /* Symbol V1.2: .13em Hebrew, text-indent compensates the trailing track */
  text-indent: .13em;
  line-height: 1;
  font-size: 19px;
  color: var(--tk-slate);
}

/* ── buttons — 48px tall, 44px minimum touch; no amber-fill button exists ─ */
.tk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tk-control-h); min-width: var(--tk-touch-min);
  padding: 0 var(--tk-space-5);
  border-radius: var(--tk-radius-input);
  font: inherit; font-weight: 600; font-size: 16px;
  cursor: pointer; border: 1px solid transparent;
  transition: filter .12s ease, background .12s ease;
}
.tk-btn-primary { background: var(--tk-slate); color: var(--tk-surface); }
.tk-btn-primary:hover { filter: brightness(1.15); }
.tk-btn-secondary { background: transparent; color: var(--tk-slate); border-color: var(--tk-slate-muted); }
.tk-btn-tertiary { background: var(--tk-surface-alt); color: var(--tk-slate); }
.tk-btn-danger-outline { background: transparent; color: var(--tk-clay); border-color: var(--tk-clay); }
.tk-btn[disabled] { opacity: .55; cursor: not-allowed; }
.tk-link-btn { background: none; border: 0; color: var(--tk-amber-text); font: inherit; font-weight: 600; cursor: pointer; }

/* ── inputs & chips ───────────────────────────────────────────────────── */
.tk-input {
  width: 100%; min-height: var(--tk-control-h);
  border: 1px solid var(--tk-line); border-radius: var(--tk-radius-input);
  background: var(--tk-surface-raised); color: var(--tk-slate);
  font: inherit; padding: 0 var(--tk-space-4);
}
.tk-input:focus { outline: 2px solid var(--tk-teal); outline-offset: 1px; border-color: var(--tk-teal); }
.tk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 14px;
  border-radius: var(--tk-radius-pill);
  border: 1px solid var(--tk-line); background: var(--tk-surface-raised);
  color: var(--tk-slate); font-size: 14px; font-weight: 600; cursor: pointer;
}
.tk-chip[data-selected="true"], .tk-chip.is-selected { background: var(--tk-slate); color: var(--tk-surface); border-color: var(--tk-slate); }

/* status pills — every pill carries a word; a dot alone is not a status */
.tk-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 12px; border-radius: var(--tk-radius-pill);
  font-size: 13px; font-weight: 600; border: 1px solid transparent;
}
.tk-pill-sage { background: rgba(63,107,76,.12); color: var(--tk-sage); }
.tk-pill-amber { background: rgba(200,150,62,.16); color: var(--tk-amber-text); }
.tk-pill-clay { background: rgba(168,91,76,.12); color: var(--tk-clay); }
.tk-pill-teal { background: rgba(51,105,104,.12); color: var(--tk-teal); }
.tk-pill-outline { background: transparent; color: var(--tk-slate-muted); border-color: var(--tk-line); }

/* ── cards ────────────────────────────────────────────────────────────── */
.tk-card {
  background: var(--tk-surface-raised);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius-card);
  box-shadow: none; /* elevation 0 — border only, cards at rest */
}
.tk-card:hover { box-shadow: var(--tk-shadow-1); }
.tk-panel-sand { background: var(--tk-surface-alt); border-radius: var(--tk-radius-input); padding: var(--tk-space-3) var(--tk-space-4); }

/* ── the reason bar — the signature device ────────────────────────────── */
/* Bars grow leftward from a right-hand axis (RTL). Negatives sit in the
   same stack, same height, same type size — never behind "show more". */
.tk-reasons { display: grid; gap: 7px; margin: var(--tk-space-3) 0; }
.tk-reason { display: grid; grid-template-columns: minmax(0, 1fr) 34px 120px; align-items: center; gap: 10px; }
.tk-reason-label { font-size: 14px; line-height: 22px; text-align: start; }
.tk-reason-value { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; text-align: center; direction: ltr; }
.tk-reason-track { height: 10px; display: flex; justify-content: flex-start; }
.tk-reason-bar { height: 10px; border-radius: var(--tk-radius-bar); min-width: 6px; }
.tk-reason[data-sign="pos"] .tk-reason-value { color: var(--tk-amber-text); }
.tk-reason[data-sign="pos"] .tk-reason-bar { background: var(--tk-amber-fill); }
.tk-reason[data-sign="neg"] .tk-reason-value { color: var(--tk-clay); }
.tk-reason[data-sign="neg"] .tk-reason-bar { background: var(--tk-clay); }
.tk-reason-closing {
  background: var(--tk-surface-alt); border-radius: var(--tk-radius-input);
  padding: 10px 14px; font-size: 14px; line-height: 22px;
}
/* chip scale (web list row): the bar becomes a chip; sign and label never leave */
.tk-reason-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--tk-radius-pill); padding: 2px 10px;
  font-size: 13px; font-weight: 600;
}
.tk-reason-chip[data-sign="pos"] { background: rgba(200,150,62,.16); color: var(--tk-amber-text); }
.tk-reason-chip[data-sign="neg"] { background: rgba(168,91,76,.12); color: var(--tk-clay); }

.tk-score { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-score-label { font-size: 12px; color: var(--tk-slate-muted); }

/* numeric islands stay LTR inside RTL text (prices, ids, phones) */
.tk-ltr { direction: ltr; unicode-bidi: embed; }

/* meta / disclosure captions */
.tk-legal { font-size: 12px; line-height: 18px; color: var(--tk-slate-muted); }

/* focus visibility for keyboard users — WCAG 2.0 AA is a legal requirement */
:focus-visible { outline: 2px solid var(--tk-teal); outline-offset: 2px; }