/* ==========================================================================
   The Notary Box - design tokens
   --------------------------------------------------------------------------
   Every token is scoped to .tnb so it cannot leak into, or be overridden by,
   the legacy Canvas / Homer / design1 / design2 stylesheets that the internal
   application still loads.

   Evergreen browsers only - custom properties, Grid and clamp() are assumed.
   ========================================================================== */

/* ---- Root font size ------------------------------------------------------
   design2.css, which the shell loads for the internal application, sets
   `html { font-size: 10px }`. Every rem below would otherwise resolve against
   that, rendering this theme at 62.5% of its intended size - 10px body text
   instead of 16px.

   Scoping the correction with :has() means it applies only on pages that
   actually render a .tnb tree. Internal screens contain no .tnb element, so
   they keep the 10px root their stylesheets are built around.

   100% rather than 16px so the theme still follows the reader's browser font
   size preference, which the hardcoded 10px otherwise overrides.
   ------------------------------------------------------------------------ */
html:has(.tnb) {
  font-size: 100%;
}

.tnb {
  /* ---- Brand ------------------------------------------------------------
     Purple is the load-bearing color: 9.4:1 on white, safe for text and fills.

     The two oranges are NOT interchangeable and must not be collapsed:
       --tnb-orange  #F26722  brand orange, 3.1:1 on white.
                              FAILS WCAG AA for text, including white text on
                              an orange fill. Large graphic use only - rules,
                              icon shapes, the cube mark, decorative accents.
       --tnb-action  #C4501A  darkened for interface use, 4.7:1 on white.
                              This is the only orange allowed behind or as
                              text. All CTAs use it.
     -------------------------------------------------------------------- */
  --tnb-purple-900: #2e1749;
  --tnb-purple-700: #43206a;
  --tnb-purple:     #5c2d91;
  --tnb-purple-400: #8b63b8;
  --tnb-purple-200: #c9b6de;
  --tnb-purple-50:  #f1ecf7;

  --tnb-orange:     #f26722;
  --tnb-action:     #c4501a;
  --tnb-action-700: #a03f12;

  /* ---- Neutrals ---------------------------------------------------------
     Tinted very slightly toward purple rather than warm/cream, so large
     flat areas still read as part of the brand.
     -------------------------------------------------------------------- */
  --tnb-white:      #ffffff;
  --tnb-surface:    #f7f5fa;
  --tnb-surface-2:  #efecf4;
  --tnb-border:     #e0dce8;
  --tnb-border-str: #c8c2d4;
  --tnb-muted:      #6b6577;
  --tnb-text:       #1a1723;

  /* ---- Status ---------------------------------------------------------- */
  --tnb-danger:     #b3261e;
  --tnb-danger-bg:  #fdecea;
  --tnb-success:    #1e6b41;
  --tnb-success-bg: #e8f4ed;

  /* ---- Type -------------------------------------------------------------
     Display: Bricolage Grotesque - characterful grotesque, used only at
              headline sizes and always tightly tracked.
     Body:    Public Sans - the USWDS face. A notary platform deals in
              official acknowledgments; the body face is the one designed
              for government forms.
     Mono:    IBM Plex Mono - field labels and eyebrows only, for the
              document-form texture. Never body copy.
     -------------------------------------------------------------------- */
  --tnb-font-display: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --tnb-font-body:    "Public Sans", system-ui, -apple-system, sans-serif;
  --tnb-font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Fluid scale. Bounds are deliberate - the display sizes stop growing at
     1280px so the hero never becomes a billboard on wide monitors. */
  --tnb-text-xs:   0.75rem;
  --tnb-text-sm:   0.875rem;
  --tnb-text-base: 1rem;
  --tnb-text-lg:   1.125rem;
  --tnb-text-xl:   clamp(1.25rem, 0.4vw + 1.15rem, 1.5rem);
  --tnb-text-2xl:  clamp(1.5rem, 1vw + 1.25rem, 2rem);
  --tnb-text-3xl:  clamp(1.875rem, 1.8vw + 1.4rem, 2.75rem);
  --tnb-text-4xl:  clamp(2.25rem, 3.4vw + 1.4rem, 4rem);

  --tnb-leading-tight: 1.08;
  --tnb-leading-snug:  1.3;
  --tnb-leading:       1.6;

  --tnb-track-tight: -0.03em;
  --tnb-track-label:  0.08em;

  --tnb-weight-normal: 400;
  --tnb-weight-medium: 500;
  --tnb-weight-semi:   600;
  --tnb-weight-bold:   700;

  /* ---- Space ------------------------------------------------------------
     4px base. Section rhythm is intentionally large - the direction depends
     on whitespace doing the work that decoration would otherwise do.
     -------------------------------------------------------------------- */
  --tnb-space-1:  0.25rem;
  --tnb-space-2:  0.5rem;
  --tnb-space-3:  0.75rem;
  --tnb-space-4:  1rem;
  --tnb-space-5:  1.5rem;
  --tnb-space-6:  2rem;
  --tnb-space-7:  3rem;
  --tnb-space-8:  4rem;
  --tnb-space-9:  6rem;
  --tnb-section:  clamp(3.5rem, 7vw, 7rem);

  /* ---- Shape ----------------------------------------------------------- */
  --tnb-radius-sm: 4px;
  --tnb-radius:    8px;
  --tnb-radius-lg: 14px;
  --tnb-radius-pill: 999px;

  --tnb-shadow-sm: 0 1px 2px rgba(26, 23, 35, 0.06);
  --tnb-shadow:    0 2px 8px rgba(26, 23, 35, 0.08);
  --tnb-shadow-lg: 0 18px 44px -12px rgba(46, 23, 73, 0.22);

  /* ---- Layout ---------------------------------------------------------- */
  --tnb-container: 1160px;
  --tnb-container-narrow: 560px;
  --tnb-header-h: 72px;

  /* ---- Motion -----------------------------------------------------------
     One easing curve throughout. Multiple curves on one page read as
     inconsistency, not richness.
     -------------------------------------------------------------------- */
  --tnb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tnb-fast: 140ms;
  --tnb-med:  260ms;
  --tnb-slow: 520ms;
}