/* =============================================================
   TraderTax — Shared Design System (Phase 7A)
   -------------------------------------------------------------
   Loaded by cpa.html, dashboard.html, admin.html, cpa-intake.html
   and cpa-billing.html. Marketing pages keep their inline styles.

   This file is ADDITIVE. Existing inline styles are untouched so
   nothing breaks; new code should prefer the .tt-* primitives
   below for consistency.

   Contents:
     1. Design tokens (canonical)
     2. Typography helpers
     3. Button primitives
     4. Card primitives
     5. Form primitives
     6. Badge / pill primitives
     7. Stat tile primitive
     8. Skeleton loader primitive
     9. Empty-state primitive
    10. Toast primitive (used by the error/success system in 7C)
    11. Focus-visible ring (a11y)
============================================================= */


/* 1. TOKENS -------------------------------------------------- */
:root{
  /* Brand */
  --tt-navy:       #0a1628;
  --tt-navy-700:   #142540;
  --tt-green:      #3dba7e;
  --tt-green-600:  #2ea86c;
  --tt-green-50:   #f0fdf7;
  --tt-green-100:  #dcfce7;

  /* Neutrals */
  --tt-bg:         #f7f8fb;
  --tt-surface:    #ffffff;
  --tt-surface-2:  #fafbfc;
  --tt-border:     #e5e8ef;
  --tt-border-strong:#cbd3e0;
  --tt-body:       #374151;
  --tt-muted:      #6b7280;
  --tt-faint:      #9ca3af;

  /* Semantic */
  --tt-red:        #ef4444;
  --tt-red-50:     #fff5f5;
  --tt-red-200:    #fecaca;
  --tt-red-700:    #991b1b;
  --tt-amber:      #d97706;
  --tt-amber-50:   #fffbeb;
  --tt-amber-200:  #fde68a;
  --tt-amber-800:  #92400e;
  --tt-blue:       #1d4ed8;
  --tt-blue-50:    #eff6ff;
  --tt-blue-200:   #bfdbfe;

  /* Radii */
  --tt-r-xs: 4px;
  --tt-r-sm: 6px;
  --tt-r-md: 8px;
  --tt-r-lg: 10px;
  --tt-r-xl: 12px;
  --tt-r-2xl: 16px;
  --tt-r-full: 9999px;

  /* Spacing — 4px base grid */
  --tt-s-1: 4px;   --tt-s-2: 8px;   --tt-s-3: 12px;
  --tt-s-4: 16px;  --tt-s-5: 20px;  --tt-s-6: 24px;
  --tt-s-8: 32px;  --tt-s-10: 40px; --tt-s-12: 48px;

  /* Shadows */
  --tt-shadow-1: 0 1px 2px rgba(10,22,40,.04);
  --tt-shadow-2: 0 4px 12px rgba(10,22,40,.06);
  --tt-shadow-3: 0 12px 32px rgba(10,22,40,.10);
  --tt-shadow-4: 0 24px 64px rgba(10,22,40,.16);

  /* Motion */
  --tt-ease: cubic-bezier(.4,0,.2,1);
  --tt-t-fast: 120ms;
  --tt-t-med:  180ms;
  --tt-t-slow: 260ms;
}

/* 2. TYPOGRAPHY HELPERS ------------------------------------- */
.tt-h-display{font-family:'Syne',sans-serif;font-weight:800;font-size:1.9rem;line-height:1.15;letter-spacing:-.01em;color:var(--tt-navy);}
.tt-h-1{font-family:'Syne',sans-serif;font-weight:700;font-size:1.5rem;line-height:1.25;color:var(--tt-navy);}
.tt-h-2{font-family:'Syne',sans-serif;font-weight:700;font-size:1.15rem;line-height:1.3;color:var(--tt-navy);}
.tt-h-3{font-family:'Syne',sans-serif;font-weight:700;font-size:.98rem;line-height:1.35;color:var(--tt-navy);}
.tt-eyebrow{font-size:.72rem;font-weight:700;color:var(--tt-muted);text-transform:uppercase;letter-spacing:.5px;}
.tt-body{font-size:.92rem;line-height:1.55;color:var(--tt-body);}
.tt-small{font-size:.82rem;line-height:1.5;color:var(--tt-muted);}
.tt-mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.8rem;}

