:root {
  /* Quiet graphite analytics palette. Blue identifies data and links. */
  --nf-color-ink-950: #181818;
  --nf-color-ink-900: #222222;
  --nf-color-control-900: #272727;
  --nf-color-overlay-800: #2b2b2b;
  --nf-color-ink-850: #1c1c1c;
  --nf-color-ink-800: #2a2a2a;
  --nf-color-ink-750: #363636;
  --nf-color-ink-700: #444444;
  --nf-color-slate-400: #b9b9b7;
  --nf-color-white: #ffffff;
  --nf-color-blue-200: #9ac1ff;
  --nf-color-blue-400: #73a7f2;
  --nf-color-blue-600: #2f61ae;
  --nf-color-blue-700: #0f3b8e;
  --nf-color-blue-950: #041128;
  --nf-color-danger-500: #ef4444;
  --nf-color-danger-600: #d63d3d;
  --nf-color-success-500: #22c55e;

  --nf-alpha-white-03: rgba(255, 255, 255, 0.03);
  --nf-alpha-white-05: rgba(255, 255, 255, 0.05);
  --nf-alpha-white-07: rgba(255, 255, 255, 0.07);
  --nf-alpha-white-10: rgba(255, 255, 255, 0.10);
  --nf-alpha-white-12: rgba(255, 255, 255, 0.12);
  --nf-alpha-white-16: rgba(255, 255, 255, 0.16);
  --nf-alpha-white-46: rgba(255, 255, 255, 0.46);
  --nf-alpha-white-60: rgba(255, 255, 255, 0.6);
  --nf-alpha-selection-10: rgba(244, 245, 243, 0.10);
  --nf-alpha-selection-24: rgba(244, 245, 243, 0.24);
  --nf-alpha-black-12: rgba(0, 0, 0, 0.12);
  --nf-alpha-black-24: rgba(0, 0, 0, 0.24);
  --nf-alpha-black-56: rgba(0, 0, 0, 0.56);

  /* Semantic colors: components consume these, never palette values directly. */
  --nf-color-canvas: var(--nf-color-ink-950);
  --nf-color-surface: var(--nf-color-ink-900);
  --nf-color-surface-raised: var(--nf-color-ink-800);
  --nf-color-surface-hover: var(--nf-alpha-white-12);
  --nf-color-border: var(--nf-color-ink-700);
  --nf-color-border-subtle: var(--nf-color-ink-750);
  --nf-color-text: var(--nf-color-white);
  --nf-color-text-muted: var(--nf-color-slate-400);
  --nf-color-text-secondary: var(--nf-alpha-white-60);
  --nf-color-selection: #f4f5f3;
  --nf-color-selection-text: var(--nf-color-canvas);
  --nf-color-data: #78a9e6;
  --nf-color-link: #a8c9f1;
  --nf-color-action: var(--nf-color-white);
  --nf-color-action-text: var(--nf-color-ink-950);
  --nf-color-focus-ring: rgba(244, 245, 243, 0.22);
  --nf-color-rating: #fff06a;
  --nf-color-rating-hover: rgba(255, 239, 103, 0.72);

  /* Cross-page interaction semantics. Page namespaces may alias these, never own them. */
  --nf-control-background: var(--nf-color-control-900);
  --nf-selected-background: var(--nf-color-white);
  --nf-selected-text: var(--nf-color-ink-950);
  --nf-action-menu-background: var(--nf-color-overlay-800);
  --nf-action-menu-danger-text: #ffd0d0;
  --nf-danger-action-background: var(--nf-color-danger-600);
  --nf-motion-interaction-fast: 140ms;

  --nf-gradient-balance: linear-gradient(31.512deg, var(--nf-color-blue-700) 29.11%, var(--nf-color-blue-950) 112.57%);

  /* Spacing and geometry. */
  --nf-space-1: 4px;
  --nf-space-2: 8px;
  --nf-space-3: 12px;
  --nf-space-4: 16px;
  --nf-space-6: 24px;
  --nf-header-visual-top-space: var(--nf-space-4);
  --nf-radius-sm: 6px;
  --nf-radius-md: 12px;
  --nf-radius-lg: 16px;
  --nf-radius-xl: 20px;
  --nf-radius-pill: 999px;
  --nf-size-icon: 24px;
  --nf-size-avatar: 52px;
  --nf-size-menu: 368px;
  --nf-segmented-control-inset: 4px;

  /* Named paint layers. Domain owners control lifecycle, tokens control order. */
  --nf-layer-action-menu: 2147482900;
  --nf-layer-sheet: 2147483001;
  --nf-layer-development-chrome: 2147483100;

  /* Typography. */
  --nf-font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nf-font-action: Arial, Helvetica, sans-serif;
  --nf-weight-regular: 400;
  --nf-weight-medium: 500;
  --nf-weight-semibold: 600;
  --nf-weight-bold: 700;
  --nf-weight-extrabold: 800;
  --nf-type-caption-size: 9px;
  --nf-type-caption-line: 14px;
  --nf-type-body-sm-size: 14px;
  --nf-type-body-sm-line: 21px;
  --nf-type-body-size: 16px;
  --nf-type-body-line: 21px;
  --nf-type-balance-size: 28px;
  --nf-type-balance-line: 38px;

  /* Component tokens retained for the standalone platform shell. */
  --nf-menu-width: var(--nf-size-menu);
  --nf-menu-padding: var(--nf-space-4);
  --nf-menu-gap: var(--nf-space-6);
  --nf-menu-radius: var(--nf-radius-xl);
  --nf-menu-background: var(--nf-color-surface);
  --nf-menu-border: var(--nf-color-border);
  --nf-menu-list-background: var(--nf-color-surface-raised);
  --nf-menu-list-border: var(--nf-color-border-subtle);
  --nf-menu-avatar-fallback-background: var(--nf-color-ink-800);
  --nf-menu-avatar-fallback-border: var(--nf-color-ink-750);
  --nf-menu-row-hover-background: var(--nf-alpha-white-12);
  --nf-menu-row-pressed-background: var(--nf-alpha-white-16);
  --nf-menu-language-divider: linear-gradient(90deg, rgba(244, 245, 243, 0) 0%, var(--nf-alpha-selection-24) 50%, rgba(244, 245, 243, 0) 100%);
  --nf-menu-popover-background: #2b2b2b;
  --nf-menu-popover-border: var(--nf-color-ink-700);
  --nf-menu-popover-shadow: 0 18px 21px rgba(0, 0, 0, 0.45);
  --nf-menu-popover-active-background: var(--nf-alpha-selection-24);
  --nf-menu-popover-active-border: var(--nf-alpha-selection-10);
  --nf-menu-popover-press-scale: 0.97;
  --nf-menu-topup-hover-scale: 1.03;
  --nf-menu-topup-active-scale: 0.97;
  --nf-menu-motion-duration: 140ms;
  --nf-menu-row-height: 48px;
  --nf-menu-row-radius: var(--nf-radius-md);
  --nf-menu-shadow: 0 24px 56px var(--nf-alpha-black-56);

  /* History / Ready for Dev - Figma 4140:16108 and 6011:1585. */
  --nf-color-history-card: var(--nf-color-control-900);
  --nf-color-history-menu: var(--nf-color-overlay-800);
  --nf-history-screen-padding: 16px;
  --nf-history-row-height: 48px;
  --nf-history-row-radius: 12px;
  --nf-history-control-background: var(--nf-control-background);
  --nf-history-row-default-background: transparent;
  --nf-history-row-pressed-background: var(--nf-alpha-white-12);
  --nf-history-row-active-background: var(--nf-alpha-selection-24);
  --nf-history-tab-active-background: var(--nf-selected-background);
  --nf-history-tab-active-text: var(--nf-selected-text);
  --nf-history-menu-background: var(--nf-action-menu-background);
  --nf-history-status-unread: var(--nf-color-selection);
  --nf-history-status-error: var(--nf-danger-action-background);
  --nf-history-menu-danger-text: var(--nf-action-menu-danger-text);
  --nf-history-section-text: var(--nf-alpha-white-46);
  --nf-history-motion-fast: var(--nf-motion-interaction-fast);
  --nf-history-motion-tab: 220ms;
  --nf-history-motion-page: 240ms;
  --nf-history-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nf-history-tab-press-scale: .96;
  --nf-history-search-expanded-scale: 1.012;
  --nf-history-workspace-surface: #2b2b2b;
  --nf-history-workspace-divider: linear-gradient(90deg, transparent 0%, rgba(244, 245, 243, .32) 50%, transparent 100%);
  --nf-history-workspace-header-height: var(--nf-history-row-height);

  /* Notifications: shared surfaces with semantic category accents. */
  --nf-notification-card-background: var(--nf-color-surface);
  --nf-notification-card-border: var(--nf-alpha-white-07);
  --nf-notification-tone-default: rgba(244, 245, 243, 0.10);
  --nf-notification-tone-success: rgba(34, 197, 94, 0.14);
  --nf-notification-tone-warning: rgba(245, 158, 11, 0.14);
  --nf-notification-tone-danger: rgba(239, 68, 68, 0.14);
  --nf-notification-read-opacity: 0.76;

  /* Shop: shared cards and payment-sheet interaction surfaces. */
  --nf-shop-card-background: var(--nf-alpha-white-03);
  --nf-shop-panel-background: var(--nf-color-surface);
  --nf-shop-control-background: var(--nf-alpha-white-03);
  --nf-shop-control-selected: rgba(244, 245, 243, 0.10);
  --nf-shop-payment-surface: var(--nf-color-surface);
  --nf-shop-payment-option-background: var(--nf-alpha-white-03);
  --nf-shop-payment-option-selected: rgba(244, 245, 243, 0.06);
  --nf-shop-payment-scrim: rgba(7, 9, 14, 0.52);
  --nf-history-workspace-overlay-outset-top: var(--nf-space-2);
  --nf-history-workspace-overlay-outset-inline: 10px;
  --nf-history-workspace-overlay-outset-bottom: var(--nf-space-3);
  --nf-history-workspace-chat-gap: 2px;
  --nf-history-workspace-chat-viewport: 298px;
  --nf-history-workspace-motion: 230ms;
}