/* =====================================================================
   NOQOU DESIGN SYSTEM
   Managed Instagram DM API — dark-first, infra-native
   ===================================================================== */

:root {
  /* ---- Color · surfaces ---- */
  --noq-bg:            #0a0a0a;
  --noq-panel:         #111111;
  --noq-raised:        #1b1b1b;
  --noq-code-bg:       #0e0e0e;
  --noq-code-head:     #131313;

  /* ---- Color · text ---- */
  --noq-text:          #f5f2ec;
  --noq-text-2:        #c9c4bb;
  --noq-muted:         #8f8a82;
  --noq-faint:         #6b665e;

  /* ---- Color · borders ---- */
  --noq-border:        rgba(255,255,255,.09);
  --noq-border-strong: rgba(255,255,255,.14);
  --noq-border-faint:  rgba(255,255,255,.06);

  /* ---- Color · accent (brand) ---- */
  --noq-accent:        #c68b59;
  --noq-accent-hover:  #d9a879;
  --noq-accent-ink:    #0a0a0a;
  --noq-accent-soft:   rgba(198,139,89,.13);
  --noq-accent-line:   rgba(198,139,89,.40);

  /* ---- Color · API / dev (teal) ---- */
  --noq-teal:          #4db6a4;
  --noq-teal-soft:     rgba(77,182,164,.12);
  --noq-teal-line:     rgba(77,182,164,.35);

  /* ---- Color · semantic webhook states ---- */
  --noq-sent:          #3b9b69;   --noq-sent-text:    #6cc295;
  --noq-sent-soft:     rgba(59,155,105,.13);   --noq-sent-line:   rgba(59,155,105,.40);
  --noq-failed:        #d99a4e;   --noq-failed-text:  #e0b070;
  --noq-failed-soft:   rgba(217,154,78,.13);   --noq-failed-line: rgba(217,154,78,.42);
  --noq-replied:       #5b9bd5;   --noq-replied-text: #85b4e0;
  --noq-replied-soft:  rgba(91,155,213,.13);   --noq-replied-line:rgba(91,155,213,.42);

  /* ---- Code syntax ---- */
  --noq-syn-key:       #6fa8c7;
  --noq-syn-str:       #c68b59;
  --noq-syn-num:       #b98cd6;
  --noq-syn-kw:        #4db6a4;
  --noq-syn-ok:        #6cc295;
  --noq-syn-punct:     #6b665e;
  --noq-syn-base:      #c9c4bb;

  /* ---- Typography ---- */
  --noq-font:          "Geist", system-ui, -apple-system, sans-serif;
  --noq-font-mono:     "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --noq-fs-display:    clamp(38px, 5.4vw, 60px);
  --noq-fs-h2:         clamp(28px, 3.4vw, 38px);
  --noq-fs-h3:         18px;
  --noq-fs-body:       16px;
  --noq-fs-sm:         14px;
  --noq-fs-label:      12px;

  --noq-tracking-tight:-0.03em;
  --noq-tracking-h2:  -0.028em;
  --noq-leading-body:  1.65;

  /* ---- Spacing ---- */
  --noq-space-1: 4px;   --noq-space-2: 8px;   --noq-space-3: 12px;
  --noq-space-4: 16px;  --noq-space-6: 24px;  --noq-space-7: 28px;
  --noq-space-10: 40px; --noq-space-16: 64px; --noq-space-24: 96px;
  --noq-section-pad: clamp(64px, 7vw, 100px);
  --noq-container:   1180px;

  /* ---- Radius ---- */
  --noq-radius-sm: 6px;
  --noq-radius:    8px;
  --noq-radius-lg: 12px;
  --noq-radius-xl: 16px;
  --noq-radius-pill: 999px;

  /* ---- Elevation ---- */
  --noq-shadow-panel: 0 30px 80px -30px rgba(0,0,0,.8);

  /* ---- Docs shell ---- */
  --noq-docs-header-height: 58px;
}

