:root {
  /* Primitive palette: Figma "Menu Update" (4064:26190), 2026-07-28. */
  --nf-color-ink-950: #11131a;
  --nf-color-ink-900: #181b24;
  --nf-color-control-900: #1d1f28;
  --nf-color-overlay-800: #21232f;
  --nf-color-ink-850: #1c1f2a;
  --nf-color-ink-800: #232734;
  --nf-color-ink-750: #2c303e;
  --nf-color-ink-700: #2f3441;
  --nf-color-slate-400: #9aa3b8;
  --nf-color-white: #ffffff;
  --nf-color-purple-400: #7c5cff;
  --nf-color-purple-500: #6c4ff0;
  --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-34: rgba(255, 255, 255, 0.34);
  --nf-alpha-white-46: rgba(255, 255, 255, 0.46);
  --nf-alpha-white-60: rgba(255, 255, 255, 0.6);
  --nf-alpha-purple-20: rgba(124, 92, 255, 0.2);
  --nf-alpha-purple-34: rgba(124, 92, 255, 0.34);
  --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-accent: var(--nf-color-purple-500);
  --nf-color-action: var(--nf-color-white);
  --nf-color-action-text: var(--nf-color-ink-950);
  --nf-color-focus-ring: var(--nf-alpha-purple-20);
  --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-boot-minimum: 180ms;
  --nf-boot-soft-timeout: 1800ms;
  --nf-boot-hard-timeout: 5000ms;
  --nf-loading-skeleton: rgba(255, 255, 255, 0.055);
  --nf-loading-skeleton-highlight: rgba(255, 255, 255, 0.105);

  --nf-gradient-balance: linear-gradient(31.512deg, var(--nf-color-blue-700) 29.11%, var(--nf-color-blue-950) 112.57%);
  --nf-gradient-canvas-glow: radial-gradient(circle at 50% 0%, rgba(124, 92, 255, 0.16) 0%, rgba(124, 92, 255, 0.04) 34%, rgba(124, 92, 255, 0) 72%);

  /* 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: 6px;
  --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;

  /* Responsive platform shell: phone keeps the Mini App canvas, tablet uses a
     compact navigation rail, and desktop exposes the complete navigation. */
  --nf-platform-rail-width: 76px;
  --nf-platform-sidebar-width: 248px;
  --nf-platform-content-max: 1120px;
  --nf-platform-reading-max: 1120px;
  --nf-platform-chat-max: 840px;
  --nf-platform-composer-max: 760px;
  --nf-platform-page-gutter: clamp(24px, 3vw, 40px);
  --nf-platform-sidebar-background: #0d0f15;
  --nf-platform-sidebar-border: rgba(255, 255, 255, 0.07);

  /* 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: exact Menu Update contract. */
  --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(124, 92, 255, 0) 0%, var(--nf-alpha-purple-34) 50%, rgba(124, 92, 255, 0) 100%);
  --nf-menu-popover-background: #21232f;
  --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-purple-34);
  --nf-menu-popover-active-border: var(--nf-alpha-purple-20);
  --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-purple-34);
  --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-purple-500);
  --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-workspace-surface: #21232f;
  --nf-history-workspace-divider: linear-gradient(90deg, transparent 0%, rgba(124, 92, 255, .42) 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(124, 92, 255, 0.20);
  --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(124, 92, 255, 0.12);
  --nf-shop-payment-surface: var(--nf-color-surface);
  --nf-shop-payment-option-background: var(--nf-alpha-white-03);
  --nf-shop-payment-option-selected: rgba(124, 92, 255, 0.08);
  --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;
}