/* framework-skin.css
   Framework brand override for the discover viewer + form engine.
   Inherits the Quantum Realm tokens (tokens.css) and overrides surface,
   accent, and type-stack to match useframework.ai's Decisionware identity.

   Brand source: /Users/alecemmons/Library/CloudStorage/Dropbox/FrameWork.AI/index.html
   Fonts: Fraunces (serif), Hanken Grotesk (sans), JetBrains Mono (mono)
   Palette:
     --fwk-bg:       #fafaf6  (paper)
     --fwk-bg-alt:   #f3f3ec  (paper-alt)
     --fwk-ink:      #0c0c0a  (ink)
     --fwk-ink-2:    #2a2a26
     --fwk-muted:    #6e6e64
     --fwk-line:     #d9d8cc
     --fwk-accent:   #9da318  (olive)
     --fwk-accent-deep: #7d8210
     --fwk-accent-soft: #c8cc6a
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Hanken+Grotesk:wght@300..800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --fwk-bg:          #fafaf6;
  --fwk-bg-alt:      #f3f3ec;
  --fwk-ink:         #0c0c0a;
  --fwk-ink-2:       #2a2a26;
  --fwk-muted:       #6e6e64;
  --fwk-line:        #d9d8cc;
  --fwk-accent:      #9da318;
  --fwk-accent-deep: #7d8210;
  --fwk-accent-soft: #c8cc6a;

  --fwk-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --fwk-sans:  'Hanken Grotesk', system-ui, sans-serif;
  --fwk-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Override the discover viewer's quantum-realm tokens for Framework's light theme */
  --qr-bg-deep:       var(--fwk-bg);
  --qr-bg-surface:    var(--fwk-bg);
  --qr-bg-card:       var(--fwk-bg-alt);
  --qr-bg-elevated:   #ffffff;

  --qr-text:          var(--fwk-ink);
  --qr-text-muted:    var(--fwk-ink-2);
  --qr-text-faint:    var(--fwk-muted);
  --qr-text-dim:      var(--fwk-muted);

  --qr-border:        var(--fwk-line);
  --qr-border-subtle: var(--fwk-line);

  /* Map domain accents to a warmer palette around olive */
  --qr-domain-sales:      var(--fwk-accent-deep);
  --qr-domain-production: #c66a2a;
  --qr-domain-shipping:   #8a5a4a;
  --qr-domain-billing:    var(--fwk-accent);

  --qr-success: var(--fwk-accent-deep);
  --qr-info:    var(--fwk-accent-deep);
}

body, html {
  background: var(--fwk-bg);
  color: var(--fwk-ink);
  font-family: var(--fwk-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
* { box-sizing: border-box; }

/* ────────────────────────────────────────────────────────────
   Demo shell layout — split: form left, preview right
   ──────────────────────────────────────────────────────────── */

.fwk-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px);
  max-width: 1440px;
  margin: 0 auto;
}

@media (max-width: 920px) {
  .fwk-shell { grid-template-columns: 1fr; }
}

.fwk-shell__form {
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fwk-shell__preview {
  background: var(--fwk-bg-alt);
  border: 1px solid var(--fwk-line);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 36px);
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.fwk-shell__preview h2 {
  font-family: var(--fwk-serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  font-variation-settings: "opsz" 36;
}

.fwk-shell__preview h2 em {
  font-style: italic;
  color: var(--fwk-accent-deep);
  font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
}

.fwk-shell__preview-empty {
  color: var(--fwk-muted);
  font-size: 15px;
  font-style: italic;
}

.fwk-preview-block {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--fwk-line);
}
.fwk-preview-block:last-child { border-bottom: none; }

.fwk-preview-block__label {
  font-family: var(--fwk-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fwk-muted);
  margin-bottom: 8px;
}

.fwk-preview-block__value {
  font-family: var(--fwk-serif);
  font-size: 18px;
  color: var(--fwk-ink);
  font-variation-settings: "opsz" 36;
  line-height: 1.35;
}

.fwk-preview-list {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.fwk-preview-list li {
  font-size: 14.5px;
  color: var(--fwk-ink-2);
  padding: 6px 0 6px 14px;
  position: relative;
  border-top: 1px dashed var(--fwk-line);
}
.fwk-preview-list li:first-child { border-top: none; }
.fwk-preview-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 13px;
  width: 5px; height: 5px;
  background: var(--fwk-accent);
  border-radius: 50%;
}

/* ────────────────────────────────────────────────────────────
   Form engine styling
   ──────────────────────────────────────────────────────────── */

.fwk-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  font-family: var(--fwk-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--fwk-muted);
}
.fwk-progress__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--fwk-accent);
  box-shadow: 0 0 0 4px rgba(157,163,24,0.16);
}
.fwk-progress__bar {
  flex: 1;
  height: 2px;
  background: var(--fwk-line);
  border-radius: 1px;
  overflow: hidden;
}
.fwk-progress__bar-fill {
  display: block;
  height: 100%;
  background: var(--fwk-accent);
  transition: width .4s ease;
}

