/* CFO-SME showcase — lean white component layer
 * โทนขาวล้วน · hairline borders · ไม่ถมดำ · flat SaaS
 * สีเป็น channel "R G B" เพื่อให้ Tailwind alpha ทำงาน
 */
:root {
  --c-ink: 24 24 27;        /* near-black text */
  --c-muted: 113 113 122;   /* secondary text */
  --c-faint: 161 161 170;   /* tertiary */
  --c-line: 24 24 27;       /* hairline base (ใช้กับ alpha ต่ำ) */
  --c-surface: 250 250 249; /* page bg */
  --c-card: 255 255 255;    /* card bg */
  --c-accent: 13 148 136;   /* teal เส้นเดียว — ใช้น้อยมาก (active/link) */
}
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; }

/* hairline helper — กรอบเส้นดำบางๆ */
.hair { border: 1px solid rgb(var(--c-line) / 0.12); }
.hair-t { border-top: 1px solid rgb(var(--c-line) / 0.12); }
.hair-b { border-bottom: 1px solid rgb(var(--c-line) / 0.12); }
.hair-r { border-right: 1px solid rgb(var(--c-line) / 0.12); }

/* card — ขาว กรอบบาง ไม่มีเงาหนัก */
.cf-card { background: rgb(var(--c-card)); border: 1px solid rgb(var(--c-line) / 0.12); border-radius: 0.875rem; }

/* logo / icon box — outline ไม่ถม */
.cf-mark { border: 1.5px solid rgb(var(--c-ink)); border-radius: 0.6rem; display: grid; place-items: center; color: rgb(var(--c-ink)); }
.cf-iconbox { border: 1px solid rgb(var(--c-line) / 0.18); border-radius: 0.625rem; display: grid; place-items: center; color: rgb(var(--c-ink)); background: rgb(var(--c-card)); }

/* eyebrow */
.cf-eyebrow { font-family: "Poppins"; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--c-muted)); font-weight: 600; }

/* chips — outline only */
.cf-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; padding: 0.22rem 0.6rem; border-radius: 9999px; border: 1px solid rgb(var(--c-line) / 0.15); color: rgb(var(--c-muted)); background: rgb(var(--c-card)); }
.cf-chip-ink { color: rgb(var(--c-ink)); border-color: rgb(var(--c-ink) / 0.35); }

/* buttons */
.cf-btn { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; font-weight: 500; padding: 0.5rem 0.95rem; border-radius: 0.625rem; border: 1px solid rgb(var(--c-line) / 0.16); color: rgb(var(--c-ink)); background: rgb(var(--c-card)); transition: .15s; }
.cf-btn:hover { border-color: rgb(var(--c-ink) / 0.35); }
.cf-btn-primary { background: rgb(var(--c-ink)); color: #fff; border-color: rgb(var(--c-ink)); }  /* CTA เดียว/หน้า */
.cf-btn-primary:hover { opacity: .9; }

/* step list */
.cf-step { position: relative; padding-left: 3.1rem; }
.cf-step::before { content: ""; position: absolute; left: 1.05rem; top: 2.4rem; bottom: -1.1rem; width: 1px; background: rgb(var(--c-line) / 0.14); }
.cf-step:last-child::before { display: none; }
.cf-step-num { position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 0.65rem; display: grid; place-items: center; font-family: "Poppins"; font-weight: 600; font-size: 0.85rem; color: rgb(var(--c-ink)); border: 1.5px solid rgb(var(--c-ink) / 0.85); background: rgb(var(--c-card)); }

/* callouts — tint บางมาก + เส้นบาง */
.cf-good, .cf-warn, .cf-bad, .cf-info { border-radius: 0.7rem; padding: 0.8rem 1rem; font-size: 0.875rem; display: flex; gap: 0.6rem; border: 1px solid; }
.cf-good { background: rgb(16 185 129 / 0.05); border-color: rgb(16 185 129 / 0.28); color: #0f766e; }
.cf-warn { background: rgb(234 179 8 / 0.06);  border-color: rgb(234 179 8 / 0.35); color: #92660b; }
.cf-bad  { background: rgb(239 68 68 / 0.045); border-color: rgb(239 68 68 / 0.28); color: #b1453a; }
.cf-info { background: rgb(24 24 27 / 0.025);  border-color: rgb(24 24 27 / 0.12); color: rgb(var(--c-ink)); }

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

/* zone pills (forecast) */
.cf-zone { font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 9999px; border: 1px solid; }
.cf-zone-danger  { color: #b1453a; border-color: rgb(239 68 68 / 0.4);  background: rgb(239 68 68 / 0.05); }
.cf-zone-caution { color: #92660b; border-color: rgb(234 179 8 / 0.45); background: rgb(234 179 8 / 0.06); }
.cf-zone-safe    { color: #0f766e; border-color: rgb(16 185 129 / 0.4); background: rgb(16 185 129 / 0.05); }
.cf-zone-free    { color: #1d4ed8; border-color: rgb(59 130 246 / 0.4); background: rgb(59 130 246 / 0.05); }

/* traffic light dot */
.cf-light { width: 0.7rem; height: 0.7rem; border-radius: 9999px; display: inline-block; }
.cf-light-green  { background: #10b981; }
.cf-light-yellow { background: #eab308; }
.cf-light-red    { background: #ef4444; }

/* form inputs — lean, hairline, white */
.cf-label { display:block; font-size:0.75rem; color:rgb(var(--c-muted)); margin-bottom:0.3rem; }
.cf-input { width:100%; border:1px solid rgb(var(--c-line) / 0.18); border-radius:0.625rem; padding:0.5rem 0.7rem; font-size:0.875rem; background:#fff; color:rgb(var(--c-ink)); transition:.15s; }
.cf-input::placeholder { color:rgb(var(--c-faint)); }
.cf-input:focus { outline:none; border-color:rgb(var(--c-accent)); box-shadow:0 0 0 3px rgb(var(--c-accent) / 0.12); }
select.cf-input { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.6rem center; padding-right:1.8rem; cursor:pointer; }
.cf-input-affix { position:relative; }
.cf-input-affix > .suffix { position:absolute; right:0.7rem; top:50%; transform:translateY(-50%); font-size:0.8rem; color:rgb(var(--c-faint)); pointer-events:none; }

/* toast */
.cf-toast { position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(1rem); background:rgb(var(--c-ink)); color:#fff; font-size:0.85rem; padding:0.65rem 1.1rem; border-radius:0.7rem; display:flex; align-items:center; gap:0.5rem; opacity:0; pointer-events:none; transition:.25s; z-index:80; box-shadow:0 8px 24px rgb(0 0 0 / 0.18); }
.cf-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* data table */
.cf-table { width: 100%; border-collapse: collapse; font-size: 0.825rem; }
.cf-table th { text-align: left; font-weight: 500; color: rgb(var(--c-muted)); padding: 0.55rem 0.7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.12); font-size: 0.75rem; }
.cf-table td { padding: 0.6rem 0.7rem; border-bottom: 1px solid rgb(var(--c-line) / 0.08); color: rgb(var(--c-ink)); }
.cf-table tr:last-child td { border-bottom: none; }
.num { font-variant-numeric: tabular-nums; }