/*
 * Tribun Editorial AI — Design Tokens (from tokens.css)
 * Developer: Abdullah
 * License: Proprietary — PT Tribun Digital Online
 */

:root {
  /* Logo-derived palette: deep indigo → bright royal blue */
  --brand-700: #2a1ea8;
  --brand-600: #3a2fd0;
  --brand-500: #4338e8;
  --brand-400: #5b8dff;
  --brand-300: #8aa9ff;
  --brand-50:  #eef0ff;
  --brand-grad: linear-gradient(160deg, #3a2fd0 0%, #2196ff 100%);

  /* Cool neutrals */
  --bg:        #f5f6fb;
  --surface:   #ffffff;
  --surface-2: #fafbff;
  --ink:       #0e1230;
  --ink-2:     #2a2f55;
  --muted:     #6b7197;
  --muted-2:   #9aa0bf;
  --rule:      #e6e8f3;
  --rule-2:    #d6d9ec;

  /* Accents */
  --accent-soft: #eef0ff;
  --ai:          #6e57ff;
  --ai-soft:     #ece8ff;

  /* Semantic */
  --positive:       #1f8a4f;
  --positive-soft:  #e1f3e8;
  --warning:        #b46a13;
  --warning-soft:   #fbecd6;
  --danger:         #c0392b;
  --danger-soft:    #fbe5e1;
}

/* ── tw-artboard (exact from tokens.css) ── */
.tw-artboard {
  font-family: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "cv02";
  letter-spacing: -0.005em;
}

.tw-artboard * { box-sizing: border-box; }
.tw-artboard p,
.tw-artboard h1,
.tw-artboard h2,
.tw-artboard h3,
.tw-artboard h4 { margin: 0; }
.tw-artboard button {
  font: inherit; cursor: pointer; border: 0;
  background: none; padding: 0; color: inherit;
}
.tw-artboard input,
.tw-artboard textarea,
.tw-artboard select { font: inherit; color: inherit; }

/* ── Typography classes (exact from tokens.css) ── */
.display {
  font-family: "Instrument Sans", "Geist", "Inter", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.mono {
  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
}

/* ── Focus ring ── */
.tw-artboard input:focus,
.tw-artboard textarea:focus,
.tw-artboard button:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

/* ── AI dot pulse ── */
@keyframes ai-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.ai-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: ai-pulse 2.4s ease-in-out infinite;
}

/* ── Page-level reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 14px; }
html, body { margin: 0; padding: 0; height: 100%; }