/* =============================================================================
   Plugmart Theme — "Workshop Blueprint × Thai Warmth"
   Self-completing SaaS portal for Thai SMEs.
   Concept: gaps that complete themselves → the "gap" is the core design object.

   Usage:
     @import url("theme.css");            (or <link rel="stylesheet" href="theme.css">)
   Then apply .pm- classes. Tokens are plain CSS custom properties on :root,
   so they map cleanly onto Tailwind @theme / @thamming/ui later.

   Fonts: Fraunces (display + numerals), IBM Plex Sans Thai (body, Thai+Latin),
          IBM Plex Mono (technical/blueprint annotations).
============================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap");

/* ----------------------------------------------------------------------------
   1. Design tokens
---------------------------------------------------------------------------- */
:root{
  /* surfaces */
  --pm-paper:#F1E8D6;        /* app background — warm workshop paper */
  --pm-paper-2:#E8DCC4;      /* recessed / sidebar surface */
  --pm-card:#FBF6EA;         /* raised card surface */
  --pm-white:#FFFFFF;        /* documents / receipts */

  /* ink */
  --pm-ink:#221E18;          /* primary text & strong borders */
  --pm-ink-soft:#6B6253;     /* secondary text / annotations */
  --pm-on-ink:#F1E8D6;       /* text on dark ink surfaces */

  /* brand accents */
  --pm-clay:#C8512B;         /* PRIMARY — actions, vertical apps, gaps-in-progress */
  --pm-clay-deep:#A23C1C;    /* primary text-on-light / hover */
  --pm-pine:#0E6E5C;         /* COMPLETED / done / common apps */
  --pm-pine-tint:#EAF7F0;    /* text/icon on pine */
  --pm-spark:#CBE94A;        /* the AI "spark" highlight — use sparingly */

  /* lines */
  --pm-line:rgba(34,30,24,.14);
  --pm-line-strong:rgba(34,30,24,.30);

  /* type */
  --pm-font-display:"Fraunces", Georgia, serif;
  --pm-font-body:"IBM Plex Sans Thai", system-ui, sans-serif;
  --pm-font-mono:"IBM Plex Mono", ui-monospace, monospace;

  /* radii */
  --pm-r-sm:9px; --pm-r-md:12px; --pm-r-lg:16px; --pm-r-xl:18px; --pm-r-pill:999px;

  /* shadows — hard offset "printed" feel */
  --pm-shadow:8px 12px 0 rgba(34,30,24,.13);
  --pm-shadow-sm:4px 6px 0 rgba(34,30,24,.12);

  /* motion */
  --pm-ease:cubic-bezier(.2,.7,.3,1);

  /* layout */
  --pm-grid:64px;            /* blueprint grid cell size */
}

/* ----------------------------------------------------------------------------
   2. Base
---------------------------------------------------------------------------- */
.pm-body{
  margin:0; font-family:var(--pm-font-body); line-height:1.5;
  background:var(--pm-paper); color:var(--pm-ink);
  -webkit-font-smoothing:antialiased; position:relative;
}
.pm-body *{box-sizing:border-box}

/* Blueprint grid backdrop — add .pm-grid-bg to a full-bleed element (z-index:0). */
.pm-grid-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--pm-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--pm-line) 1px,transparent 1px);
  background-size:var(--pm-grid) var(--pm-grid);
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 0,#000 40%,transparent 88%);
          mask-image:radial-gradient(ellipse 120% 90% at 50% 0,#000 40%,transparent 88%);
}
/* Paper grain overlay — add .pm-grain to a fixed full-screen element (top z-index). */
.pm-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.38; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
   3. Typography helpers
---------------------------------------------------------------------------- */
.pm-display{font-family:var(--pm-font-display); font-weight:600; letter-spacing:-.02em}
.pm-display-italic{font-family:var(--pm-font-display); font-style:italic; font-weight:500}
.pm-num{font-family:var(--pm-font-display); font-weight:600; font-feature-settings:"tnum"}
.pm-h1{font-family:var(--pm-font-body); font-weight:700; font-size:clamp(38px,5.2vw,66px); line-height:1.04; letter-spacing:-.01em}
.pm-h2{font-family:var(--pm-font-display); font-weight:600; font-size:24px}
/* mono "blueprint" label — e.g. "config · กำลังทำ" or "// section" */
.pm-label{font-family:var(--pm-font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--pm-ink-soft)}
.pm-label--accent{color:var(--pm-clay-deep)}
.pm-eyebrow{font-family:var(--pm-font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--pm-clay-deep); display:inline-flex; align-items:center; gap:10px}
.pm-eyebrow::before{content:"✦"; color:var(--pm-clay)}

