/* TekFidelity Design System - TOKENS (generated from the approved
   prototype; edit the prototype, not this file). */

:root { color-scheme: light; }
:root {
  --signal:        #C1272D;
  --signal-deep:   #8F1D22;
  --signal-soft:   #F6E4E3;
  --obsidian:      #090909;
  --obsidian-2:    #141414;
  --obsidian-3:    #1C1C1C;
  --porcelain:     #F7F4F0;
  --porcelain-2:   #EFE9E2;
  --paper:         #FFFFFF;
  --graphite:      #1A1817;
  --graphite-mute: #6E6964;
  --titanium:      #D8CFC5;
  --hair:          #E4DCD2;   /* lighter rule than --titanium, used by the assessment plate */
  --titanium-2:    #C3B8AC;
  --hair-dark:     #2A2725;
  --ink:           var(--graphite);
  --ink-soft:      var(--graphite-mute);
  --surface:       var(--porcelain);
  --surface-2:     var(--porcelain-2);
  --card:          var(--paper);
  --border:        var(--titanium);
  --on-dark:       #F2ECE5;
  --on-dark-soft:  #B8ACA1;
  --on-dark-mute:  #7C736B;   /* signature credentials; quieter than --on-dark-soft */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sp-3: clamp(1.5rem, 2.4vw, 2.25rem);
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-pill: 999px;
  --ease: cubic-bezier(.22,1,.36,1); --fast: 150ms; --base: 240ms;
  --max: 1240px; --measure: 68ch;
  --shadow: 0 24px 60px -20px rgba(9,9,9,.32);
}

.tf-home {
  margin: 0;
  background: var(--surface); color: var(--ink); font-family: var(--sans);
  font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Plugin-facing aliases.
   The approved prototype names its tokens --signal / --obsidian / --porcelain.
   Components authored inside the plugin (assessment-tool.css) use --tf-*.

   Lives on :root, the SAME scope the source tokens were promoted to above
   (see the site_wide_tokens comment) -- not confined to .tf-home. An earlier
   version aliased on :root while the source tokens were STILL .tf-home-only,
   which is the one combination that cannot work: :root is an ANCESTOR of
   .tf-home, and custom properties are only visible at or below the element
   that declares them, so var(--signal) was invalid at :root and every --tf-*
   alias computed to the guaranteed-invalid value document-wide -- confirmed
   by adversarial audit + live reproduction in Chrome (2026-08-29). Now that
   the source tokens themselves are also on :root, aliasing there is correct.
   -------------------------------------------------------------------------- */
:root {
  --tf-red:          var(--signal);
  --tf-red-deep:     var(--signal-deep);
  --tf-black:        var(--obsidian);
  --tf-black-2:      var(--obsidian-2);
  --tf-black-3:      var(--obsidian-3);
  --tf-porcelain:    var(--porcelain);
  --tf-paper:        var(--paper);
  --tf-ink:          var(--ink);
  --tf-ink-soft:     var(--ink-soft);
  --tf-on-dark:      var(--on-dark);
  --tf-on-dark-soft: var(--on-dark-soft);
  --tf-line:         var(--border);
  --tf-line-dark:    var(--hair-dark);
  --tf-serif:        var(--serif);
  --tf-sans:         var(--sans);
  --tf-mono:         var(--mono);
  --tf-ease:         cubic-bezier(.22,1,.36,1);

  /* Swappable via Settings -> General -> "TekFidelity hero image ID". */
  --tf-hero-image:   url("../images/hero-architectural.jpg");
}

/* --------------------------------------------------------------------------
   Back-to-top control. See tekfidelity-design-system.php: tfds_totop_button().

   "Option B" per approved refinement (2026-08-29): a corner control with a
   genuine chamfer, not a rounded square. clip-path cuts the top-left corner
   off on a diagonal -- the corner facing INTO the page, away from the
   viewport edge the control is tucked into. Border-radius cannot do this (it
   curves; a chamfer is a flat cut), so the shape comes from clip-path and the
   accent border only runs along the two edges the cut does not touch.
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.tf-totop {
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  background: var(--porcelain, #F7F4F0);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  border-right: 1.5px solid var(--signal, #C1272D);
  border-bottom: 1.5px solid var(--signal, #C1272D);
  box-shadow: none; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 220ms cubic-bezier(.22,1,.36,1),
              visibility 220ms cubic-bezier(.22,1,.36,1),
              transform 220ms cubic-bezier(.22,1,.36,1),
              background-color 200ms cubic-bezier(.22,1,.36,1),
              border-color 200ms cubic-bezier(.22,1,.36,1);
}
.tf-totop.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.tf-totop:hover, .tf-totop:focus-visible {
  background: var(--signal, #C1272D);
  border-color: var(--signal, #C1272D);
}
.tf-totop svg {
  width: 17px; height: 17px; color: var(--graphite, #1A1817);
  transition: transform 200ms cubic-bezier(.22,1,.36,1), color 200ms ease;
}
.tf-totop:hover svg, .tf-totop:focus-visible svg { color: #fff; transform: translateY(-2px); }
/* clip-path does not clip `outline`, so a tight offset would sit visually
   inside the missing corner; a slightly wider offset clears the chamfer
   cleanly on all sides instead of just looking mismatched at one corner. */
.tf-totop:focus-visible { outline: 2px solid var(--signal, #C1272D); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .tf-totop, .tf-totop svg { transition: none; } }