/* ClauseAgree — design tokens + component CSS (pure CSS, no framework) */

:root{
  /* Color */
  --ca-bg:            #F5F4FA;
  --ca-surface:       #FFFFFF;
  --ca-surface-alt:   #F8F7FB;
  --ca-surface-sidebar:#F7F6FB;
  --ca-text:          #1D1E29;
  --ca-text-secondary:#6C6D7A;
  --ca-text-tertiary: #9A9AA6;
  --ca-border:        #E4E3EC;
  --ca-border-strong: #D3D2DE;

  --ca-accent:        #5A3FF0;
  --ca-accent-hover:  #4930C9;
  --ca-accent-tint:   #EEEAFE;
  --ca-accent-border: #D9D0FB;

  --ca-success:       #1F7A4D;
  --ca-success-tint:  #E3F6EC;
  --ca-success-border:#BFE6D2;

  --ca-danger:        #C23A2E;
  --ca-danger-hover:  #A32E24;
  --ca-danger-tint:   #FBE7E5;
  --ca-danger-border: #F1C6C1;

  --ca-priority-high:      #DC3D2E;
  --ca-priority-high-tint: #FBE7E5;
  --ca-priority-medium:      #B4680F;
  --ca-priority-medium-tint: #FCEED9;
  --ca-priority-low:       #6C6D7A;
  --ca-priority-low-tint:  #EEEDF2;

  /* Type */
  --ca-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ca-h1-size: 28px; --ca-h1-weight: 800; --ca-h1-line: 1.25;
  --ca-h2-size: 22px; --ca-h2-weight: 700; --ca-h2-line: 1.3;
  --ca-h3-size: 17px; --ca-h3-weight: 700; --ca-h3-line: 1.4;
  --ca-body-size: 15px; --ca-body-weight: 400; --ca-body-line: 1.55;
  --ca-small-size: 13px; --ca-small-weight: 500; --ca-small-line: 1.5;
  --ca-micro-size: 11.5px; --ca-micro-weight: 700; --ca-micro-line: 1.4;

  /* Spacing scale */
  --ca-sp-1: 4px; --ca-sp-2: 8px; --ca-sp-3: 12px; --ca-sp-4: 16px;
  --ca-sp-5: 20px; --ca-sp-6: 24px; --ca-sp-7: 32px; --ca-sp-8: 40px; --ca-sp-9: 48px;

  /* Radius */
  --ca-radius-sm: 6px; --ca-radius-md: 10px; --ca-radius-lg: 14px; --ca-radius-xl: 18px; --ca-radius-pill: 999px;

  /* Shadow */
  --ca-shadow-sm: 0 1px 3px rgba(20,20,50,.06);
  --ca-shadow-md: 0 8px 24px rgba(20,20,50,.06);
  --ca-shadow-lg: 0 8px 30px rgba(20,20,50,.09);
}

