/* ============================================================
   VIDEOLUX — Base Style (style.css)
   Light theme DEFAULT · Dark theme via [data-theme="dark"]
   Fonts: Bricolage Grotesque + DM Sans + DM Mono
   ============================================================ */

/* Fonts loaded via Google Fonts CDN */
/* Google Fonts loaded via CDN */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap");

/* ── Design Tokens — LIGHT (default) ── */
:root {
  --bg: #faf9f6;
  --bg-2: #f2f1ec;
  --surface: #ffffff;
  --surface-2: #f5f4f0;
  --surface-3: #ece9e0;

  --border: #e2e0d8;
  --border-2: #d4d1c6;
  --border-3: #c4c1b4;

  --accent: #e85d04;
  --accent-2: #d44e00;
  --accent-hover: #d44e00;
  --accent-soft: rgba(232, 93, 4, 0.07);
  --accent-border: rgba(232, 93, 4, 0.2);
  --accent-text: #e85d04;

  --teal: #0891b2;
  --teal-s: rgba(8, 145, 178, 0.08);
  --amber: #b45309;
  --amber-s: rgba(180, 83, 9, 0.08);
  --rose: #e11d48;
  --rose-s: rgba(225, 29, 72, 0.07);
  --green: #0a8a5a;
  --green-s: rgba(10, 138, 90, 0.08);
  --violet: #6d28d9;
  --violet-s: rgba(109, 40, 217, 0.08);
  --sky: #0284c7;
  --sky-s: rgba(2, 132, 199, 0.08);
  --orange: #c2410c;
  --orange-s: rgba(194, 65, 12, 0.08);

  --t1: #0c0c14;
  --t2: #2a2a3a;
  --t3: #545470;
  --t4: #8888a8;
  --t5: #b8b8cc;

  --hdr-h: 62px;
  --sidebar-w: 220px;
  --inspector-w: 260px;

  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --r4: 16px;
  --r5: 22px;
  --rf: 9999px;

  --s1: 0 1px 2px rgba(12, 12, 20, 0.05);
  --s2: 0 2px 8px rgba(12, 12, 20, 0.08), 0 1px 3px rgba(12, 12, 20, 0.05);
  --s3: 0 8px 28px rgba(12, 12, 20, 0.1), 0 2px 8px rgba(12, 12, 20, 0.06);
  --s4: 0 20px 60px rgba(12, 12, 20, 0.12), 0 6px 20px rgba(12, 12, 20, 0.08);

  --f-ui: "DM Sans", system-ui, sans-serif;
  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-mono: "DM Mono", monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tf: all 0.13s cubic-bezier(0.16, 1, 0.3, 1);
  --tm: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);

  --text-1: var(--t1);
  --text-2: var(--t2);
  --text-3: var(--t3);
  --font-display: var(--f-display);
  --font-body: var(--f-ui);
  --ok: var(--green);
  --warn: var(--amber);
  --bad: var(--rose);
}

/* ── Dark Theme tokens ── */
[data-theme="dark"] {
  --bg: #0a0a0f;
  --bg-2: #111118;
  --surface: #16161f;
  --surface-2: #1c1c27;
  --surface-3: #22222f;

  --border: rgba(255, 255, 255, 0.07);
  --border-2: rgba(255, 255, 255, 0.11);
  --border-3: rgba(255, 255, 255, 0.18);

  --accent-soft: rgba(232, 93, 4, 0.12);
  --accent-border: rgba(232, 93, 4, 0.28);

  --teal: #2dd4bf;
  --amber: #f59e0b;
  --rose: #f43f5e;
  --green: #10b981;
  --green-s: rgba(16, 185, 129, 0.1);
  --violet: #8b5cf6;
  --sky: #38bdf8;

  --t1: #f0efff;
  --t2: #c8c8e0;
  --t3: #8888a8;
  --t4: #50505e;
  --t5: #38384a;

  --s1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --s2: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --s3: 0 8px 28px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  --s4: 0 20px 60px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.4);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
body {
  font-family: var(--f-ui);
  background: var(--bg);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
}
button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}
ul,
ol {
  list-style: none;
}

::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: var(--bg-2);
}
::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 99px;
}

/* === Dropdown icon background classes (extracted from inline styles) === */
.px-dd-icon-orange { background: rgba(232,93,4,0.12); }
.px-dd-icon-purple { background: rgba(139,92,246,0.10); }
.px-dd-icon-green { background: rgba(16,185,129,0.10); }
.px-dd-icon-blue { background: rgba(56,189,248,0.10); }
.px-dd-icon-red { background: rgba(244,63,94,0.10); }
.px-dd-icon-amber { background: rgba(245,158,11,0.10); }

/* === Footer section label (extracted from inline styles) === */
.px-footer-label {
  padding: 0 12px 8px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #38384a;
}
.px-footer-label-divider {
  padding: 8px 12px 4px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #38384a;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 6px;
}

/* === Inline style extraction: tools/*.html shared component classes === */
.px-overflow-x { overflow-x: auto; }
.px-hidden { display: none; }
.px-sig-toolbar { display: flex; gap: 8px; margin-bottom: 8px; }
.px-sig-toolbar > * { flex: 1; font-size: 11px; padding: 5px 8px; }
.px-sig-input-sm { font-size: 11px; padding: 5px 8px; }
.px-sig-canvas-wrap { border: 1px solid #e2e0d8; border-radius: 6px; background: #fafaf8; cursor: crosshair; overflow: hidden; }
.px-sig-canvas { display: block; width: 100%; height: 80px; }
.px-sig-canvas-dark { border: 1.5px solid var(--vl-border); border-radius: 8px; cursor: crosshair; touch-action: none; width: 100%; display: block; }
.px-mt-8 { margin-top: 8px; }
.px-mt-16 { margin-top: 16px; }
.px-note-text { font-size: 12px; color: var(--vl-t3); line-height: 1.7; }
.px-ds-bg-dark { background: #0c0c14; }
.px-ds-bg-blue { background: #1e40af; }
.px-ds-bg-green { background: #15803d; }
.px-ds-bg-red { background: #b91c1c; }