/* ═══════════════════════════════════════════════════════════════════
   sentinel-tokens.css — Sentinel AI × OneDigital Wealth OS Design Tokens
   Aligned with Sentinel OS: dark substrate, brass signature accent,
   Space Grotesk display, Hanken Grotesk body, JetBrains Mono data.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Typography ── */
  --font-sans: "Hanken Grotesk", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Surfaces (Sentinel OS dark substrate) ── */
  --bg-root: #0A0A0B;
  --bg-canvas: #08080A;
  --bg-surface-1: #121214;
  --bg-surface-2: #1A1A1D;
  --bg-surface-3: #232327;
  --bg-surface-4: #2B2B30;
  --bg-hover: rgba(255, 255, 255, 0.045);
  --bg-active: rgba(255, 255, 255, 0.08);
  --bg-input: #0D0D10;
  --bg-overlay: rgba(3, 3, 4, 0.72);
  --bg-glass: rgba(18, 18, 20, 0.78);

  /* ── Text ── */
  --text-primary: #F4F1EA;
  --text-secondary: #B0ABA1;
  --text-tertiary: #7A766E;
  --text-quaternary: #524F49;
  --text-on-accent: #1A140A;
  --text-inverse: #0A0A0B;

  /* ── Hairlines ── */
  --line-subtle: rgba(255, 255, 255, 0.045);
  --line-default: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --line-brass: rgba(201, 168, 106, 0.32);

  /* ── Signature accent — Brass ── */
  --brass: #C9A86A;
  --brass-bright: #DCC089;
  --brass-deep: #A88746;
  --brass-tint: rgba(201, 168, 106, 0.12);
  --brass-glow: rgba(201, 168, 106, 0.22);

  /* ── Semantics ── */
  --pos: #6FB593;
  --pos-bright: #8ECCAB;
  --neg: #D9685C;
  --neg-bright: #E8847A;
  --warn: #E0944A;
  --warn-bright: #EDA866;
  --info: #7E93C2;

  /* ── Journey wayfinding accents (used sparingly) ── */
  --j-acquire: #8B8AF1;
  --j-manage: #6FB593;
  --j-discover: #B88DE4;
  --j-serve: #E0944A;
  --j-command: #7E93C2;
  --j-transact: #E0944A;
  --j-advisory: #5FB8B0;
  --j-analytics: #B88DE4;
  --j-revenue: #D9B163;
  --j-compliance: #D9685C;
  --j-products: #D97BA8;

  /* ── Chart / data viz palette ── */
  --viz-1: var(--brass);
  --viz-2: #6FB593;
  --viz-3: #7E93C2;
  --viz-4: #D9685C;
  --viz-5: #B88DE4;
  --viz-6: #E0944A;
  --viz-7: #5FB8B0;
  --viz-8: #D9B163;

  /* ── Priority lanes ── */
  --prio-p1: var(--neg);
  --prio-p2: var(--warn);
  --prio-p3: var(--brass);
  --prio-p4: var(--info);
  --prio-p5: var(--pos);

  /* ── Shadows ── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 16px 40px -12px rgba(0, 0, 0, 0.6), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.22);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ── Motion ── */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;

  /* ── Radii ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ── Spacing ── */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 32px;
  --sp-10: 40px;
  --sp-11: 48px;
  --sp-12: 64px;
  --sp-13: 80px;

  /* ── Shell metrics ── */
  --sidebar-width: 260px;
  --topbar-height: 60px;
}

/* ── Keyframes ── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 2px var(--brass-glow); }
  50% { box-shadow: 0 0 0 5px rgba(201, 168, 106, 0.08); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Base ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-sans);
  background: var(--bg-root);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  overflow: hidden;
}

button, input, textarea, select {
  font-family: inherit;
  color: inherit;
}

button { cursor: pointer; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ── Typography helpers ── */
.font-display { font-family: var(--font-display); }
.font-mono, .mono, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-quaternary { color: var(--text-quaternary); }
.text-brass { color: var(--brass); }
.text-pos { color: var(--pos); }
.text-neg { color: var(--neg); }
.text-warn { color: var(--warn); }
.text-info { color: var(--info); }

/* ── Inline links ── */
a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; }