/* ============================================================
   TOKENS.CSS — TrueTap
   Enterprise design tokens
   ============================================================ */

:root {

  /* --- Backgrounds (layered neutrals) --- */
  --bg-main:           #f3efe8;
  --bg-section-alt:    #ebe5dc;
  --bg-deep:           #e3ddd2;
  --bg-soft:           #ebe5dc;
  --bg-white:          #faf8f5;
  --bg-elevated:       #f7f3ec;

  /* --- Text --- */
  --text-main:         #161616;
  --text-soft:         #4f4b45;
  --text-muted:        #8a857e;

  /* --- Lines & Borders --- */
  --line-soft:         rgba(22, 22, 22, 0.08);
  --line-medium:       rgba(22, 22, 22, 0.16);
  --line-strong:       rgba(22, 22, 22, 0.22);

  /* --- Accent (sparse) --- */
  --accent-green:      #00d285;
  --accent-green-soft: rgba(0, 210, 133, 0.08);
  --accent-green-mid:  rgba(0, 210, 133, 0.22);

  /* --- Shadows (minimal) --- */
  --shadow-none:       none;
  --shadow-whisper:    0 1px 0 rgba(22, 22, 22, 0.04);

  /* --- Typography --- */
  --font-sans:         Inter, "Segoe UI", Roboto, Arial, sans-serif;

  --text-xs:           0.75rem;
  --text-sm:           0.875rem;
  --text-base:         1.0625rem;
  --text-md:           1.125rem;
  --text-lg:           1.25rem;
  --text-xl:           1.375rem;
  --text-2xl:          1.5rem;
  --text-3xl:          clamp(1.75rem, 2.2vw, 2rem);
  --text-4xl:          clamp(2rem, 3.2vw, 2.5rem);
  --text-5xl:          clamp(2.75rem, 5vw, 4rem);

  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semi:       600;
  --weight-bold:       700;

  --leading-tight:     1.15;
  --leading-snug:      1.35;
  --leading-normal:    1.65;
  --leading-loose:     1.75;

  --tracking-tight:    -0.03em;
  --tracking-snug:     -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.1em;

  /* --- Spacing --- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-section-y:     clamp(4.5rem, 10vw, 7.5rem);
  --space-section-y-lg:  clamp(5.5rem, 12vw, 8.5rem);

  /* --- Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --- Motion --- */
  --ease-out-expo:     cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast:   180ms var(--ease-out-expo);
  --transition-base:   420ms var(--ease-out-expo);
  --transition-slow:   680ms var(--ease-out-expo);

  /* --- Layout --- */
  --container-max:     1200px;
  --container-text:    680px;
  --nav-height:        76px;
}