/* EBFactory showcase — component layer (อิง CSS var ของพาเลตต์) */
:root {
  --c-primary: 15 23 42;
  --c-cta: 15 23 42;
  --c-brand: 30 41 59;
  --c-accent: 100 116 139;
  --c-ink: 17 24 39;
  --c-muted: 113 122 138;
  --c-surface: 250 250 250;
  --c-line: 233 233 238;
}
html { scroll-behavior: smooth; }
body { font-family: "Prompt", system-ui, sans-serif; }
.font-display { font-family: "Poppins", system-ui, sans-serif; }
input[type="color"] { -webkit-appearance: none; appearance: none; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }

/* card */
.yp-card { background:#fff; border:1px solid rgb(var(--c-line)); border-radius:0.875rem; }

/* section heading */
.yp-eyebrow { font-family:"Poppins"; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:rgb(var(--c-brand)); font-weight:600; }

/* step list */
.yp-step { position:relative; padding-left:3.25rem; }
.yp-step::before { /* vertical line */
  content:""; position:absolute; left:1.125rem; top:2.5rem; bottom:-1.25rem; width:2px; background:rgb(var(--c-line)); }
.yp-step:last-child::before { display:none; }
.yp-step-num {
  position:absolute; left:0; top:0; width:2.25rem; height:2.25rem; border-radius:0.75rem;
  display:grid; place-items:center; font-family:"Poppins"; font-weight:700; font-size:0.9rem; color:#fff;
  background-image:linear-gradient(135deg, rgb(var(--c-brand)), rgb(var(--c-cta))); }

/* chips */
.yp-chip { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.75rem; padding:0.2rem 0.6rem; border-radius:9999px; border:1px solid rgb(var(--c-line)); color:rgb(var(--c-muted)); background:#fff; }
.yp-chip-brand { color:rgb(var(--c-brand)); background:rgb(var(--c-brand)/0.08); border-color:rgb(var(--c-brand)/0.25); }

/* callouts */
.yp-good, .yp-bad, .yp-info { border-radius:0.75rem; padding:0.85rem 1rem; font-size:0.875rem; display:flex; gap:0.6rem; }
.yp-good { background:rgb(16 185 129 / 0.08); border:1px solid rgb(16 185 129 / 0.25); color:#065f46; }
.yp-bad  { background:rgb(239 68 68 / 0.07);  border:1px solid rgb(239 68 68 / 0.22); color:#991b1b; }
.yp-info { background:rgb(var(--c-accent)/0.08); border:1px solid rgb(var(--c-accent)/0.25); color:rgb(var(--c-primary)); }

/* screen mock */
.yp-screen { border:1px solid rgb(var(--c-line)); border-radius:0.875rem; overflow:hidden; background:#fff; }
.yp-screen-bar { height:2.25rem; display:flex; align-items:center; gap:0.4rem; padding:0 0.8rem; border-bottom:1px solid rgb(var(--c-line)); background:rgb(var(--c-surface)); }
.yp-dot { width:0.5rem; height:0.5rem; border-radius:9999px; }

/* flow connector */
.yp-flow-arrow { color:rgb(var(--c-muted)); }