/* ── Body ──────────────────────────────────────────────────── */
body {
  background-color: var(--darkest);
  color: var(--font-base);
  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* Subtle grid overlay — optional ambient texture */
body.grid-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(143,153,197,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,153,197,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

/* ── Links ─────────────────────────────────────────────────── */
a { color: var(--font-base); text-decoration: none; }
a:hover { color: #ffffff; }

/* ── Headings ──────────────────────────────────────────────── */
h1, h2, h3, h4, h5,
.display-1, .display-2, .display-3, .display-4 {
  font-family: 'Beleren', Arial, sans-serif;
  letter-spacing: 0.04em;
  color: var(--font-base);
}

h1, .display-3 { text-transform: uppercase; }

@media (max-width: 576px) {
  h1, .display-3 { letter-spacing: 0.02em; }
}

/* ── Typography utilities ──────────────────────────────────── */
.title-font {
  font-family: 'Beleren', Arial, sans-serif;
  letter-spacing: 0.04em;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--font-base-trans);
}

.muted  { color: var(--font-base-trans); }
.muted2 { color: var(--font-base-trans); }

.text-muted { color: var(--font-base-trans) !important; }

/* ── Sigtaara UI mode ──────────────────────────────────────── */
.sigtaara-ui,
.sigtaara-ui button,
.sigtaara-ui input,
.sigtaara-ui select,
.sigtaara-ui textarea { font-family: 'Sigtaara', Arial, sans-serif; }

.sigtaara-ui h1,
.sigtaara-ui h2,
.sigtaara-ui h3,
.sigtaara-ui h4,
.sigtaara-ui h5,
.sigtaara-ui .display-1,
.sigtaara-ui .display-2,
.sigtaara-ui .display-3,
.sigtaara-ui .display-4,
.sigtaara-ui .title-font,
.sigtaara-ui .navbar-brand { font-family: 'Sigtaara', Arial, sans-serif; }

/* ── Misc globals ──────────────────────────────────────────── */
.bg-dark { background-color: var(--base) !important; }

/* Editor workspace background — checkered grid (from cc-auto) */
.editor-bg {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 24px 24px;
}