:root {
  --bg: #0a0b10;
  --fg: #e6ebff;
  --card-bg: #101420;
  --border: #2c3552;
  --muted: #a8b3d4;
  /* Brand palette */
  --brand-orange: #F7931A; /* primary */
  --brand-salmon: #E8A57B;
  --brand-rose:   #DA526A;
  --brand-cyan:   #79FFE1;
  --brand-purple: #A78BFA;
  --brand-turq:   #35FFD2;
  --accent: var(--brand-orange);
}

[data-theme="dark"] {
  --bg: #0a0b10;
  --fg: #e6ebff;
  --card-bg: #101420;
  --border: #2c3552;
  --muted: #a8b3d4;
  --accent: #8ab4ff;
}

[data-theme="light"] {
  --bg: #f6f8ff;
  --fg: #0b0f18;
  --card-bg: #ffffff;
  --border: #d6def5;
  --muted: #58617a;
  --accent: var(--brand-orange);
}

/* Demo helpers */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; }
.tag, .pill { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .5rem; border-radius:999px; border:1px solid var(--border); color: var(--fg); background: color-mix(in oklab, var(--accent) 7%, transparent); }
.tag .dot, .pill .dot { width:6px; height:6px; border-radius:999px; background: var(--accent); box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 50%, transparent); }

/* Light theme: colored outlines for cards, boxes, tags */
[data-theme="light"] .card { border-color: color-mix(in oklab, var(--accent) 28%, var(--border)); }
[data-theme="light"] .box  { border-color: color-mix(in oklab, var(--accent) 24%, var(--border)); }
[data-theme="light"] .tag, [data-theme="light"] .pill { border-color: color-mix(in oklab, var(--accent) 60%, var(--border)); background: color-mix(in oklab, var(--accent) 8%, white 96%); }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.accent-cyan { color: var(--brand-cyan); }
.accent-purple { color: var(--brand-purple); }
.accent-turq { color: var(--brand-turq); }

/* Minimalist brand accents */
.brand-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--brand-rose), var(--brand-salmon), transparent); opacity:.6; }
.brand-chip { display:inline-flex; align-items:center; gap:6px; padding:.25rem .5rem; border-radius:999px; border:1px solid color-mix(in oklab, var(--brand-orange) 30%, transparent); color: var(--fg); background: color-mix(in oklab, var(--brand-orange) 12%, transparent); }
.brand-chip .dot { width:6px; height:6px; border-radius:999px; background: var(--brand-orange); box-shadow: 0 0 8px color-mix(in oklab, var(--brand-orange) 50%, transparent); }

/* Responsive helpers */
img, canvas, iframe, video { max-width: 100%; height: auto; }

.responsive-split { display: grid; grid-template-columns: 1fr 360px; gap: 12px; align-items: start; }
@media (max-width: 900px){
  .responsive-split { grid-template-columns: 1fr; }
  .responsive-split > * { min-width: 0; }
}

/* WebGL/3D containers */
.gl-panel { position: relative; overflow: hidden; background: #000; border-radius: 12px; contain: layout paint size; }
.gl-viewport { width: 100%; height: 70vh; max-height: 80svh; }
@media (max-width: 600px){
  .gl-viewport { height: 45vh; }
}

/* Prevent horizontal scroll on small screens */
html, body { overflow-x: hidden; }

/* Buttons themed via brand palette (optional utility) */
.btn,
button.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:8px; border:1px solid color-mix(in oklab, var(--accent) 35%, transparent); background: color-mix(in oklab, var(--accent) 10%, transparent); color: var(--fg); cursor:pointer; transition: transform .15s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.btn-primary { background: var(--accent); color:#0b0f18; border-color: transparent; }
.btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); }

/* Light mode button tuning: more subtle fills, crisper outlines */
[data-theme="light"] .btn { border-color: color-mix(in oklab, var(--accent) 25%, var(--border)); background: color-mix(in oklab, var(--accent) 4%, transparent); color: var(--fg); }
[data-theme="light"] .btn:hover { box-shadow: 0 6px 16px rgba(12,16,28,.12); }
[data-theme="light"] .btn-outline { background: transparent; color: color-mix(in oklab, var(--accent) 92%, black 0%); border-color: color-mix(in oklab, var(--accent) 60%, var(--border)); }
[data-theme="light"] .btn-primary { background: var(--accent); color: #0b0f18; border-color: color-mix(in oklab, var(--accent) 80%, var(--border)); }

/* Banner component: light and dark gradients with outline option */
.banner { padding: .75rem 1rem; border-radius: 12px; border: 1px solid var(--border); display:flex; align-items:center; gap:.75rem; }
.banner .title { font-weight: 700; letter-spacing: .2px; }
.banner .desc { color: var(--muted); }
.banner.info { background: linear-gradient(180deg, color-mix(in oklab, var(--brand-cyan) 6%, transparent), transparent); }
.banner.warn { background: linear-gradient(180deg, color-mix(in oklab, var(--brand-rose) 8%, transparent), transparent); }
.banner.ok { background: linear-gradient(180deg, color-mix(in oklab, var(--brand-turq) 8%, transparent), transparent); }
[data-theme="light"] .banner.info { background: linear-gradient(180deg, color-mix(in oklab, var(--brand-cyan) 12%, white 90%), white); }
[data-theme="light"] .banner.warn { background: linear-gradient(180deg, color-mix(in oklab, var(--brand-rose) 14%, white 90%), white); }
[data-theme="light"] .banner.ok { background: linear-gradient(180deg, color-mix(in oklab, var(--brand-turq) 12%, white 90%), white); }
.banner.outline { background: var(--card-bg); border-style: dashed; }

/* Typography defaults tuned per theme */
body { line-height: 1.45; }
h1,h2,h3,h4,h5,h6 { color: var(--fg); margin: .5rem 0; line-height: 1.2; }
p { color: var(--fg); opacity: .92; }
small, .muted { color: var(--muted); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
[data-theme="light"] code, [data-theme="light"] pre { background: #f1f4ff; color: #0b0f18; border: 1px solid #e3e8ff; border-radius: 6px; }

/* Brand selector via data-brand attribute (adjusts --accent) */
[data-brand="orange"] { --accent: var(--brand-orange); }
[data-brand="rose"]   { --accent: var(--brand-rose); }
[data-brand="cyan"]   { --accent: var(--brand-cyan); }
[data-brand="purple"] { --accent: var(--brand-purple); }
[data-brand="turq"]   { --accent: var(--brand-turq); }