/* Reset */
*, *::before, *::after{ box-sizing:border-box; }
body{ margin:0; background:var(--ca-bg); color:var(--ca-text); font-family:var(--ca-font); font-size:var(--ca-body-size); line-height:var(--ca-body-line); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,ul,ol,figure{ margin:0; }
a{ color:var(--ca-accent); text-decoration:none; }
a:hover{ color:var(--ca-accent-hover); text-decoration:underline; }
button, input, select, textarea{ font-family:inherit; }
img,svg{ display:block; }

/* Type utility classes */
.ca-h1{ font-size:var(--ca-h1-size); font-weight:var(--ca-h1-weight); line-height:var(--ca-h1-line); letter-spacing:-.01em; }
.ca-h2{ font-size:var(--ca-h2-size); font-weight:var(--ca-h2-weight); line-height:var(--ca-h2-line); }
.ca-h3{ font-size:var(--ca-h3-size); font-weight:var(--ca-h3-weight); line-height:var(--ca-h3-line); }
.ca-text-secondary{ color:var(--ca-text-secondary); }
.ca-small{ font-size:var(--ca-small-size); font-weight:var(--ca-small-weight); line-height:var(--ca-small-line); }
.ca-micro{ font-size:var(--ca-micro-size); font-weight:var(--ca-micro-weight); line-height:var(--ca-micro-line); text-transform:uppercase; letter-spacing:.05em; }

/* ===== Buttons ===== */
.ca-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:14.5px; font-weight:700; padding:12px 20px; border-radius:var(--ca-radius-md); border:1px solid transparent; cursor:pointer; transition:background .12s ease, border-color .12s ease, color .12s ease; white-space:nowrap; }
.ca-btn--primary{ background:var(--ca-accent); color:#fff; }
.ca-btn--primary:hover{ background:var(--ca-accent-hover); }
.ca-btn--primary:disabled{ background:#C9C2F5; cursor:not-allowed; }
.ca-btn--secondary{ background:#fff; color:var(--ca-text); border-color:var(--ca-border-strong); }
.ca-btn--secondary:hover{ background:var(--ca-surface-alt); border-color:var(--ca-text-tertiary); }
.ca-btn--secondary:disabled{ color:var(--ca-text-tertiary); background:#fff; cursor:not-allowed; }
.ca-btn--danger{ background:#fff; color:var(--ca-danger); border-color:var(--ca-danger-border); }
.ca-btn--danger:hover{ background:var(--ca-danger-tint); }
.ca-btn--ghost{ background:#fff; color:var(--ca-accent); border-color:var(--ca-accent-border); font-weight:600; font-size:13px; padding:7px 12px; }
.ca-btn--ghost:hover{ background:var(--ca-accent-tint); }
.ca-btn--block{ width:100%; }
.ca-btn--sm{ padding:8px 16px; font-size:13.5px; }

/* ===== Badges ===== */
.ca-badge{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:4px 12px; border-radius:var(--ca-radius-pill); line-height:1.3; }
.ca-badge--open{ color:var(--ca-accent); background:var(--ca-accent-tint); }
.ca-badge--agreed{ color:var(--ca-success); background:var(--ca-success-tint); }
.ca-badge--priority-high{ color:#fff; background:var(--ca-priority-high); text-transform:uppercase; letter-spacing:.03em; }
.ca-badge--priority-medium{ color:#fff; background:var(--ca-priority-medium); text-transform:uppercase; letter-spacing:.03em; }
.ca-badge--priority-low{ color:#fff; background:var(--ca-priority-low); text-transform:uppercase; letter-spacing:.03em; }

/* ===== Progress bar ===== */
.ca-progress{ display:flex; flex-direction:column; gap:6px; }
.ca-progress__label{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ca-text-secondary); }
.ca-progress__label strong{ color:var(--ca-text); font-weight:700; }
.ca-progress__track{ height:7px; border-radius:var(--ca-radius-pill); background:var(--ca-border); overflow:hidden; }
.ca-progress__bar{ height:100%; background:var(--ca-accent); border-radius:var(--ca-radius-pill); }

/* ===== Cards ===== */
.ca-card{ background:var(--ca-surface); border:1px solid var(--ca-border); border-radius:var(--ca-radius-lg); box-shadow:var(--ca-shadow-sm); }
.ca-card--pad{ padding:var(--ca-sp-6); }

/* ===== Form fields ===== */
.ca-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--ca-sp-5); }
.ca-field__label{ font-size:13px; font-weight:600; color:var(--ca-text); }
.ca-field__input{ font-size:15px; padding:11px 14px; border:1px solid var(--ca-border-strong); border-radius:var(--ca-radius-md); background:#fff; color:var(--ca-text); outline:none; transition:border-color .12s ease, box-shadow .12s ease; }
.ca-field__input:focus{ border-color:var(--ca-accent); box-shadow:0 0 0 3px var(--ca-accent-tint); }
.ca-field__input::placeholder{ color:var(--ca-text-tertiary); }
.ca-field__hint{ font-size:12.5px; color:var(--ca-text-secondary); }
.ca-field--error .ca-field__input{ border-color:var(--ca-danger); }
.ca-field--error .ca-field__input:focus{ box-shadow:0 0 0 3px var(--ca-danger-tint); }
.ca-field__error{ font-size:12.5px; color:var(--ca-danger); font-weight:600; }

/* ===== Flash messages ===== */
.ca-flash{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--ca-radius-md); font-size:13.5px; font-weight:600; margin-bottom:var(--ca-sp-5); }
.ca-flash--success{ background:var(--ca-success-tint); color:var(--ca-success); border:1px solid var(--ca-success-border); }
.ca-flash--error{ background:var(--ca-danger-tint); color:var(--ca-danger); border:1px solid var(--ca-danger-border); }

/* ===== Position card ===== */
.ca-position{ flex:1; border:1px solid var(--ca-border); border-radius:var(--ca-radius-lg); padding:var(--ca-sp-4) var(--ca-sp-5); background:#fff; }
.ca-position--you{ border-color:var(--ca-accent-border); background:var(--ca-surface-alt); }
.ca-position__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--ca-sp-3); }
.ca-position__name{ font-weight:700; font-size:14.5px; color:var(--ca-text); }
.ca-position__tag{ font-weight:500; font-size:12.5px; color:var(--ca-text-secondary); }
.ca-position__row{ font-size:13px; line-height:1.9; }
.ca-position__row-label{ color:var(--ca-text-secondary); }

/* ===== Proposal card ===== */
.ca-proposal{ border:2px solid var(--ca-accent); border-radius:var(--ca-radius-lg); padding:var(--ca-sp-5) var(--ca-sp-6); background:var(--ca-surface-alt); }
.ca-proposal__head{ display:flex; justify-content:space-between; align-items:center; }
.ca-proposal__eyebrow{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ca-accent); }
.ca-proposal__text{ font-size:17px; font-weight:700; color:var(--ca-text); line-height:1.5; margin-top:10px; }
.ca-proposal__rationale{ font-size:13px; font-style:italic; color:var(--ca-text-secondary); margin-top:6px; }
.ca-proposal__parties{ display:flex; gap:var(--ca-sp-5); margin-top:var(--ca-sp-4); flex-wrap:wrap; }
.ca-proposal__party{ flex:1; min-width:180px; display:flex; align-items:center; justify-content:space-between; background:#fff; border-radius:var(--ca-radius-md); padding:10px 14px; border:1px solid var(--ca-border); }
.ca-proposal__party--accepted{ border-color:var(--ca-success-border); }
.ca-proposal__party-status{ font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; }
.ca-proposal__party-status--accepted{ color:var(--ca-success); }
.ca-proposal__party-status--rejected{ color:var(--ca-danger); }
.ca-proposal__party-status--pending{ color:var(--ca-text-secondary); }
.ca-proposal__actions{ display:flex; gap:var(--ca-sp-3); margin-top:var(--ca-sp-5); }

/* ===== Lock banner ===== */
.ca-lock{ display:flex; align-items:center; gap:10px; border:1px solid var(--ca-success-border); background:var(--ca-success-tint); border-radius:var(--ca-radius-lg); padding:14px 18px; }
.ca-lock__icon{ font-size:18px; }
.ca-lock__title{ font-size:13.5px; font-weight:700; color:var(--ca-success); }
.ca-lock__meta{ font-size:12px; color:var(--ca-text-secondary); }

/* ===== Empty state ===== */
.ca-empty{ text-align:center; padding:var(--ca-sp-9) var(--ca-sp-6); color:var(--ca-text-secondary); }
.ca-empty__icon{ font-size:32px; margin-bottom:var(--ca-sp-3); opacity:.6; }
.ca-empty__title{ font-size:15px; font-weight:700; color:var(--ca-text); margin-bottom:4px; }

/* ===== App shell (sidebar + main) ===== */
.ca-shell{ display:flex; background:#fff; border:1px solid var(--ca-border); border-radius:var(--ca-radius-xl); overflow:hidden; box-shadow:var(--ca-shadow-lg); max-width:1180px; margin:var(--ca-sp-7) auto; }
.ca-sidebar{ width:280px; flex:none; background:var(--ca-surface-sidebar); border-right:1px solid var(--ca-border); padding:var(--ca-sp-6) var(--ca-sp-4); display:flex; flex-direction:column; gap:var(--ca-sp-4); }
.ca-sidebar__back{ font-size:13px; color:var(--ca-text-secondary); display:flex; align-items:center; gap:6px; }
.ca-clause-list{ display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.ca-clause-list__heading{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ca-text-secondary); padding:0 10px 6px; }
.ca-clause-item{ padding:9px 10px; border-radius:var(--ca-radius-sm); font-size:13px; color:var(--ca-text-secondary); display:flex; justify-content:space-between; }
.ca-clause-item--active{ background:var(--ca-accent-tint); font-weight:700; color:var(--ca-accent); }
.ca-main{ flex:1; padding:var(--ca-sp-7) var(--ca-sp-8); min-width:0; }

/* Wordwrap for base clause text box */
.ca-base-wording{ background:var(--ca-surface-alt); border-radius:var(--ca-radius-md); padding:var(--ca-sp-4) var(--ca-sp-5); margin-top:var(--ca-sp-5); }
.ca-base-wording__label{ font-size:12px; font-weight:600; color:var(--ca-text-secondary); margin-bottom:5px; }

/* Nav / top bar shared */
.ca-topbar{ display:flex; align-items:center; justify-content:space-between; padding:var(--ca-sp-5) var(--ca-sp-8); background:#fff; border-bottom:1px solid var(--ca-border); }
.ca-logo{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; color:var(--ca-text); }

/* Contract list (dashboard) */
.ca-contract-list{ display:flex; flex-direction:column; gap:var(--ca-sp-4); }
.ca-contract-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--ca-sp-5); padding:var(--ca-sp-5) var(--ca-sp-6); }
.ca-contract-row__progress{ width:220px; flex:none; }

/* Auth card */
.ca-auth{ max-width:420px; margin:var(--ca-sp-9) auto; }

/* Table-ish parties list */
.ca-party-row{ display:flex; align-items:center; justify-content:space-between; padding:var(--ca-sp-4) 0; border-bottom:1px solid var(--ca-border); }
.ca-party-row:last-child{ border-bottom:none; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .ca-shell{ flex-direction:column; margin:0; border-radius:0; }
  .ca-sidebar{ width:auto; border-right:none; border-bottom:1px solid var(--ca-border); flex-direction:row; overflow-x:auto; align-items:center; }
  .ca-clause-list{ flex-direction:row; }
  .ca-main{ padding:var(--ca-sp-6) var(--ca-sp-5); }
  .ca-proposal__parties{ flex-direction:column; }
}
@media (max-width: 640px){
  .ca-topbar{ padding:var(--ca-sp-4); }
  .ca-position{ min-width:0; }
  div[style*="display:flex"].ca-positions, .ca-positions{ flex-direction:column; }
  .ca-contract-row{ flex-direction:column; align-items:flex-start; gap:var(--ca-sp-3); }
  .ca-contract-row__progress{ width:100%; }
  .ca-proposal__actions{ flex-direction:column; }
  .ca-h1{ font-size:22px; }
}