.noq-root {
  background: var(--noq-bg);
  color: var(--noq-text);
  font-family: var(--noq-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.noq-root ::selection { background: rgba(198,139,89,.28); }

.noq-container { max-width: var(--noq-container); margin: 0 auto; padding-left: 28px; padding-right: 28px; }

.noq-display { font: 600 var(--noq-fs-display)/1.04 var(--noq-font); letter-spacing: var(--noq-tracking-tight); text-wrap: balance; margin: 0; }
.noq-h2      { font: 600 var(--noq-fs-h2)/1.1 var(--noq-font); letter-spacing: var(--noq-tracking-h2); margin: 0; }
.noq-h3      { font: 600 var(--noq-fs-h3)/1.2 var(--noq-font); margin: 0; }
.noq-body    { font: 400 var(--noq-fs-body)/var(--noq-leading-body) var(--noq-font); color: var(--noq-text-2); text-wrap: pretty; margin: 0; }
.noq-muted   { color: var(--noq-muted); }
.noq-eyebrow { font: 600 var(--noq-fs-label)/1 var(--noq-font-mono); color: var(--noq-accent); letter-spacing: .06em; text-transform: uppercase; }
.noq-mono    { font-family: var(--noq-font-mono); }

.noq-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--noq-radius);
  font: 600 var(--noq-fs-sm)/1 var(--noq-font);
  cursor: pointer; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  text-decoration: none;
}
.noq-btn--primary   { background: var(--noq-accent); color: var(--noq-accent-ink); }
.noq-btn--primary:hover   { background: var(--noq-accent-hover); }
.noq-btn--secondary { background: transparent; color: var(--noq-text); border-color: var(--noq-border-strong); }
.noq-btn--secondary:hover { border-color: var(--noq-accent-line); }
.noq-btn--ghost     { background: transparent; color: var(--noq-accent); padding-left: 14px; padding-right: 14px; }
.noq-btn--ghost:hover     { color: var(--noq-accent-hover); }

.noq-card {
  border: 1px solid var(--noq-border);
  border-radius: var(--noq-radius-lg);
  background: var(--noq-panel);
  padding: var(--noq-space-7) var(--noq-space-6);
}
.noq-panel {
  border: 1px solid var(--noq-border);
  border-radius: var(--noq-radius-lg);
  background: var(--noq-code-bg);
  box-shadow: var(--noq-shadow-panel);
  overflow: hidden;
}

.noq-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--noq-radius-pill);
  font: 600 12.5px/1 var(--noq-font-mono);
  border: 1px solid var(--noq-border-strong);
  color: var(--noq-text-2);
}
.noq-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.noq-pill--sent      { background: var(--noq-sent-soft);    border-color: var(--noq-sent-line);    color: var(--noq-sent-text);    }
.noq-pill--failed    { background: var(--noq-failed-soft);  border-color: var(--noq-failed-line);  color: var(--noq-failed-text);  }
.noq-pill--replied   { background: var(--noq-replied-soft); border-color: var(--noq-replied-line); color: var(--noq-replied-text); }
.noq-pill--completed { background: var(--noq-accent-soft);  border-color: var(--noq-accent-line);  color: #d0a06f; }

.noq-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--noq-sent); }

.noq-code { border: 1px solid var(--noq-border); border-radius: var(--noq-radius-lg); background: var(--noq-code-bg); overflow: hidden; }
.noq-code__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--noq-border-faint); background: var(--noq-code-head); font: 500 11.5px/1 var(--noq-font-mono); color: var(--noq-muted); }
.noq-code__body { margin: 0; padding: 16px 18px; font: 500 12.5px/1.75 var(--noq-font-mono); color: var(--noq-syn-base); overflow-x: auto; }
.noq-t-key   { color: var(--noq-syn-key); }
.noq-t-str   { color: var(--noq-syn-str); }
.noq-t-num   { color: var(--noq-syn-num); }
.noq-t-kw    { color: var(--noq-syn-kw); }
.noq-t-ok    { color: var(--noq-syn-ok); }
.noq-t-punct { color: var(--noq-syn-punct); }

.noq-tabs { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--noq-border-faint); background: var(--noq-code-head); }
.noq-tab  { padding: 8px 15px; border-radius: var(--noq-radius-sm); font: 500 13px/1 var(--noq-font-mono); cursor: pointer; border: 1px solid var(--noq-border); background: transparent; color: var(--noq-muted); }
.noq-tab[aria-selected="true"], .noq-tab.is-active { border-color: var(--noq-accent-line); background: var(--noq-accent-soft); color: var(--noq-text); }

.noq-header { position: sticky; top: 0; z-index: 50; background: rgba(10,10,10,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--noq-border-faint); }
.noq-header__inner { max-width: var(--noq-container); margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.noq-navlink { color: var(--noq-muted); font: 500 var(--noq-fs-sm)/1 var(--noq-font); text-decoration: none; }
.noq-navlink:hover { color: var(--noq-text); }
.noq-logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #c68b59, #8a5a34); display: flex; align-items: center; justify-content: center; font: 700 15px/1 var(--noq-font-mono); color: var(--noq-accent-ink); flex-shrink: 0; }

@keyframes noq-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes noq-rise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.noq-live { animation: noq-pulse 2s ease-in-out infinite; }
.noq-rise { animation: noq-rise .35s ease; }