/* PalmRetail Assistant — design system.
   Refined, neutral, flat. No gradients, hairline borders, restrained accent. Font: Inter. */

:root {
  /* dark (default) — neutral cool grays */
  --bg:            #0a0c0f;
  --surface:       #0f1216;
  --surface-2:     #15191f;
  --elevated:      #1a1f26;
  --line:          #1c2128;
  --line-strong:   #2a2f38;
  --text:          #e6e9ed;
  --text-dim:      #a9b0ba;
  --muted:         #6e7681;
  --accent:        #3f7fff;
  --accent-hover:  #5a91ff;
  --accent-soft:   rgba(63,127,255,.13);
  --on-accent:     #ffffff;
  --success:       #3fb950;
  --danger:        #f0555f;
  --danger-soft:   rgba(240,85,95,.12);
  --ring:          rgba(63,127,255,.40);
  --scroll-thumb:       rgba(255,255,255,.15);
  --scroll-thumb-hover: rgba(255,255,255,.30);

  --radius-sm: 6px;
  --radius:    8px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 0 rgba(0,0,0,.20);
  --shadow:    0 10px 30px rgba(0,0,0,.40);
  --shadow-lg: 0 20px 50px rgba(0,0,0,.55);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --sidebar-w: 260px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="light"] {
  --bg:            #ffffff;
  --surface:       #ffffff;
  --surface-2:     #f5f7f9;
  --elevated:      #ffffff;
  --line:          #e7eaee;
  --line-strong:   #d7dce2;
  --text:          #17202b;
  --text-dim:      #414b57;
  --muted:         #6b7480;
  --accent:        #2563eb;
  --accent-hover:  #1d4fd0;
  --accent-soft:   rgba(37,99,235,.09);
  --on-accent:     #ffffff;
  --success:       #1a7f37;
  --danger:        #cf222e;
  --danger-soft:   rgba(207,34,46,.07);
  --ring:          rgba(37,99,235,.32);
  --scroll-thumb:       rgba(20,30,45,.20);
  --scroll-thumb-hover: rgba(20,30,45,.38);
  --shadow-sm: 0 1px 0 rgba(16,26,40,.04);
  --shadow:    0 10px 30px rgba(16,26,40,.10);
  --shadow-lg: 0 20px 50px rgba(16,26,40,.16);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --bg:#fff; --surface:#fff; --surface-2:#f5f7f9; --elevated:#fff;
    --line:#e7eaee; --line-strong:#d7dce2; --text:#17202b; --text-dim:#414b57;
    --muted:#6b7480; --accent:#2563eb; --accent-hover:#1d4fd0; --accent-soft:rgba(37,99,235,.09);
    --on-accent:#fff; --success:#1a7f37; --danger:#cf222e; --danger-soft:rgba(207,34,46,.07);
    --ring:rgba(37,99,235,.32); --scroll-thumb:rgba(20,30,45,.20); --scroll-thumb-hover:rgba(20,30,45,.38);
    --shadow-sm:0 1px 0 rgba(16,26,40,.04); --shadow:0 10px 30px rgba(16,26,40,.10); --shadow-lg:0 20px 50px rgba(16,26,40,.16);
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

/* modern, theme-aware scrollbars — thin rounded pill thumb, no track chrome */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3 { margin: 0; font-weight: 650; letter-spacing: -.014em; }
a { color: inherit; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- flower mark (crisp vector, recolors to the exact accent) ---------- */
.flower {
  display: inline-block; flex: none; background-color: var(--accent);
  -webkit-mask: url('/assets/flower.svg?v=3') center / contain no-repeat;
  mask: url('/assets/flower.svg?v=3') center / contain no-repeat;
}
.brand-lock { display: inline-flex; align-items: center; }
/* wordmark: vector, follows the text colour so it works in light + dark */
.word {
  display: inline-block; background-color: var(--text);
  -webkit-mask: url('/assets/palmretail-word.svg?v=5') left center / contain no-repeat;
  mask: url('/assets/palmretail-word.svg?v=5') left center / contain no-repeat;
  aspect-ratio: 115.5 / 20;
}

/* ---------- brand / logo (flat, monochrome) ---------- */
.brand { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 14px; letter-spacing: -.01em; }
.logo {
  width: 24px; height: 24px; border-radius: 6px; flex: none;
  display: grid; place-items: center; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line-strong);
}
.logo svg { width: 14px; height: 14px; }
.logo.accent { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-weight: 550; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  padding: 8px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover { background: var(--elevated); border-color: var(--line-strong); }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: transparent; }
.btn-danger:hover { border-color: var(--danger); color: var(--danger); background: var(--surface-2); }
.btn-block { width: 100%; }
.icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent;
  color: var(--muted); cursor: pointer; transition: background .16s, color .16s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }

/* ---------- inputs ---------- */
.field { display: block; margin-bottom: var(--space-4); }
.field > label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; }
.input, textarea.input {
  width: 100%; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 9px 11px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input:focus, textarea.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--muted); }

/* ---------- card ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }

/* ---------- helpers ---------- */
.muted { color: var(--muted); }
.spacer { flex: 1; }
.row { display: flex; align-items: center; gap: 8px; }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(10px);
  background: var(--elevated); border: 1px solid var(--line-strong); color: var(--text);
  padding: 9px 15px; border-radius: var(--radius); box-shadow: var(--shadow);
  font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 90;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { border-color: var(--danger); color: var(--danger); }
.toast.ok { border-color: var(--success); }