/* NodeI.ai — base tokens + global type. Direction styles live inline / scoped. */
:root {
  --iron:        #2D5F7C;
  --iron-deep:   #1F4359;
  --iron-soft:   #5B89A3;
  --iron-mist:   #A8C0CF;
  --bone:        #E8E2D5;
  --mineral:     #8B95A1;
  --mineral-lt:  #B8BFC7;
  --canvas:      #F0EDE4;
  --vellum:      #F5F1EA;
  --paper:       #FBF9F4;
  --obsidian:    #0F1419;
  --pewter:      #3D4451;
  --line:        #DAD4C6;
  --warn:        #B5523E;

  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --shadow-sm: 0 2px 8px -2px rgba(31,67,89,0.10);
  --shadow:    0 12px 32px -12px rgba(31,67,89,0.18);
  --shadow-lg: 0 28px 64px -24px rgba(31,67,89,0.22);
  --shadow-xl: 0 40px 100px -30px rgba(31,67,89,0.28);

  --r-xs: 8px;
  --r-sm: 12px;
  --r: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* Tweakable */
  --accent: var(--iron);
  --accent-deep: var(--iron-deep);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--canvas);
  color: var(--obsidian);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* utility: focus ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* keyframes */
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes spark-flow {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
@keyframes trace-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}
@keyframes drift {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.blink { animation: blink 1.05s infinite; }

/* Selection */
::selection { background: var(--iron); color: var(--vellum); }

/* common scrollbar */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(45,95,124,0.18); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(45,95,124,0.32); }