/* ConstraFusion Nexus -- shared design tokens and components.
   Technical-procurement direction: quiet navy ground, gold reserved for
   action/price/selection only, real data carries the visual weight. */

:root {
  /* Surfaces */
  --cfn-bg: #0F1729;
  --cfn-surface: #162942;
  --cfn-surface-raised: #1B3352;

  /* Text */
  --cfn-text: #FFFFFF;
  --cfn-text-muted: #A0AEC0;
  --cfn-text-faint: #64748B;

  /* Accent -- reserved for action / price / selected state only */
  --cfn-gold: #D4A853;
  --cfn-gold-hover: #E6BC6A;

  /* Status (semantic, separate from the gold accent) */
  --cfn-status-yes: #10B981;
  --cfn-status-neutral: #A0AEC0;
  --cfn-status-no: #4A5568;

  /* Dividers */
  --cfn-line: rgba(255,255,255,0.08);
  --cfn-line-gold: rgba(212,168,83,0.15);

  /* Spacing scale */
  --cfn-sp-1: 4px;
  --cfn-sp-2: 8px;
  --cfn-sp-3: 12px;
  --cfn-sp-4: 20px;
  --cfn-sp-5: 32px;
  --cfn-sp-6: 48px;
  --cfn-sp-7: 64px;
  --cfn-sp-8: 96px;

  /* Radius */
  --cfn-radius: 10px;
  --cfn-radius-sm: 6px;

  /* Container */
  --cfn-max-width: 1200px;
}

/* Typography scale */
.cfn-display { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.1; text-wrap: balance; }
.cfn-h1 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; }
.cfn-h2 { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
.cfn-h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.cfn-body { font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.6; color: var(--cfn-text-muted); }
.cfn-meta { font-family: 'Inter', sans-serif; font-size: 0.85rem; color: var(--cfn-text-muted); }
.cfn-label { font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cfn-text-faint); }

/* Container */
.cfn-container { max-width: var(--cfn-max-width); margin: 0 auto; padding: 0 var(--cfn-sp-4); }

/* Divider -- the cheapest structural tool: thin lines instead of boxes */
.cfn-divider { border: none; border-top: 1px solid var(--cfn-line); margin: var(--cfn-sp-5) 0; }

/* Data row (used for specifications, evidence, supplier info -- one consistent pattern everywhere) */
.cfn-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--cfn-sp-3); padding: var(--cfn-sp-3) 0; border-bottom: 1px solid var(--cfn-line); }
.cfn-row:last-child { border-bottom: none; }
.cfn-row-label { color: var(--cfn-text); font-size: 0.9rem; }
.cfn-row-value { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.cfn-row-note { display: block; font-size: 0.78rem; color: var(--cfn-text-faint); margin-top: 0.2rem; font-weight: 400; text-transform: none; letter-spacing: normal; }

/* Status marks -- the "first visual object" per row, per the ChatGPT critique */
.cfn-status { font-weight: 600; font-size: 0.95rem; flex-shrink: 0; }
.cfn-status-yes { color: var(--cfn-status-yes); }
.cfn-status-neutral { color: var(--cfn-status-neutral); }
.cfn-status-no { color: var(--cfn-status-no); }

/* Buttons -- gold reserved for the primary action only */
.cfn-btn-primary { display: inline-block; padding: 0.8rem 1.75rem; background: var(--cfn-gold); color: var(--cfn-bg); border: none; border-radius: var(--cfn-radius-sm); font-weight: 700; font-size: 0.95rem; text-decoration: none; cursor: pointer; text-align: center; transition: background 0.2s; }
.cfn-btn-primary:hover { background: var(--cfn-gold-hover); }
.cfn-btn-secondary { display: inline-block; padding: 0.75rem 1.6rem; background: transparent; color: var(--cfn-text-muted); border: 1px solid var(--cfn-line); border-radius: var(--cfn-radius-sm); font-weight: 600; font-size: 0.9rem; text-decoration: none; cursor: pointer; text-align: center; transition: all 0.2s; }
.cfn-btn-secondary:hover { border-color: var(--cfn-text-muted); color: var(--cfn-text); }

/* Panel -- used sparingly, not as the default wrapper for everything */
.cfn-panel { background: var(--cfn-surface); border-radius: var(--cfn-radius); padding: var(--cfn-sp-5); }

/* Proof strip -- small real numbers, not vague claims */
.cfn-proof-strip { display: flex; gap: var(--cfn-sp-6); flex-wrap: wrap; }
.cfn-proof-item { }
.cfn-proof-value { font-family: 'DM Serif Display', serif; font-size: 1.75rem; color: var(--cfn-gold); }
.cfn-proof-label { font-size: 0.8rem; color: var(--cfn-text-muted); margin-top: 0.15rem; }