/* ==========================================================
   Mintflow — design tokens (DESIGN-7: parchment + one teal)
   ========================================================== */
:root{
  /* palette (from variables-4.css) */
  --color-parchment:#faf8f5; --color-soft-paper:#fdfbfa; --color-warm-mist:#d1d1cd;
  --color-ash:#92918b; --color-graphite:#72706b; --color-ink:#27251e;
  --color-pure-black:#000000; --color-deep-teal:#016a71;

  /* semantic roles used by the pages */
  --bg:var(--color-parchment);            /* page canvas */
  --surface:var(--color-soft-paper);      /* cards, inputs */
  --sidebar:#f3f1ec;                       /* one step darker than the canvas */
  --muted-fill:#f1efea;                    /* hover / soft fills */
  --border:var(--color-warm-mist);
  --border-soft:#e6e4df;
  --text:var(--color-ink);
  --text-2:var(--color-graphite);
  --text-3:var(--color-ash);
  --accent:var(--color-deep-teal);
  --on-accent:#ffffff;
  --on-ink:var(--color-parchment);
  --danger:#a8321f;                        /* error text only */
  --overlay:rgba(39,37,30,.35);
  --glow:0 0 0 1px color-mix(in oklch,var(--accent) 40%,transparent),0 0 0 4px color-mix(in oklch,var(--accent) 10%,transparent);

  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --text-caption:11px; --text-body-sm:12px; --text-body:14px; --text-body-lg:16px;
  --text-title:20px; --text-heading:24px; --text-display:40px;
  --font-weight-regular:400; --font-weight-medium:500;

  --spacing-4:4px; --spacing-8:8px; --spacing-12:12px; --spacing-16:16px; --spacing-32:32px;

  --radius-md:6px; --radius-xl:12px; --radius-2xl:16px; --radius-full:9999px;
  --radius-cards:16px; --radius-chips:9999px; --radius-inputs:12px; --radius-buttons:6px;

  --shadow-subtle:rgba(0,0,0,.08) 0 1px 2px 0;
  --page-max-width:900px; --sidebar-w:260px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#191816; --surface:#211f1c; --sidebar:#1d1c19; --muted-fill:#2a2824;
  --border:#3b3934; --border-soft:#302e2a;
  --text:#ecebe6; --text-2:#a8a69f; --text-3:#8a8882;
  --accent:#0f7f86; --on-ink:#191816; --danger:#f08a74; --overlay:rgba(0,0,0,.6);
  --shadow-subtle:rgba(0,0,0,.3) 0 1px 2px 0;
  color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#191816; --surface:#211f1c; --sidebar:#1d1c19; --muted-fill:#2a2824;
  --border:#3b3934; --border-soft:#302e2a;
  --text:#ecebe6; --text-2:#a8a69f; --text-3:#8a8882;
  --accent:#0f7f86; --on-ink:#191816; --danger:#f08a74; --overlay:rgba(0,0,0,.6);
  --shadow-subtle:rgba(0,0,0,.3) 0 1px 2px 0;
  color-scheme:dark;}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--text-body)/1.43 var(--font-sans);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
b,strong{font-weight:500}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.icon{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.caption{font-size:var(--text-body-sm);line-height:1.33;font-weight:400;color:var(--text-2)}
.muted{color:var(--text-2)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-8);height:36px;padding:0 var(--spacing-12);
  border-radius:var(--radius-buttons);border:1px solid transparent;font-size:14px;font-weight:400;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--text);color:var(--on-ink);border-radius:var(--radius-xl);font-weight:500}
.btn-primary:hover{background:var(--color-pure-black)}
:root[data-theme="dark"] .btn-primary:hover{background:#fff}
.btn:disabled{opacity:.5;cursor:default}
.btn-outline{background:transparent;color:var(--text-2);border-color:var(--border)}
.btn-outline:hover{color:var(--text);background:var(--muted-fill)}
.btn-secondary{background:var(--muted-fill);color:var(--text)}
.btn-secondary:hover{background:var(--border-soft)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--muted-fill);color:var(--text)}
.btn-destructive{background:transparent;color:var(--text-2);border-color:var(--border)}
.btn-destructive:hover{color:var(--text)}
.btn-destructive.armed{background:var(--text);color:var(--on-ink);border-color:var(--text)}
.btn-sm{height:32px;padding:0 10px;font-size:13px}
.btn-lg{height:44px;padding:0 var(--spacing-16);font-size:16px}
.icon-btn{width:32px;height:32px;display:inline-grid;place-items:center;border:none;background:none;border-radius:var(--radius-buttons);color:var(--text-2);cursor:pointer;flex:none}
.icon-btn:hover{background:var(--muted-fill);color:var(--text)}

/* ---------- Inputs ---------- */
.input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-inputs);
  padding:8px 12px;font-size:14px;line-height:1.43;color:var(--text)}
.input::placeholder{color:var(--text-2)}
.input:focus{outline:none;border-color:var(--text-2)}
textarea.input{resize:vertical;min-height:72px}
select.input{appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2372706b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-size:14px;font-weight:500}
.field small{color:var(--text-2);font-size:12px}

/* ---------- Chips / badges / cards ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--radius-chips);font-size:12px;font-weight:400;white-space:nowrap;border:1px solid var(--border);color:var(--text)}
.badge .icon{width:12px;height:12px}
.badge-accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-size:11px;font-weight:500}
.badge-ink{background:var(--text);border-color:var(--text);color:var(--on-ink)}
.badge-soft{background:var(--muted-fill);border-color:transparent;color:var(--text)}
.badge-outline{background:transparent}
.badge-dashed{border-style:dashed;color:var(--text-2)}
.badge-warn{border-style:dashed;color:var(--text-2)}
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-cards);box-shadow:var(--shadow-subtle)}
.kbd{font:500 11px var(--font-sans);border:1px solid var(--border);border-radius:var(--radius-md);padding:0 5px;color:var(--text-2);line-height:18px}
.brand{display:flex;align-items:center;gap:8px;font-weight:500;font-size:16px;text-decoration:none;color:var(--text)}
.brand-mark{width:24px;height:24px;display:grid;place-items:center;color:var(--text)}
.brand-mark svg{width:22px;height:22px;stroke-width:1.8}

/* pill chips (segmented choices) — active chip fills with teal */
.seg{display:inline-flex;gap:4px;flex-wrap:wrap}
.seg button{border:1px solid var(--border);background:transparent;height:28px;min-width:28px;padding:0 10px;border-radius:var(--radius-chips);font-size:13px;color:var(--text);cursor:pointer}
.seg button:hover{background:var(--muted-fill)}
.seg button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;
  background:var(--text);color:var(--on-ink);border-radius:var(--radius-xl);padding:10px 14px;font-size:14px;max-width:min(480px,calc(100vw - 32px));
  display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-subtle)}
.toast button{background:none;border:none;color:inherit;font-weight:500;text-decoration:underline;cursor:pointer;padding:0;white-space:nowrap}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}