/* Niralabs WebsiteV5 brand primitives.
   Source of truth: Niralabs Brand System 2026. */
:root {
  --brand-graphite-deep: oklch(0.11 0.004 80);
  --brand-graphite: oklch(0.145 0.004 80);
  --brand-surface: oklch(0.172 0.005 80);
  --brand-card: oklch(0.198 0.005 80);
  --brand-card-high: oklch(0.228 0.006 80);
  --brand-bone-bright: oklch(0.968 0.005 88);
  --brand-bone: oklch(0.92 0.006 85);
  --brand-grey: oklch(0.645 0.008 82);
  --brand-grey-muted: oklch(0.545 0.008 80);
  --brand-grey-faint: oklch(0.430 0.007 80);
  --brand-brass: oklch(0.785 0.090 84);
  --brand-brass-light: oklch(0.850 0.074 88);
  --brand-brass-deep: oklch(0.585 0.072 78);
  --brand-border: oklch(0.330 0.006 80 / 0.7);
  --brand-border-soft: oklch(0.330 0.006 80 / 0.45);
  --brand-green: oklch(0.75 0.14 150);
  --brand-red: oklch(0.68 0.15 25);
  --brand-ui: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --brand-mono: 'Geist Mono', ui-monospace, monospace;

  /* Compatibility aliases keep approved layouts intact while removing color drift. */
  --black: var(--brand-graphite);
  --ink: var(--brand-graphite);
  --deep: var(--brand-graphite-deep);
  --graphite: var(--brand-graphite);
  --surface: var(--brand-card);
  --surface-hi: var(--brand-card-high);
  --panel: var(--brand-card);
  --panel2: var(--brand-card-high);
  --bone: var(--brand-bone);
  --bone-dim: var(--brand-grey);
  --grey: var(--brand-grey);
  --muted: var(--brand-grey-muted);
  --grey-dim: var(--brand-grey-muted);
  --grey-faint: var(--brand-grey-faint);
  --brass: var(--brand-brass);
  --brass-bright: var(--brand-brass-light);
  --brass-light: var(--brand-brass-light);
  --brass-dim: var(--brand-brass-deep);
  --brass-deep: var(--brand-brass-deep);
  --gain: var(--brand-green);
  --green: var(--brand-green);
  --loss: var(--brand-red);
  --ui: var(--brand-ui);
  --mono: var(--brand-mono);
  --line: var(--brand-border-soft);
  --border-default: var(--brand-border-soft);
  --border-subtle: oklch(0.330 0.006 80 / 0.24);
  --border-accent: oklch(0.785 0.090 84 / 0.30);
  --g1: var(--brand-graphite);
  --g2: var(--brand-surface);
  --g3: var(--brand-card);
}

body,
button,
input,
select,
textarea {
  font-family: var(--brand-ui);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--brand-ui);
}

.mono,
.metric,
.stat-num,
.price,
time,
[data-brand-number] {
  font-family: var(--brand-mono);
  font-variant-numeric: tabular-nums;
}

/* Approved external-identity lockup. The source PNG includes generous master-art
   padding; this fixed viewport preserves the artwork and its clear space. */
.brand-lockup {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 132px;
  height: 32px;
  overflow: hidden;
  color: transparent;
}

.brand-lockup img {
  position: absolute;
  width: 152px;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.brand-lockup--footer {
  width: 132px;
  height: 34px;
}

.mk line,
.mark line,
.menu-mark line,
.wf-mark line {
  stroke: var(--brand-brass);
  stroke-width: 5;
  stroke-linecap: round;
}

.mk circle,
.mark circle,
.menu-mark circle,
.wf-mark circle {
  fill: var(--brand-brass-light);
  stroke: none;
}

.btn,
.button,
.cta,
.nav-cta,
.get-started {
  font-family: var(--brand-ui);
  border-radius: 10px;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand-brass-light);
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .nav-inner {
    padding-left: 14px;
    padding-right: 14px;
    gap: 12px;
  }
  .nav-right { gap: 8px; }
  .nav-right .btn-primary {
    padding: 10px 12px;
    font-size: 13px;
  }
  .brand-lockup {
    width: 118px;
    height: 30px;
  }
  .brand-lockup img { width: 140px; }
}