/* ============================================================
   DESIGN TOKENS — single source of truth.
   No raw hex values appear anywhere else in the codebase.
   ============================================================ */

:root {
  /* Palette */
  --tt-black:      #0C0D0F;
  --tt-panel:      #16181B;
  --tt-panel-2:    #202327;
  --tt-orange:     #EC6A1E;
  --tt-orange-dim: #B94E12;
  --tt-white:      #FFFFFF;
  --tt-steel:      #9AA0A6;
  --tt-hairline:   #2B2F34;

  /* Radii */
  --tt-radius-frame: 24px;
  --tt-radius-card:  16px;
  --tt-radius-pill:  999px;
  --tt-radius-input: 8px;

  /* Type scale — fluid */
  --tt-size-h1:    clamp(2.75rem, 8vw, 6.5rem);
  --tt-size-h2:    clamp(2rem, 5vw, 4rem);
  --tt-size-h3:    clamp(1.25rem, 2.5vw, 1.75rem);
  --tt-size-body:  1.0625rem;
  --tt-size-small: 0.875rem;
  --tt-size-label: 0.75rem;

  /* Leading */
  --tt-lh-display: 0.92;
  --tt-lh-h2:      0.96;
  --tt-lh-body:    1.65;

  /* Spacing */
  --tt-space-xs:  0.5rem;
  --tt-space-sm:  1rem;
  --tt-space-md:  2rem;
  --tt-space-lg:  4rem;
  --tt-space-xl:  7rem;

  /* Nav height — used to offset hero padding */
  --tt-nav-offset: 5rem;

  /* Transition */
  --tt-transition: 0.2s ease;
  --tt-transition-reveal: 0.4s ease;

  /* Z-indices */
  --tt-z-nav:    100;
  --tt-z-mobile: 99;
  --tt-z-skip:   9999;
}