/* ============================================================
   POSkitch — themes.css
   Design tokens, light/dark themes, accent variants, fonts.
   ============================================================ */

/* ---------- Inter (bundled locally) ---------- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/inter/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/inter/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/inter/inter-latin-800-normal.woff2') format('woff2'); }

/* ---------- Light theme (default) ---------- */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Brand */
  --brand-900:#0f172a; --brand-800:#1e293b; --brand-700:#334155; --brand-600:#475569;
  --accent-500:#f97316; --accent-600:#ea580c; --accent-700:#c2410c; --accent-100:#ffedd5; --accent-soft:rgba(249,115,22,.12);
  --violet:#8b5cf6; --teal:#14b8a6;

  /* Semantic */
  --success:#16a34a; --success-soft:rgba(22,163,74,.12);
  --warning:#f59e0b; --warning-soft:rgba(245,158,11,.14);
  --danger:#dc2626;  --danger-soft:rgba(220,38,38,.12);
  --info:#0ea5e9;    --info-soft:rgba(14,165,233,.12);

  /* Surfaces */
  --bg:#f3f5f9; --bg-soft:#eef1f6; --card:#ffffff; --card-alt:#f8fafc;
  --border:#e5e9f1; --border-strong:#d4dae5;
  --text:#101828; --text-soft:#475467; --muted:#667085; --muted-2:#98a2b3;

  /* Sidebar */
  --sidebar-bg:#0f172a; --sidebar-bg-2:#111c33; --sidebar-text:#aab6c8; --sidebar-text-hover:#fff; --sidebar-active:#f97316; --sidebar-border:rgba(255,255,255,.07);

  /* Geometry */
  --sidebar-w:266px; --sidebar-w-min:78px; --topbar-h:64px;
  --radius:14px; --radius-sm:10px; --radius-xs:8px;

  /* Elevation */
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 4px 14px rgba(16,24,40,.07);
  --shadow-lg:0 14px 34px rgba(16,24,40,.13);
  --ring:0 0 0 3px rgba(249,115,22,.22);

  /* Density */
  --cell-pad:.72rem .85rem;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  --bg:#0b1220; --bg-soft:#0e1729; --card:#121c30; --card-alt:#0f1930;
  --border:#21304a; --border-strong:#2c3d5c;
  --text:#e6eaf2; --text-soft:#c0c9d8; --muted:#8e9bb3; --muted-2:#64748b;

  --brand-900:#e6eaf2; --brand-800:#cdd6e4; --brand-700:#b3c0d4;
  --sidebar-bg:#0a101f; --sidebar-bg-2:#0d1526; --sidebar-border:rgba(255,255,255,.06);

  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 16px 40px rgba(0,0,0,.5);
  --ring:0 0 0 3px rgba(249,115,22,.3);
  --accent-soft:rgba(249,115,22,.16);
  color-scheme:dark;
}

/* ---------- Accent variants ---------- */
[data-accent="emerald"] { --accent-500:#10b981; --accent-600:#059669; --accent-700:#047857; --accent-100:#d1fae5; --accent-soft:rgba(16,185,129,.13); --sidebar-active:#10b981; --ring:0 0 0 3px rgba(16,185,129,.22); }
[data-accent="ruby"]    { --accent-500:#ef4444; --accent-600:#dc2626; --accent-700:#b91c1c; --accent-100:#fee2e2; --accent-soft:rgba(239,68,68,.13); --sidebar-active:#ef4444; --ring:0 0 0 3px rgba(239,68,68,.22); }
[data-accent="ocean"]   { --accent-500:#0ea5e9; --accent-600:#0284c7; --accent-700:#0369a1; --accent-100:#e0f2fe; --accent-soft:rgba(14,165,233,.13); --sidebar-active:#0ea5e9; --ring:0 0 0 3px rgba(14,165,233,.22); }
[data-theme="dark"][data-accent="emerald"] { --accent-soft:rgba(16,185,129,.18); }
[data-theme="dark"][data-accent="ruby"]    { --accent-soft:rgba(239,68,68,.18); }
[data-theme="dark"][data-accent="ocean"]   { --accent-soft:rgba(14,165,233,.18); }

/* ---------- Base ---------- */
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease, color .25s ease;
}
h1,h2,h3,h4,h5,h6 { color:var(--text); font-weight:700; }
a { color:var(--accent-600); text-decoration:none; }
a:hover { color:var(--accent-500); }
::selection { background:var(--accent-500); color:#fff; }

/* Scrollbars */
* { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:8px; }
*::-webkit-scrollbar-track { background:transparent; }

/* Focus ring */
.form-control:focus, .form-select:focus, .btn:focus-visible, .form-check-input:focus {
  box-shadow:var(--ring); border-color:var(--accent-500);
}
.form-control, .form-select {
  background-color:var(--card); border-color:var(--border); color:var(--text);
  border-radius:var(--radius-xs); font-size:13.5px;
}
.form-control::placeholder { color:var(--muted-2); }
.form-control:disabled, .form-select:disabled { background:var(--bg-soft); }
.form-label { font-size:12.5px; font-weight:600; color:var(--text-soft); margin-bottom:5px; }
.input-group-text { background:var(--bg-soft); border-color:var(--border); color:var(--muted); }
textarea.form-control { min-height:88px; }
.form-check-input:checked { background-color:var(--accent-500); border-color:var(--accent-500); }
.form-check-input { cursor:pointer; }
.form-switch .form-check-input { cursor:pointer; }