.fwk-form__prompt {
  font-family: var(--fwk-serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fwk-ink);
  margin: 0 0 16px;
  font-variation-settings: "opsz" 96, "SOFT" 30;
}

.fwk-form__helper {
  font-size: 15.5px;
  color: var(--fwk-muted);
  margin: 0 0 28px;
  max-width: 560px;
}

.fwk-form__field { margin: 28px 0 36px; max-width: 600px; }

.fwk-input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--fwk-sans);
  font-size: 17px;
  color: var(--fwk-ink);
  background: #fff;
  border: 1px solid var(--fwk-line);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.fwk-input:focus {
  outline: none;
  border-color: var(--fwk-accent);
  box-shadow: 0 0 0 3px rgba(157,163,24,0.16);
}
.fwk-input--textarea { min-height: 140px; resize: vertical; }
.fwk-input--small { padding: 8px 12px; font-size: 14px; }

.fwk-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 24px;
  font-size: 16px;
  cursor: pointer;
}
.fwk-radio input { accent-color: var(--fwk-accent); }

.fwk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fwk-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--fwk-line);
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.fwk-chip input { display: none; }
.fwk-chip.is-selected {
  border-color: var(--fwk-accent-deep);
  background: var(--fwk-accent);
  color: #fff;
}
.fwk-chips__custom { margin-top: 12px; }

.fwk-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.fwk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--fwk-sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s, background .15s, border-color .15s, color .15s;
}
.fwk-btn--primary {
  background: var(--fwk-ink);
  color: var(--fwk-bg);
}
.fwk-btn--primary:hover {
  background: var(--fwk-accent-deep);
  transform: translateY(-1px);
}
.fwk-btn--ghost {
  background: transparent;
  color: var(--fwk-ink-2);
  border-color: var(--fwk-line);
}
.fwk-btn--ghost:hover {
  border-color: var(--fwk-ink);
  color: var(--fwk-ink);
}
.fwk-btn--shake {
  animation: fwk-shake .4s ease;
  border-color: #c44040;
  color: #c44040;
}
@keyframes fwk-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.fwk-complete {
  text-align: center;
  padding: clamp(40px, 6vw, 80px) 0;
}
.fwk-complete__title {
  font-family: var(--fwk-serif);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.fwk-complete__lede {
  color: var(--fwk-muted);
  font-size: 17px;
  margin: 0 auto 32px;
  max-width: 480px;
}
.fwk-complete__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ────────────────────────────────────────────────────────────
   Top bar / nav (keeps on the demo page)
   ──────────────────────────────────────────────────────────── */

.fwk-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250,250,246,0.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--fwk-line);
}
.fwk-topbar__wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px clamp(20px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fwk-topbar__brand {
  font-family: var(--fwk-serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 14, "SOFT" 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fwk-topbar__brand-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--fwk-accent);
  box-shadow: 0 0 0 4px rgba(157,163,24,0.16);
}

/* ────────────────────────────────────────────────────────────
   Industry starter cards (pre-form selection)
   ──────────────────────────────────────────────────────────── */

.fwk-starters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 28px 0;
  max-width: 760px;
}

.fwk-starter {
  border: 1px solid var(--fwk-line);
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  text-align: left;
}
.fwk-starter:hover {
  transform: translateY(-2px);
  border-color: var(--fwk-accent);
  box-shadow: 0 6px 24px rgba(157,163,24,0.12);
}
.fwk-starter__label {
  font-family: var(--fwk-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--fwk-accent-deep);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.fwk-starter__title {
  font-family: var(--fwk-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  font-variation-settings: "opsz" 36;
}
.fwk-starter__desc {
  font-size: 14.5px;
  color: var(--fwk-muted);
  line-height: 1.5;
}