/* 3. BUTTONS ------------------------------------------------ */
.tt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;
  font-family:inherit;font-size:.88rem;font-weight:700;line-height:1;
  border:1.5px solid transparent;border-radius:var(--tt-r-lg);
  cursor:pointer;user-select:none;
  transition:background var(--tt-t-fast) var(--tt-ease),
             border-color var(--tt-t-fast) var(--tt-ease),
             color var(--tt-t-fast) var(--tt-ease),
             transform var(--tt-t-fast) var(--tt-ease),
             box-shadow var(--tt-t-fast) var(--tt-ease);
  box-shadow: var(--tt-shadow-1);
}
.tt-btn:active{transform:translateY(1px);}
.tt-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;}

.tt-btn-primary{background:var(--tt-green);color:#fff;border-color:var(--tt-green);}
.tt-btn-primary:hover:not(:disabled){background:var(--tt-green-600);border-color:var(--tt-green-600);}

.tt-btn-dark{background:var(--tt-navy);color:#fff;border-color:var(--tt-navy);}
.tt-btn-dark:hover:not(:disabled){background:var(--tt-navy-700);border-color:var(--tt-navy-700);}

.tt-btn-ghost{background:transparent;color:var(--tt-navy);border-color:var(--tt-border);}
.tt-btn-ghost:hover:not(:disabled){background:var(--tt-bg);border-color:var(--tt-border-strong);}

.tt-btn-danger{background:transparent;color:var(--tt-red);border-color:var(--tt-red-200);}
.tt-btn-danger:hover:not(:disabled){background:var(--tt-red-50);border-color:var(--tt-red);}

.tt-btn-sm{padding:7px 12px;font-size:.78rem;}
.tt-btn-lg{padding:13px 22px;font-size:.95rem;}

/* 4. CARDS -------------------------------------------------- */
.tt-card{
  background:var(--tt-surface);
  border:1px solid var(--tt-border);
  border-radius:var(--tt-r-xl);
  box-shadow:var(--tt-shadow-1);
  overflow:hidden;
}
.tt-card-pad{padding:var(--tt-s-5);}
.tt-card-head{padding:var(--tt-s-4) var(--tt-s-5);border-bottom:1px solid var(--tt-border);background:var(--tt-surface-2);}

/* 5. FORM PRIMITIVES --------------------------------------- */
.tt-input, .tt-select, .tt-textarea{
  width:100%;
  padding:10px 12px;
  font-family:inherit;font-size:.9rem;line-height:1.35;
  color:var(--tt-body);
  background:var(--tt-surface);
  border:1.5px solid var(--tt-border);
  border-radius:var(--tt-r-md);
  box-sizing:border-box;
  transition:border-color var(--tt-t-fast) var(--tt-ease),
             box-shadow var(--tt-t-fast) var(--tt-ease);
}
.tt-input:focus, .tt-select:focus, .tt-textarea:focus{
  outline:none;
  border-color:var(--tt-green);
  box-shadow:0 0 0 3px rgba(61,186,126,.15);
}
.tt-textarea{min-height:64px;resize:vertical;}
.tt-label{display:block;font-size:.78rem;font-weight:600;color:var(--tt-navy);margin-bottom:6px;}
.tt-hint{font-size:.75rem;color:var(--tt-muted);margin-top:6px;line-height:1.45;}

/* 6. BADGES / PILLS --------------------------------------- */
.tt-badge{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:800;padding:3px 8px;border-radius:var(--tt-r-full);letter-spacing:.3px;line-height:1;}
.tt-badge-green{background:var(--tt-green-50);color:var(--tt-green-600);border:1px solid #c6f0d9;}
.tt-badge-amber{background:var(--tt-amber-50);color:var(--tt-amber-800);border:1px solid var(--tt-amber-200);}
.tt-badge-red{background:var(--tt-red-50);color:var(--tt-red);border:1px solid var(--tt-red-200);}
.tt-badge-blue{background:var(--tt-blue-50);color:var(--tt-blue);border:1px solid var(--tt-blue-200);}
.tt-badge-neutral{background:var(--tt-bg);color:var(--tt-muted);border:1px solid var(--tt-border);}

/* 7. STAT TILE -------------------------------------------- */
.tt-stat{
  background:var(--tt-surface);
  border:1px solid var(--tt-border);
  border-radius:var(--tt-r-lg);
  padding:var(--tt-s-4) var(--tt-s-5);
  box-shadow:var(--tt-shadow-1);
}
.tt-stat-label{font-size:.72rem;font-weight:700;color:var(--tt-muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;}
.tt-stat-value{font-family:'Syne',sans-serif;font-weight:700;font-size:1.6rem;color:var(--tt-navy);line-height:1.1;}
.tt-stat-sub{font-size:.75rem;color:var(--tt-muted);margin-top:4px;}
.tt-stat.green{border-left:3px solid var(--tt-green);}
.tt-stat.amber{border-left:3px solid var(--tt-amber);}
.tt-stat.red{border-left:3px solid var(--tt-red);}
.tt-stat.blue{border-left:3px solid var(--tt-blue);}

/* 8. SKELETON LOADER -------------------------------------- */
.tt-skeleton{
  background:linear-gradient(90deg,#eef0f4 0%,#f5f6f9 50%,#eef0f4 100%);
  background-size:200% 100%;
  animation:tt-skel 1.2s linear infinite;
  border-radius:var(--tt-r-sm);
}
.tt-skel-line{height:12px;margin-bottom:8px;}
.tt-skel-line.w-30{width:30%;} .tt-skel-line.w-50{width:50%;}
.tt-skel-line.w-70{width:70%;} .tt-skel-line.w-90{width:90%;}
.tt-skel-block{height:120px;border-radius:var(--tt-r-lg);}
.tt-skel-chip{display:inline-block;width:90px;height:22px;border-radius:var(--tt-r-full);margin-right:6px;}
@keyframes tt-skel{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* 9. EMPTY STATE ------------------------------------------ */
.tt-empty{
  text-align:center;
  padding:var(--tt-s-10) var(--tt-s-5);
}
.tt-empty-icon{font-size:2.4rem;margin-bottom:var(--tt-s-3);line-height:1;display:block;}
.tt-empty-title{font-family:'Syne',sans-serif;font-weight:700;font-size:1.02rem;color:var(--tt-navy);margin-bottom:var(--tt-s-2);}
.tt-empty-body{font-size:.88rem;color:var(--tt-muted);line-height:1.55;max-width:420px;margin:0 auto var(--tt-s-4);}

/* 10. TOAST ----------------------------------------------- */
.tt-toast-stack{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:10001;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.tt-toast{
  background:var(--tt-navy);color:#fff;
  padding:11px 18px;
  border-radius:var(--tt-r-lg);
  font-size:.86rem;font-weight:600;
  box-shadow:var(--tt-shadow-3);
  animation:tt-toast-in var(--tt-t-med) var(--tt-ease);
  pointer-events:auto;
  display:flex;align-items:center;gap:10px;
  max-width:min(480px, 92vw);
}
.tt-toast.success{background:var(--tt-green-600);}
.tt-toast.error{background:var(--tt-red);}
.tt-toast.warn{background:var(--tt-amber);color:#fff;}
.tt-toast button{
  background:rgba(255,255,255,.18);color:#fff;border:none;
  padding:5px 10px;border-radius:var(--tt-r-sm);
  font-size:.75rem;font-weight:700;cursor:pointer;
}
@keyframes tt-toast-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* 11. FOCUS-VISIBLE (a11y) -------------------------------- */
:where(.tt-btn, .tt-input, .tt-select, .tt-textarea, a, button):focus-visible{
  outline:3px solid rgba(61,186,126,.45);
  outline-offset:2px;
}