/* Xe Ghép Bôn Lê — design tokens + base */

:root {
  /* Palette A — "Cobalt & Amber" (default) */
  --c-navy: #0B2545;
  --c-navy-soft: #133960;
  --c-navy-deep: #061A35;
  --c-cream: #FBF7EE;
  --c-cream-2: #F2EBDC;
  --c-paper: #FFFFFF;
  --c-ink: #0D1B2A;
  --c-ink-soft: #3B4A5F;
  --c-mute: #7A8699;
  --c-line: rgba(11,37,69,0.10);
  --c-line-strong: rgba(11,37,69,0.18);
  --c-accent: #E89B4A;
  --c-accent-deep: #C97A29;
  --c-accent-soft: #F5D8AE;
  --c-success: #2E8B6B;
  --card-radius: 16px;
  --card-radius-sm: 10px;
}

/* Card-style tweak: override any border-radius value within artboards.
   React serializes borderRadius to the inline `style` attribute, so the
   attribute selector below catches all card-like containers. */
.cs-square .bonle [style*="border-radius"],
.cs-square .bonle [style*="radius"] { border-radius: 0 !important; }

.cs-soft .bonle [style*="border-radius"],
.cs-soft .bonle [style*="radius"] { border-radius: 24px !important; }

/* Never round avatars/icons/pills — preserve circles via more-specific rule */
.cs-square .bonle [style*="border-radius: 50%"],
.cs-square .bonle [style*="border-radius:50%"],
.cs-square .bonle [style*="border-radius: 999"],
.cs-square .bonle [style*="border-radius:999"] { border-radius: 999px !important; }
.cs-soft .bonle [style*="border-radius: 50%"],
.cs-soft .bonle [style*="border-radius:50%"],
.cs-soft .bonle [style*="border-radius: 999"],
.cs-soft .bonle [style*="border-radius:999"] { border-radius: 999px !important; }

/* Reset within artboards */
.bonle * { box-sizing: border-box; }
.bonle { color: var(--c-ink); font-family: "Manrope", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.bonle h1, .bonle h2, .bonle h3, .bonle h4 { margin: 0; letter-spacing: -0.02em; }
.bonle p { margin: 0; }
.bonle button { font-family: inherit; cursor: pointer; }

/* Display serif for V1 */
.serif { font-family: "Instrument Serif", "DM Serif Display", Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* Placeholder photo block (striped) */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(11,37,69,0.04) 0 10px, rgba(11,37,69,0.07) 10px 20px),
    var(--c-cream-2);
  color: var(--c-ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
}
.ph.dark {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 10px, rgba(255,255,255,0.09) 10px 20px),
    var(--c-navy-soft);
  color: rgba(255,255,255,0.7);
}
.ph::after {
  content: "";
  position: absolute; inset: 8px;
  border: 1px dashed rgba(11,37,69,0.18);
  border-radius: 6px;
  pointer-events: none;
}
.ph.dark::after { border-color: rgba(255,255,255,0.18); }

/* Utility */
.bonle .row { display:flex; }
.bonle .col { display:flex; flex-direction:column; }
.bonle .grid { display:grid; }
.bonle .ico { width: 18px; height: 18px; }
.bonle .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600;
}

/* Hide focused/raw form outlines inside artboards (we mock fields) */
.bonle input, .bonle select, .bonle textarea {
  font-family: inherit; font-size: inherit; color: inherit;
  background: transparent; border: 0; outline: 0; width: 100%;
}

/* Prevent horizontal page scroll on mobile (use `clip` not `hidden` — `hidden` breaks position:sticky) */
html, body { max-width: 100%; overflow-x: clip; }
img, svg { max-width: 100%; }

/* Hide scrollbar on filter pill row */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }