/* ToolForge Web Design System — drop-in stylesheet
 * Source: design project 5ad56ae4-26c4-412b-ada6-85dbc0547533,
 *         "ToolForge Web Design System.dc.html". Imported 2026-08-07.
 *
 * Every value here is transcribed from that handoff. Do not invent a value.
 * If you need a colour, a size, or a spacing step that is not below, the
 * system does not have one — pick the nearest token instead.
 *
 * Laws
 *   1. One red per view.
 *   2. Yellow never carries text at small sizes — a fill behind ink, or a 4px rule.
 *   3. Only the mark and avatars are round. UI is square.
 *   4. No shadows.
 *   5. One yellow band per page, at the end.
 *   6. Green means healthy, never an action.
 */

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&family=Poppins:wght@400;500;600;700&family=Roboto+Condensed:wght@400;700&display=swap');

:root {
  --tf-ink: #0B0B0B;
  --tf-ink-60: #45423D;
  --tf-muted: #8A857C;
  --tf-line: #DCD8D0;
  --tf-canvas: #F1EFEA;
  --tf-paper: #FFFFFF;

  --tf-red: #C0111B;
  --tf-red-press: #96070F;
  --tf-red-tint: #FBE9EA;
  --tf-yellow: #FFC400;
  --tf-yellow-press: #E6B000;
  --tf-yellow-tint: #FFF6D6;
  --tf-success: #157F3D;

  --tf-hairline-soft: #EEEBE5;
  --tf-row-zebra: #FAF9F6;
  --tf-day-outside: #C6C2BA;
  --tf-on-ink-body: #B8B4AE;
  --tf-on-ink-rule: #262626;
  --tf-pipe-light: #B6B1A8;
  --tf-pipe-dark: #5E5E5E;
  --tf-on-yellow-body: #4A3F00;

  --tf-sans: 'Poppins', system-ui, sans-serif;
  --tf-label: 'Roboto Condensed', sans-serif;
  --tf-mono: 'Geist Mono', ui-monospace, monospace;

  --tf-s1: 4px;  --tf-s2: 8px;  --tf-s3: 12px; --tf-s4: 16px;
  --tf-s5: 24px; --tf-s6: 32px; --tf-s7: 48px; --tf-s8: 64px;
}

/* ---------- base ---------- */

.tf, body.tf {
  margin: 0;
  background: var(--tf-canvas);
  color: var(--tf-ink);
  font-family: var(--tf-sans);
  -webkit-font-smoothing: antialiased;
}
.tf a { color: var(--tf-red); text-decoration: underline; text-underline-offset: 2px; }
.tf a:hover { color: var(--tf-red-press); }

.tf-page { max-width: 1440px; margin: 0 auto; padding: 56px 48px 120px;
           display: flex; flex-direction: column; gap: 64px; }
.tf-section { display: flex; flex-direction: column; gap: 24px; }

/* ---------- type ---------- */