/* ----------------------------------------------------------------------------
   4. Buttons
---------------------------------------------------------------------------- */
.pm-btn{
  font-family:var(--pm-font-body); font-weight:600; font-size:14px; cursor:pointer;
  padding:11px 20px; border-radius:var(--pm-r-pill); border:1.5px solid var(--pm-ink);
  background:var(--pm-ink); color:var(--pm-on-ink);
  transition:transform .18s var(--pm-ease), box-shadow .18s var(--pm-ease);
}
.pm-btn:hover{transform:translateY(-2px); box-shadow:var(--pm-shadow-sm)}
.pm-btn--ghost{background:transparent; color:var(--pm-ink)}
.pm-btn--clay{background:var(--pm-clay); border-color:var(--pm-clay); color:var(--pm-pine-tint)}
.pm-btn--spark{background:var(--pm-spark); border-color:var(--pm-spark); color:var(--pm-ink)}

/* ----------------------------------------------------------------------------
   5. Chips & pills
---------------------------------------------------------------------------- */
.pm-chip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:14.5px; padding:9px 18px; border-radius:var(--pm-r-pill);
  border:1.5px solid var(--pm-line-strong); background:var(--pm-card);
  transition:all .18s var(--pm-ease);
}
.pm-chip:hover{border-color:var(--pm-ink); transform:translateY(-2px)}
.pm-chip.is-on{background:var(--pm-clay); color:var(--pm-pine-tint); border-color:var(--pm-clay)}
.pm-pill{
  font-family:var(--pm-font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 14px; border-radius:var(--pm-r-pill); border:1.5px solid var(--pm-ink); background:var(--pm-card);
}

/* ----------------------------------------------------------------------------
   6. Cards
---------------------------------------------------------------------------- */
.pm-card{
  background:var(--pm-card); border:1.5px solid var(--pm-ink); border-radius:var(--pm-r-lg);
  padding:24px; position:relative;
}
.pm-card--raised{box-shadow:var(--pm-shadow)}
.pm-card--hover{transition:transform .2s var(--pm-ease), box-shadow .2s var(--pm-ease); cursor:pointer}
.pm-card--hover:hover{transform:translateY(-4px); box-shadow:var(--pm-shadow)}
/* corner code annotation, e.g. "APP_01" */
.pm-card__code{position:absolute; top:14px; right:14px; font-family:var(--pm-font-mono); font-size:10px; color:var(--pm-ink-soft)}

/* app-card icon tile */
.pm-app-ico{width:46px; height:46px; border-radius:var(--pm-r-md); display:grid; place-items:center; font-size:23px; background:var(--pm-paper-2)}
.pm-app-ico--common{background:var(--pm-pine); color:var(--pm-pine-tint)}     /* common app */
.pm-app-ico--vertical{background:var(--pm-clay); color:var(--pm-pine-tint)}   /* business-type app */

/* "hidden by current mode" treatment */
.pm-dimmed{opacity:.42; filter:saturate(.6)}

/* ----------------------------------------------------------------------------
   7. THE NEED / SLOT — the signature component
      States: reused · done · connect · active · empty (gap) · spark
---------------------------------------------------------------------------- */
.pm-need{
  display:flex; align-items:center; gap:14px; padding:15px;
  border-radius:13px; border:1.5px solid var(--pm-line-strong);
  transition:transform .18s var(--pm-ease); background:transparent;
}
.pm-need__ico{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:none; font-size:18px; font-weight:600; background:var(--pm-paper-2); color:var(--pm-ink-soft)}
.pm-need__body{flex:1; min-width:0}
.pm-need__t{font-weight:600; font-size:15px}
.pm-need__s{font-family:var(--pm-font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--pm-ink-soft)}
.pm-need__right{text-align:right; flex:none}
.pm-need__price{font-family:var(--pm-font-display); font-weight:600; font-size:15px; margin-top:3px}

/* state: completed (reuse/provide/connect resolved) */
.pm-need.is-done,.pm-need.is-reused{background:var(--pm-paper)}
.pm-need.is-done .pm-need__ico,.pm-need.is-reused .pm-need__ico{background:var(--pm-pine); color:var(--pm-pine-tint)}
/* state: empty gap — awaiting fill */
.pm-need.is-empty{border-style:dashed}
/* state: active — AI currently generating this gap */
.pm-need.is-active{border:2px solid var(--pm-clay); background:#FBF1E9; box-shadow:0 0 0 4px rgba(200,81,43,.1)}
.pm-need.is-active .pm-need__ico{background:var(--pm-clay); color:var(--pm-pine-tint)}
.pm-need:hover:not(.is-active){transform:translateX(3px)}

/* badges (drop inside .pm-need__right, or anywhere) */
.pm-badge{font-family:var(--pm-font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:var(--pm-r-pill); white-space:nowrap; display:inline-block}
.pm-badge--done{background:rgba(14,110,92,.14); color:var(--pm-pine)}
.pm-badge--reused{border:1px solid var(--pm-pine); color:var(--pm-pine)}
.pm-badge--connect{border:1px solid var(--pm-ink); color:var(--pm-ink)}
.pm-badge--gap{border:1px solid var(--pm-clay); color:var(--pm-clay-deep)}
.pm-badge--spark{background:var(--pm-spark); color:var(--pm-ink)}
.pm-badge--clay{background:var(--pm-clay); color:var(--pm-pine-tint)}

/* dependency note line, e.g. "└ ต้องมี: โลโก้ ✓" */
.pm-depnote{font-family:var(--pm-font-mono); font-size:10px; color:var(--pm-ink-soft); margin:2px 0 12px 52px}

/* ----------------------------------------------------------------------------
   8. Progress — completion ring + bar
---------------------------------------------------------------------------- */
/* ring: set --pm-p (0–100); put the % text in a data-/content layer as needed */
.pm-ring{--pm-p:0; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; position:relative;
  background:conic-gradient(var(--pm-pine) calc(var(--pm-p)*1%), var(--pm-paper-2) 0)}
.pm-ring::after{content:""; position:absolute; width:46px; height:46px; border-radius:50%; background:var(--pm-card)}
.pm-ring__val{position:relative; z-index:1; font-family:var(--pm-font-mono); font-size:12px; font-weight:500; color:var(--pm-pine)}
/* linear bar: set width on .pm-bar__fill */
.pm-bar{position:relative; height:8px; background:rgba(255,255,255,.16); border-radius:var(--pm-r-pill); overflow:hidden}
.pm-bar__fill{position:absolute; inset:0; background:linear-gradient(90deg,var(--pm-clay),var(--pm-spark)); border-radius:var(--pm-r-pill)}

/* dark progress banner */
.pm-banner{background:var(--pm-ink); color:var(--pm-on-ink); border-radius:var(--pm-r-xl); padding:26px 30px; position:relative; overflow:hidden}
.pm-banner__num{font-family:var(--pm-font-display); font-size:52px; font-weight:600; line-height:1; color:var(--pm-spark)}

/* ----------------------------------------------------------------------------
   9. Inputs
---------------------------------------------------------------------------- */
.pm-search{display:inline-flex; align-items:center; gap:9px; background:var(--pm-card); border:1.5px solid var(--pm-ink); border-radius:var(--pm-r-pill); padding:9px 16px}
.pm-search input{border:none; background:none; outline:none; font-family:inherit; font-size:14px; width:100%; color:var(--pm-ink)}
.pm-search input::placeholder{color:var(--pm-ink-soft)}

.pm-avatar{width:34px; height:34px; border-radius:var(--pm-r-sm); background:var(--pm-ink); color:var(--pm-on-ink); display:grid; place-items:center; font-weight:600; font-size:13px}

/* ----------------------------------------------------------------------------
   10. Decorative details
---------------------------------------------------------------------------- */
/* registration mark (technical-drawing cross) — position absolutely at card corners */
.pm-regmark{position:absolute; width:16px; height:16px; opacity:.5}
.pm-regmark::before,.pm-regmark::after{content:""; position:absolute; background:var(--pm-ink)}
.pm-regmark::before{left:7px; top:0; width:1px; height:16px}
.pm-regmark::after{top:7px; left:0; height:1px; width:16px}

/* blinking cursor for "AI is typing" prompts */
.pm-cursor{display:inline-block; width:2px; height:16px; background:var(--pm-clay); vertical-align:-3px; animation:pm-blink 1s steps(1) infinite}
@keyframes pm-blink{50%{opacity:0}}

/* ----------------------------------------------------------------------------
   11. Entrance animation — staggered reveal
   Add .pm-reveal, then .pm-d1 … .pm-d6 for stagger.
---------------------------------------------------------------------------- */
.pm-reveal{opacity:0; transform:translateY(16px); animation:pm-rise .7s var(--pm-ease) forwards}
@keyframes pm-rise{to{opacity:1; transform:none}}
.pm-d1{animation-delay:.05s}.pm-d2{animation-delay:.15s}.pm-d3{animation-delay:.25s}
.pm-d4{animation-delay:.35s}.pm-d5{animation-delay:.45s}.pm-d6{animation-delay:.55s}

@media(prefers-reduced-motion:reduce){
  .pm-reveal{animation:none; opacity:1; transform:none}
  .pm-cursor{animation:none}
}