/* TCM design system v2.0 - colour, spacing, radius, motion tokens.
   Source of truth: Freom\Mantis\3447_brand_design_system\BUILD-SPEC-thecarmovers.md 2.1 / 2.3.

   WHY THIS FILE EXISTS (#3447, 2 Sep 2026): the FAQ build spec 2 requires standalone static
   pages to "import the same token file rather than copying values", because the standalone page
   is the one that will still be showing the old palette in six months. This is that file.

   HONEST CAVEAT: the Vue app does NOT consume this file yet - its palette lives in
   src/assets/styles/variables/_vuetify.scss and still carries the pre-v2.0 values (#FA002C,
   #808080, #F8F7FA). So today this is a second home for the tokens, not a shared one. Point the
   app at these values when v2.0 lands in the app, and delete the duplicates there. Until then,
   any change here must be mirrored, and that is exactly the drift the spec warned about. */

:root {
  --ink:          #101010;  /* display headings, card titles       19.03:1 */
  --body:         #2F2B3D;  /* paragraph copy, form values         13.69:1 */
  --muted:        #595959;  /* labels, captions, nav                7.00:1 */
  --subtle:       #6E6E6E;  /* placeholders, inactive steps         5.10:1 */

  --line:         #DEDEDA;  /* dividers, card borders */
  --line-strong:  #BFC0B9;  /* input outlines */

  --band:         #DADDD8;  /* hero band - the site's signature */
  --ground:       #F5F5F3;  /* page background */
  --surface:      #FFFFFF;  /* cards, quote panel, header */

  --action:       #E00029;  /* every CTA                            5.00:1 */
  --action-hover: #B30021;  /* hover, and the error colour          7.15:1 */
  --action-press: #8F001A;
  --action-tint:  #FCE6EA;  /* secondary button hover fill */

  --error:        #B30021;
  --error-bg:     #FCE6EA;
  --success:      #0E7C43;
  --warning:      #8A5300;
  --star:         #FF9F43;

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px;

  --radius-sm: 6px;   --radius-md: 12px;   --radius-full: 9999px;

  --elev-1: 0 2px 3px -1px rgba(16,16,16,.10), 0 1px 0 0 rgba(25,28,33,.02),
            0 0 0 1px rgba(25,28,33,.08);

  --motion-fast: 120ms;  --motion-base: 200ms;  --motion-slow: 320ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  --control-height: 48px;  --touch-min: 44px;  --input-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}