.tf-display { font-size: 56px; font-weight: 600; letter-spacing: -0.03em;  line-height: 1.05; }
.tf-h1      { font-size: 40px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.tf-h2      { font-size: 28px; font-weight: 600; letter-spacing: -0.02em;  line-height: 1.25; }
.tf-h3      { font-size: 20px; font-weight: 600; letter-spacing: -0.01em;  line-height: 1.35; }
.tf-metric  { font-size: 44px; font-weight: 600; letter-spacing: -0.03em;  line-height: 1; }
.tf-body    { font-size: 16px; line-height: 1.7; max-width: 620px; }
.tf-dense   { font-size: 15px; line-height: 1.7; }
.tf-small   { font-size: 14px; line-height: 1.6; color: var(--tf-ink-60); }
.tf-mono    { font-family: var(--tf-mono); font-size: 14px; }

.tf-label   { font-family: var(--tf-label); font-weight: 700; font-size: 12px;
              letter-spacing: 0.13em; text-transform: uppercase; }
.tf-label--muted { color: var(--tf-muted); }
.tf-eyebrow { font-family: var(--tf-label); font-weight: 700; font-size: 13px;
              letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- buttons ---------- */

.tf-btn {
  font-family: var(--tf-sans); font-size: 15px; font-weight: 600;
  padding: 12px 26px; border: 2px solid transparent; border-radius: 0;
  cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
}
.tf-btn--primary   { color: #fff; background: var(--tf-red); border-color: var(--tf-red); }
.tf-btn--primary:hover { background: var(--tf-red-press); border-color: var(--tf-red-press); }

.tf-btn--secondary { color: var(--tf-ink); background: #fff; border-color: var(--tf-ink); }
.tf-btn--secondary:hover { background: var(--tf-ink); color: #fff; }

.tf-btn--highlight { color: var(--tf-ink); background: var(--tf-yellow); border-color: var(--tf-yellow); }
.tf-btn--highlight:hover { background: var(--tf-yellow-press); border-color: var(--tf-yellow-press); }

.tf-btn--ink       { color: #fff; background: var(--tf-ink); border-color: var(--tf-ink); }
.tf-btn--ink:hover { background: var(--tf-red); border-color: var(--tf-red); }

.tf-btn--ghost     { color: var(--tf-ink); background: transparent; padding: 12px 20px;
                     text-decoration: underline; text-underline-offset: 4px; }
.tf-btn--ghost:hover { color: var(--tf-red); }

.tf-btn--onink     { color: #fff; background: transparent; border-color: #fff; }
.tf-btn--onink:hover { background: #fff; color: var(--tf-ink); }

.tf-btn[disabled], .tf-btn--disabled {
  color: var(--tf-muted); background: var(--tf-canvas);
  border-color: var(--tf-line); cursor: not-allowed;
}
.tf-btn--sm { font-size: 13px; padding: 8px 18px; }
.tf-btn--lg { font-size: 17px; padding: 16px 34px; }
.tf-btn--hero { font-size: 16px; padding: 14px 30px; }

/* ---------- forms ---------- */

.tf-field { display: flex; flex-direction: column; gap: 8px; }
.tf-field > label { font-family: var(--tf-label); font-weight: 700; font-size: 12px;
                    letter-spacing: 0.13em; text-transform: uppercase; color: var(--tf-ink); }
.tf-input, .tf-select, .tf-textarea {
  font-family: var(--tf-sans); font-size: 15px; color: var(--tf-ink);
  padding: 12px 14px; border: 2px solid var(--tf-ink); background: #fff;
  outline: none; border-radius: 0;
}
.tf-input:focus, .tf-textarea:focus, .tf-select:focus { border-color: var(--tf-red); }
.tf-textarea { resize: vertical; }
.tf-select { appearance: none; padding-right: 44px; width: 100%; }
.tf-help { font-size: 13px; color: var(--tf-muted); }

.tf-field--error > label { color: var(--tf-red); }
.tf-field--error .tf-input { border-color: var(--tf-red); background: var(--tf-red-tint);
                             font-family: var(--tf-mono); }
.tf-field--error .tf-help { color: var(--tf-red); font-weight: 500; }

.tf-input[disabled] { color: var(--tf-muted); border-color: var(--tf-line); background: var(--tf-canvas); }
.tf-field--disabled > label { color: var(--tf-muted); }

.tf-check { width: 20px; height: 20px; border: 2px solid var(--tf-ink); background: #fff;
            display: flex; align-items: center; justify-content: center; flex: none; }
.tf-check--on { background: var(--tf-red); }
.tf-check--on::after { content: ''; width: 8px; height: 8px; background: #fff; }
.tf-radio { width: 20px; height: 20px; border: 2px solid var(--tf-ink); border-radius: 50%;
            background: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.tf-radio--on::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--tf-red); }

.tf-toggle { width: 52px; height: 28px; border: 2px solid var(--tf-line); background: #fff;
             display: flex; align-items: center; justify-content: flex-start; padding: 0 3px;
             box-sizing: border-box; cursor: pointer; }
.tf-toggle::after { content: ''; width: 20px; height: 20px; background: var(--tf-line); }
.tf-toggle--on { background: var(--tf-red); border-color: var(--tf-red); justify-content: flex-end; }
.tf-toggle--on::after { background: #fff; }

.tf-range { height: 6px; background: var(--tf-line); position: relative; }
.tf-range__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tf-ink); }
.tf-range__thumb { position: absolute; top: -7px; width: 20px; height: 20px;
                   background: var(--tf-red); margin-left: -10px; }

/* ---------- status ---------- */

.tf-badge { font-family: var(--tf-label); font-weight: 700; font-size: 12px; letter-spacing: 0.11em;
            text-transform: uppercase; padding: 6px 12px; display: inline-block; }
.tf-badge--default { background: var(--tf-ink); color: #fff; }
.tf-badge--failed  { background: var(--tf-red); color: #fff; }
.tf-badge--warn    { background: var(--tf-yellow); color: var(--tf-ink); }
.tf-badge--ok      { background: var(--tf-success); color: #fff; }
.tf-badge--outline { background: #fff; color: var(--tf-ink); border: 2px solid var(--tf-ink); padding: 4px 12px; }
.tf-badge--muted   { background: var(--tf-canvas); color: var(--tf-ink-60); }
.tf-badge--sm      { font-size: 11px; padding: 5px 10px; }

.tf-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tf-dot--ok { background: var(--tf-success); }
.tf-dot--fail { background: var(--tf-red); }
.tf-dot--warn { background: var(--tf-yellow); }

.tf-alert { display: flex; gap: 16px; padding: 16px 20px; border-left: 6px solid var(--tf-ink);
            background: var(--tf-canvas); }
.tf-alert__glyph { font-family: var(--tf-mono); font-weight: 700; font-size: 15px; flex: none; }
.tf-alert__title { font-size: 15px; font-weight: 600; }
.tf-alert__body  { font-size: 14px; color: var(--tf-ink-60); }
.tf-alert--error { background: var(--tf-red-tint); border-left-color: var(--tf-red); }
.tf-alert--error .tf-alert__glyph { color: var(--tf-red); }
.tf-alert--error .tf-alert__title { color: var(--tf-red-press); }
.tf-alert--warn  { background: var(--tf-yellow-tint); border-left-color: var(--tf-yellow); }

.tf-toast { display: flex; gap: 20px; align-items: center; background: var(--tf-ink);
            padding: 16px 20px; width: 520px; max-width: 100%; color: #fff; font-size: 15px; }
.tf-toast__dismiss { font-family: var(--tf-label); font-weight: 700; font-size: 12px;
                     letter-spacing: 0.11em; color: var(--tf-yellow); cursor: pointer; }

/* ---------- cards ---------- */

.tf-card { background: #fff; border: 1px solid var(--tf-line); padding: 30px;
           display: flex; flex-direction: column; gap: 16px; }
.tf-card--accent { padding: 0; }
.tf-card--accent .tf-card__cap { height: 8px; background: var(--tf-red); }
.tf-card__link { font-family: var(--tf-label); font-weight: 700; font-size: 13px;
                 letter-spacing: 0.11em; color: var(--tf-red); text-decoration: none; }

.tf-tile { background: #fff; border: 1px solid var(--tf-line); padding: 26px;
           display: flex; flex-direction: column; gap: 10px; }
.tf-tile__label { font-family: var(--tf-label); font-weight: 700; font-size: 12px;
                  letter-spacing: 0.13em; text-transform: uppercase; color: var(--tf-muted); }
.tf-tile__value { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.tf-tile__delta { font-size: 14px; color: var(--tf-ink-60); }
.tf-tile--ink { background: var(--tf-ink); border: none; }
.tf-tile--ink .tf-tile__value { color: #fff; }
.tf-tile--ink .tf-tile__delta { color: var(--tf-yellow); }
.tf-tile--yellow { background: var(--tf-yellow); border: none; }
.tf-tile--yellow .tf-tile__label, .tf-tile--yellow .tf-tile__delta { color: var(--tf-ink); }

.tf-avatar { border-radius: 50%; border: 3px solid var(--tf-ink); box-sizing: border-box;
             background-size: 174%; background-position: 40% 39%; background-repeat: no-repeat; }
.tf-avatar--40 { width: 40px; height: 40px; border-width: 3px; }
.tf-avatar--56 { width: 56px; height: 56px; border-width: 4px; }
.tf-avatar--64 { width: 64px; height: 64px; border-width: 4px; }
.tf-avatar--80 { width: 80px; height: 80px; border-width: 5px; }

/* ---------- table ---------- */

.tf-table { background: #fff; border: 1px solid var(--tf-line); }
.tf-table__head { background: var(--tf-ink); color: #fff; font-family: var(--tf-label);
                  font-weight: 700; font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; }
.tf-table__head > * { padding: 14px 20px; }
.tf-table__row { border-bottom: 1px solid var(--tf-hairline-soft); font-size: 15px; align-items: center; }
.tf-table__row > * { padding: 16px 20px; }
.tf-table__row:nth-child(even) { background: var(--tf-row-zebra); }
.tf-table__foot { display: flex; align-items: center; justify-content: space-between;
                  padding: 16px 20px; border-top: 1px solid var(--tf-line); }
.tf-page-btn { font-family: var(--tf-mono); font-size: 14px; padding: 8px 14px;
               border: 2px solid var(--tf-line); cursor: pointer; }
.tf-page-btn:hover { border-color: var(--tf-ink); }
.tf-page-btn--on { border-color: var(--tf-ink); background: var(--tf-ink); color: #fff; }

/* ---------- navigation ---------- */

.tf-topbar { background: var(--tf-ink); display: flex; align-items: center;
             justify-content: space-between; padding: 0 28px; height: 76px; }
.tf-topbar__link { color: var(--tf-muted); font-size: 15px; font-weight: 500; cursor: pointer; }
.tf-topbar__link:hover { color: #fff; }
.tf-topbar__link--on { color: #fff; border-bottom: 3px solid var(--tf-red); padding-bottom: 4px; }

.tf-side { width: 260px; background: #fff; border: 1px solid var(--tf-line); padding: 20px 0; flex: none; }
.tf-side__item { display: flex; align-items: center; gap: 12px; padding: 12px 22px;
                 border-left: 4px solid transparent; font-size: 15px; color: var(--tf-ink-60); cursor: pointer; }
.tf-side__item:hover { background: var(--tf-row-zebra); }
.tf-side__item--on { background: var(--tf-canvas); border-left-color: var(--tf-red);
                     color: var(--tf-ink); font-weight: 600; }

.tf-crumbs { display: flex; gap: 10px; font-family: var(--tf-label); font-weight: 700;
             font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tf-muted); }
.tf-crumbs__current { color: var(--tf-ink); }

.tf-tabs { display: flex; border-bottom: 2px solid var(--tf-line); }
.tf-tab { font-size: 15px; color: var(--tf-ink-60); padding: 12px 22px; cursor: pointer; }
.tf-tab:hover { color: var(--tf-ink); }
.tf-tab--on { font-weight: 600; color: var(--tf-ink); border-bottom: 3px solid var(--tf-ink); margin-bottom: -2px; }

.tf-menu { border: 2px solid var(--tf-ink); background: #fff; }
.tf-menu__list { border-top: 2px solid var(--tf-ink); }
.tf-menu__item { padding: 10px 16px; font-size: 15px; cursor: pointer; }
.tf-menu__item:hover { background: var(--tf-canvas); }
.tf-menu__item--on { background: var(--tf-canvas); }
.tf-menu__item--danger { color: var(--tf-red); }
.tf-menu__item--danger:hover { background: var(--tf-red-tint); }

/* ---------- overlays ---------- */

.tf-scrim { background: var(--tf-ink-60); padding: 44px; display: flex;
            align-items: center; justify-content: center; }
.tf-modal { background: #fff; width: 100%; max-width: 520px; border: 3px solid var(--tf-ink); }
.tf-modal__title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.tf-modal__actions { display: flex; justify-content: flex-end; gap: 12px; padding: 26px 32px 28px; }

.tf-progress { height: 8px; background: var(--tf-line); }
.tf-progress__fill { height: 100%; background: var(--tf-red); }

.tf-spinner { width: 28px; height: 28px; border: 3px solid var(--tf-line);
              border-top-color: var(--tf-red); border-radius: 50%; animation: tf-spin 0.8s linear infinite; }
@keyframes tf-spin { to { transform: rotate(360deg); } }

.tf-skeleton { height: 14px; background: linear-gradient(90deg, #EEEBE5 0%, #F7F5F1 50%, #EEEBE5 100%);
               background-size: 320px 100%; animation: tf-shimmer 1.4s linear infinite; }
@keyframes tf-shimmer { 0% { background-position: -320px 0; } 100% { background-position: 320px 0; } }

.tf-empty { background: #fff; border: 1px solid var(--tf-line); padding: 36px 28px;
            display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }

.tf-drawer { width: 340px; background: #fff; border-left: 3px solid var(--tf-ink);
             display: flex; flex-direction: column; }

/* ---------- terminal ---------- */

.tf-term { background: var(--tf-ink); }
.tf-term__head { display: flex; align-items: center; gap: 12px; padding: 14px 20px;
                 border-bottom: 1px solid var(--tf-on-ink-rule); }
.tf-term__body { padding: 22px 24px; font-family: var(--tf-mono); font-size: 14px;
                 line-height: 1.9; color: var(--tf-muted); }
.tf-term__prompt { color: var(--tf-yellow); }
.tf-term__cmd { color: #fff; }
.tf-term__ok { color: var(--tf-success); }
.tf-term__fail { color: var(--tf-red); }

.tf-tooltip { background: var(--tf-ink); color: #fff; font-size: 13px; padding: 8px 12px; }
.tf-key { font-family: var(--tf-mono); font-size: 13px; border: 2px solid var(--tf-ink);
          border-bottom-width: 4px; padding: 3px 9px; background: #fff; }

/* ---------- inputs 2 ---------- */

.tf-search { display: flex; border: 2px solid var(--tf-ink); }
.tf-search__prefix { padding: 11px 14px; font-family: var(--tf-mono); font-size: 15px;
                     color: var(--tf-muted); border-right: 2px solid var(--tf-ink); }
.tf-search input { font-family: var(--tf-sans); font-size: 15px; padding: 11px 14px;
                   border: none; outline: none; flex: 1; }

.tf-chip { display: inline-flex; align-items: center; gap: 9px; font-size: 14px;
           background: var(--tf-ink); color: #fff; padding: 8px 14px; cursor: pointer; }
.tf-chip__x { font-family: var(--tf-mono); color: var(--tf-yellow); }
.tf-chip--add { background: none; color: var(--tf-ink-60); border: 2px solid var(--tf-line); padding: 6px 14px; }
.tf-chip--add:hover { border-color: var(--tf-ink); color: var(--tf-ink); }

.tf-seg { display: inline-flex; border: 2px solid var(--tf-ink); width: fit-content; }
.tf-seg > * { font-size: 14px; padding: 10px 20px; cursor: pointer; }
.tf-seg > * + * { border-left: 2px solid var(--tf-ink); }
.tf-seg > *:hover { background: var(--tf-canvas); }
.tf-seg__on { background: var(--tf-ink); color: #fff; font-weight: 600; }

.tf-drop { border: 2px dashed var(--tf-line); padding: 28px; display: flex; flex-direction: column;
           align-items: center; gap: 8px; text-align: center; cursor: pointer; }
.tf-drop:hover { border-color: var(--tf-red); background: var(--tf-red-tint); }

/* ---------- steps, timeline, lists ---------- */

.tf-step { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
           font-family: var(--tf-mono); font-size: 14px; box-sizing: border-box;
           border: 2px solid var(--tf-line); color: var(--tf-muted); }
.tf-step--done { background: var(--tf-ink); color: #fff; border-color: var(--tf-ink); }
.tf-step--now  { background: var(--tf-red); color: #fff; border-color: var(--tf-red); }

.tf-tl__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--tf-line); flex: none; }
.tf-tl__dot--now { background: var(--tf-red); }
.tf-tl__dot--past { background: var(--tf-ink); }
.tf-tl__rail { width: 2px; flex: 1; background: var(--tf-line); }
.tf-tl__meta { font-family: var(--tf-mono); font-size: 12px; color: var(--tf-muted); }

.tf-row { display: flex; align-items: center; gap: 20px; padding: 18px 24px;
          border-bottom: 1px solid var(--tf-hairline-soft); }

.tf-acc__head { display: flex; align-items: center; justify-content: space-between;
                padding: 18px 24px; cursor: pointer; border-bottom: 1px solid var(--tf-hairline-soft); }
.tf-acc__head--open { border-bottom: 2px solid var(--tf-ink); }
.tf-acc__head:hover { background: var(--tf-row-zebra); }
.tf-acc__glyph { font-family: var(--tf-mono); font-size: 16px; }
.tf-acc__head--open .tf-acc__glyph { color: var(--tf-red); }
.tf-acc__body { padding: 18px 24px; font-size: 15px; line-height: 1.7; color: var(--tf-ink-60);
                border-bottom: 1px solid var(--tf-hairline-soft); }

/* ---------- marketing ---------- */

.tf-hero { background: var(--tf-ink); padding: 72px 64px; display: flex; align-items: center; gap: 64px; }
.tf-hero__eyebrow { font-family: var(--tf-label); font-weight: 700; font-size: 13px;
                    letter-spacing: 0.18em; text-transform: uppercase; color: var(--tf-yellow); }
.tf-hero__title { font-size: 56px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
                  color: #fff; max-width: 600px; text-wrap: pretty; }
.tf-hero__body { font-size: 18px; line-height: 1.65; color: var(--tf-on-ink-body); max-width: 520px; }

.tf-price { background: #fff; border: 1px solid var(--tf-line); padding: 32px;
            display: flex; flex-direction: column; gap: 20px; }
.tf-price--on { border: 3px solid var(--tf-red); padding: 30px 30px 32px; position: relative; }
.tf-price__tag { position: absolute; top: -14px; left: 32px; font-family: var(--tf-label);
                 font-weight: 700; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
                 background: var(--tf-red); color: #fff; padding: 5px 12px; }
.tf-price__amount { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }

.tf-band { background: var(--tf-yellow); padding: 44px 48px; display: flex; align-items: center;
           justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.tf-band__sub { font-size: 16px; color: var(--tf-on-yellow-body); }

.tf-footer { background: var(--tf-ink); padding: 48px 44px; display: flex;
             justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.tf-footer a { font-size: 15px; color: #fff; text-decoration: none; }
.tf-footer a:hover { color: var(--tf-yellow); }
.tf-pillars { display: flex; gap: 12px; font-family: var(--tf-label); font-weight: 700;
              font-size: 13px; letter-spacing: 0.11em; text-transform: uppercase; }
.tf-pillars__pipe { color: var(--tf-pipe-light); }
.tf-footer .tf-pillars__pipe { color: var(--tf-pipe-dark); }